@charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	border:0px;
}
html, body {
	height: 100%;
}

/* remember to define focus styles! */
 :focus {
 outline: 0;
 } 

body{
	margin:0px;
	padding:0px;
	background-position:left top;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#2F2F2F;
}
p, h1, h2, h3, h4, h5, h6 {color: #fff;}
a, a:visited, a:active, a:link{color:#F2F2F2; text-decoration:none;}
a:hover{color:#FFF; text-decoration:none;}
.h1, h1 {
    font-size: 2.5rem;
    color: #FFF; 
}
#myTopnav {
    display: none;
}
#header-bar .container {
    position: relative;
    display: block;
    background: #ffffffc4 !important
}

div#container-main {
	margin:0px;
	margin-left:auto;
	margin-right:auto;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto; /* the bottom margin is the negative value of thefooter's height */	
}


#homepage div#container-main {
	margin: 0 auto -150px; /* the bottom margin is the negative value of thefooter's height */	
}

.container {
	max-width: 1024px; 
	padding-left: 0; 
	padding-right: 0; 
}

div#menu-top{
	background-color:#330000;
	height:30px;
	border-bottom:1px solid #900;
	
}

div#menu-top div.inner-frame {
    height: 30px;
    z-index: 999;
}

div#header-bar .contact-phone{right:0; top:0px; position:absolute;color: green;font-size: 20px;text-decoration: none;}
div#header-bar .contact-phone a { color: green;}

div#header-bar {
    position: fixed;
    font-size: 16px;
	height: 140px;
	z-index: 1;
    width: 100%;
    left: 0;
    top: 0;#header-bar .container
}
.content.container {
    margin-top: 130px;
	background: #00000069; 
}

div#header-bar div.logo-wrapper {
	width: 100%; 
	text-align: center; 
	padding-top: 6px; 
	height: 80px;
}
div#header-bar div.logo-wrapper img{
    position: relative;
    height: 100px;
}
div#header-bar div.logo-wrapper img{height: 100%; width: auto;}


div#header-bar div.nav-bar {
    position: relative;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
div#header-bar div.nav-bar a.nav-item {
    text-decoration: none;
    color: #501014;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 1;
    border-bottom: 1px solid #5010144d;
    transition: .1s all;
    margin: 6px;
    padding-bottom: 3px;
    display: inline-block;
	vertical-align: bottom; 
}
.nav-logo img {
    height: 130px;
}
div#header-bar div.nav-bar a.nav-item:hover, div#header-bar div.nav-bar a.nav-item.active {
    border-bottom: 1px solid #cf000d;
    color: #cf000d;
    transform: translate(0px, -2px);

}

#menu-categories h3 {
    text-transform: uppercase;
    padding-left: 30px;
    font-size: 20px;
    background: #fff3;
    padding-top: 10px;
    padding-bottom: 10px;
}

.review {
    text-align: center;
    padding-right: 35px;
    padding-left: 35px;
}
.stars .orange {
    color: orange;
}

div#slider{
	margin-left:auto;
	margin-right:auto;
}
#slider-item {
    width: 100% !important;
}
.gallerylayer img {
    width: 100%;
    height: auto !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}
.gallery {
    padding: 0 30px;
}
div.content{
	padding-top: 30px; 
	padding-bottom: 30px;
	font-size:16px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.food-icon {
    height: 120px;
    padding: 15px;
    border-radius: 8%;
}
.menu:hover .food-icon {
    transform: scale(1.1);
    transition: .5s all; 
}
.gallery .col-md-3 {
    padding-bottom: 15px;
    padding-top: 15px;
}
.see-more {
    padding: 6px 30px;
    text-transform: uppercase;
    font-size: 20px;
    letter-spacing: 1px;
    background: #2F2F2F;
    color: white !important;
}
.location iframe {
    width: 100%;
}
.location p {
	font-size: 18px;
}
.location a {
	text-decoration: none; 
}
.location .contact p {
	font-size: 16px; 
}
.location .contact {
	border-top: 1px solid #2d2d2d; 
	padding-top: 60px; 
	margin-top: 30px; 
}
.content-widget p span {
    width: 40% !important;
    display: inline-block;
}
.content-widget ul {
    padding-left: 12px;
}
.content-widget p {
    margin-bottom: 4px;
}
.content-widget {
    margin-bottom: 30px;
}
#footer{
	background-color:#212121;
	margin-left:auto;
	margin-right:auto;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	padding: 30px; 
}
#footer a {text-decoration: none; color: white; }
#footer img {height: 20px; margin-bottom: 4px;margin-right: 10px;border-radius: 3px;}
#footer .follow.widget-content p {
    margin-bottom: 10px;
    font-size: 16px;
}
#footer .container {background: transparent; }
.widget-title {
    font-size: 18px;
    border-bottom: 1px solid gray;
    display: inline-block;
    margin-bottom: 20px;
    font-weight: 400;
    font-family: Trebuchet MS;
    color: #F2F2F2;
}

#footer .widget-content {
    font-size: 13px;
    line-height: 1.5;
    color: #dadada;
}
#footer .widget-content p {
    margin-bottom: 0;
}
#footer .widget-content p .days {

    width: 40% !important;
    display: inline-block;

}

.pagetitle, .menusectionheader{
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:30px;
	
}

div#menu-categories{width:250px; padding-right:10px;}
div#menu-categories ul{margin:0px; padding-left:15px;}
div#menu-categories ul li{list-style:none; padding-bottom:0px; font-size:18px;}
div#menu-categories ul a{cursor: pointer; color:#ffffff; text-decoration:none; display:block; padding:15px; padding-top:8px; padding-bottom:8px;}
div#menu-categories ul a:hover{background-image:url("../images/sidenav.png");  background-repeat:no-repeat; background-position:left center; color:#020202; text-decoration: none; }
div#menu-categories .ui-tabs-active {background-image:url("../images/sidenav.png"); color: 020202; background-repeat:no-repeat; background-position:left  center;}
div#menu-image{padding-left:0px; border-left:1px solid #333;}
div#notice .row{padding-top:0px; padding-bottom:15px;}
div#menu-image img {width: 100%;}

/*-- Menu --*/

.menuitem{
	font-size:14px;	
	font-weight:bold;
}

.menudesc{
	font-size:13px;
	font-weight:normal;
	line-height:1.6;
	color:#666;
}

.itemSmallDesc{
	color:#999;
	font-style:italic;
	font-size:12px;
	padding-left:3px;
}

div#menu-image div.fish-icon{
	padding-top:5px;	
}

.menuheader{
	font-size:21px;
	display:block;
	border-bottom:2px solid #330000;
	margin-bottom:5px;
}


div#notice{
	color:#999;
	font-size:12px;
	border-top:#303030 1px solid;
	padding-top:10px;
}


.otherlocationside{
	background-image:url("../images/bg_10percent.png");
	background-position:left top;
	background-repeat:repeat;
	margin-top:10px;
}

 .sidebar{
	background-image:url("../images/bg_10percent.png");
	background-position:left top;
	background-repeat:repeat;
	padding:20px;
	padding-bottom:30px;
}

.sidebar .titleBox{
	font-size:14px;
	font-weight:bold;
	padding-bottom:15px;
}

/*-- Header Drop Down */

a.sample_attach, a.sample_attach:visited, div.sample_attach
{
  display: block;
  width:   120px;
  border:  1px solid #000000;
  padding: 1px 1px;
  padding-left:10px;
  padding-right:10px;
  background: #220000;
  height:18px;
  line-height:18px;
  text-decoration: none;
  font-size	: 11px;
  color:   #ffffff;
}

div#sample_attach_menu_parent{
	float:left;	 
	z-index:99999;
	margin-top:4px; 
	margin-left:10px;
	background-image:url("../images/downarrow.png");
	background-position:right center;
	background-repeat:no-repeat;
}
a.sample_attach, a.sample_attach:visited { border-bottom: none; }
div#sample_attach_menu_child             { border-bottom: 1px solid black; z-index:999999}

.headerCaption{float:left;}


/*-- HOmepage --*/
#destSelectionBox{width:940px; margin-left:auto; margin-right:auto; margin-top:20px;}
#destSelectionBox .SelectBox{width:223px; padding-bottom:20px;}
#destSelectionBox .SelectBox .inner-frame{
	 border:1px solid #333;
	 padding:10px;
	 cursor:pointer;
	 position:relative;
	 font-size:14px;
}



#destSelectionBox .SelectBox .inner-frame:hover{
	background-image:url("../images/bg_10percent.png");
	background-repeat:repeat;
	background-position:left top;
	border:1px solid #fff;
}

#box1, #box2, #box3{margin-right:15px; float:left;}
#box4{float:right;}

.newbutton{
	position:absolute;	
	right:-50px;
	top:20px;
}

.localnewbutton{
    height: 1px;
    position: relative;
    right: -170px;
    top: -15px;
    z-index: 999;
}


/* Menu Page */ 
#menu-new ul .ui-tabs-active a {
    background: #222; 
    color: white; 
}
#menu-new p > a.active {
    background: black;
}
#menu-new ul .ui-tabs-active a:hover {
    background: #222; 
    color: white; 
}
#menu-new ul li a {color: white;}
#menu-new ul li {
    float: left;
    border: 1px solid #00000080; 
    background: #00000080; 
    margin: 3px;
    text-transform: uppercase; 
    color: white; 
    list-style: none;
}
#menu-new ul  li > a {
		padding: 10px;
		text-decoration: none; 
		display: inline-block; 
}

#menu-new p {
	text-align: center; 
}
#menu-new p > a {
text-align: center;
padding: 10px;
text-transform: uppercase;
font-size: 16px;
cursor: pointer;
}
#menu-new-img {
    padding: 20px 10%;
}

#menu-new-img img{
    width: 100%; 
}
.ui-tabs-panel {
padding: 0 20px;	
}
	


/* 
Order Online Page
*/


.menu h4 a {
    border-bottom: 1px solid #2f2f2f;
    padding-bottom: 5px;
    margin-top: 10px;
    display: inline-block;
}
.orderOnline {
    padding: 10px 20px;
    border-radius: 40px;
    background: #f13f3f;
    color: #fff !important;
    display: inline-block;
    text-decoration: none !important;
    font-size: 19px;
    text-transform: uppercase;
    font-weight: bold;
    opacity: 1;
    margin: 15px;
    transition: .5s ease-in-out;
}
.order hr, .seperator {
    border-top: 1px solid rgb(179, 179, 179);
    margin: 1.5rem 0;
    width: 100%;
}

.orderOnline:hover {
	opacity: 1; 
	transform: scale(1.1); 
}
.order p {
	font-size: 16px; 
}
.order a {
	text-decoration :none; 
}


/* order online page end */ 

/* contact page */

.contact-form input, .contact-form textarea {
    width: 100%;
    margin: 8px 0;
    padding: 16px;
    background: #ffffff4d;
    box-shadow: 0px 1px 3px #2F2F2F;
	font-size: 18px; 
}
.contact-form .one-half.last {
    float: right;
}
.contact-form .one-half {
    width: 49%;
    float: left;
}
.contact-form input[type="submit"] {
    background: #f13f3f;
    color: #FFF
    box-shadow: 1px 1px 3px black;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
}



/* contact page end */ 
.clear{clear:both; padding-bottom:10px;}


.hpMessage{
	width:940px;	
	margin-left:auto;
	margin-right:auto;	
}

.hpMessage .inner-frame{
	border:1px solid #333;
	padding:20px;
	font-size:14px;
	margin-bottom:20px;
	margin-top:20px;
}

.hpMessage .inner-frame .titleBox{
	font-size:18px;
	font-weight:bold;
	margin-bottom:15px;
}


@media only screen and (max-width: 600px) {
	.col-sm-6 {
		width: 50%;
	}
.mobile-menu img {
    width: 100%;
    height: auto !important;
    margin-bottom: 30px;
}

h2 {font-size: 1.2rem}
h3 {font-size: 1rem}
.content.container {
    margin-top: 90px;
}
	.row {
	    padding-left: 0px;
	    padding-right: 0px;
	    margin-left: 0px;
	    margin-right: 0px;
	}
	.orderOnline {
    padding: 14px 18px;
    font-size: 16px;
    display: block;
    width: 190px;
    margin: 10px auto;
}
	.col-sm-4 {
	    width: 33%;
	}
	.menu h4 {
	    font-size: 14px;
	    font-weight: bold;
	}
	.h1, h1 {
	    font-size: 2rem;
	}

	#menu-new-img {
	    padding: 20px 0%;
	}

	div#header-bar div.logo-wrapper img {
    		width: auto; 
    		height: 66px !important; 
	}
	#myTopnav {
	    display: block;
	    position: absolute;
	    top: 0;
	    right: 0;
	    width: 100%;
	}	
#myTopnav .icon {
    padding: 10px;
    position: absolute;
    right: 10px;
    top: 40px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    background-color: #222;
    background-size: 18px;
    border-radius: 25px;
    background-position: center;
    background-repeat: no-repeat;
}
.topnav .icon {
    background-image: url('http://paninigrillnj.com/images/menu-icon.png');
}
.topnav.responsive .icon {
    background-image: url('http://paninigrillnj.com/images/menu-icon-cross.png');
}

	.responsive  .mobile-menu {
	    background: #fff;
	    width: 60%;
	    box-shadow: 0 0 5px black;
	    height: 100vh;
	    transition: .5s all;
	}
	.gallery .col-md-3 {
		padding: 7px;
	}
	div#header-bar div.contact-phone {
		right: unset;
		top: -30px;
		position: relative;
		margin: auto;
		display: block;
		text-align: center;
	}
	div#header-bar div.nav-bar {
		display: none;
	}
	.logo-wrapper img {
		width: auto;
		height: 100px !important; 
	}
	div#header-bar div.logo-wrapper {
   		width: 102px;
    		height: auto;
    		position: relative;
    		left: 10px;
			display: block ;
	}
	div#header-bar {
		height: 80px;
	}
	#slider-item {
		width: 100% !important;
		height: 100px !important;
	}
	#footer {
		text-align: center;
	}
	#footer .widget-content p .days {
		text-align: left;
	}
}

  @media screen and (max-width: 600px) {
	.topnav a {display: none;}
	.topnav a.icon {
	  float: right;
	  display: block;
	}
  }
  
  @media screen and (max-width: 600px) {

	.topnav.responsive a {
		display: block;
		text-align: left;
		padding: 5px 10px;
		border-bottom: 1px dotted gray;
		color: #2F2F2F;
		text-decoration: none;
	}
	.topnav.responsive a:hover {
		background-color: #fff6;
		color: #000;
		border-bottom: 1px dotted gray;
	}
	div#menu-categories {
    width: 100%;
    padding-right: 10px;
	}
  }