@charset "UTF-8";
/* MASTER CSS Document - CARLOS PIZZA */

/* ---------------------------------*/
/* 1.0 STYLING FOR LAYOUT SECTIONS  */
/* ---------------------------------*/
body {margin: 0; padding:0; background:url(images/bg-page.jpg) top repeat-x; background-color:#540400; font-size: 12px; line-height: 20px; color: #434b51; font-family: Arial, Helvetica, sans-serif;}

* {	margin: 0; padding: 0; /*border: none; outline: none; */ }

/*img {width:100%; height:auto;} */

/* the almost black band across the top */
#top {width:100%; height:199px; background-image:none; background-color:#1F0100;}

#wrapper {	
width: 960px; /* 960px set once here - everything else is percent of this */
margin:0 auto;
text-align:left; }


#header {background-color:none;	height: 125px;}

#logo {float:left;margin:1.666666%}

.strapline {float:right;margin:5% 2% 0 0;color:#666666;font-size:1.4em;text-align:right;}
.address {font-size:80%; color:#e8e8e8;}
.phone {color:#FFF900;}

@media screen and (max-width: 768px){
.strapline {float:right;margin:5% 2% 0 0;color:#666666;font-size:1.2em;text-align:right;line-height:1.0555em; }
.strapline span {font-size:.9em;}
}
/*------------*/
/* navigation */
/*------------*/
.tablist {
    list-style:none; 
    height:2em;
    padding:0; 
    margin:.5em 0 0 0; 
    border: none;
}
.tablist li {
    float:left;
	margin:0; 
    /*margin-right:0.1em;  */
}
.tablist li a {
    display:block;
    padding:.8em 1.5em;
    text-decoration:none;
    border:0.06em solid #000;
    border-bottom:0;
    font:0.88em/2em arial,geneva,helvetica,sans-serif;
    color:#fff;
	text-transform:uppercase;
    background-color:#ccc;

    /* rounded corners */
    webkit-border-top-right-radius:0.50em;
    -webkit-border-top-left-radius:0.50em;
    -moz-border-radius-topright:0.50em;
    -moz-border-radius-topleft:0.50em;
    border-top-right-radius:0.50em;
    border-top-left-radius:0.50em;
	
	/* gradient color */
	background: #B2BA13; 
	background: linear-gradient(top, #B2BA13 0%, #7E8B1C 100%);  
	background: -moz-linear-gradient(top, #B2BA13 0%, #7E8B1C 100%); 
	background: -webkit-linear-gradient(top, #B2BA13 0%,#7E8B1C 100%); 
	/* for IE 6-8 */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#B2BA13', endColorstr='#7E8B1C',GradientType=0 );
}
@media screen and (max-width: 768px){
.tablist li a {
	padding:.4em .8em;
	font-size:.85em;
}
}
@media screen and (max-width: 400px){
.tablist li a {
	padding:.4em .6em;
	font-size:.7666em;
}
}
.tablist li a:hover, .tablist li#current a {
	background:#666600;
	color:#fff;
	text-decoration:none;
}

/* MAIN CONTENT SECTION FOR EACH PAGE */
#content {	
	float:left;
	margin-top:1em;
	width:68%;
}

@media screen and (max-width: 1024px){
	#content {width:62%;}
}

#home-feature {}
@media screen and (max-width: 400px){
#home-feature {
	display:none;
}
}

/*-----------------------------*/
/* CONTAINERS & RIGHT SIDEBAR  */
/*-----------------------------*/

#sidebar { float:right; margin-top:1em;width:32%;}
#sidebar img {margin-bottom:.1em;}

.container {width:100% !important; /*padding:15px; */ }

/* 2.1 Containers - within content section*/

/* 2 EVEN COLUMNS */
.col1of2 {float:left;width:48%;}
.col2of2 {float:right;width:46%; margin-left:30px;}

/* 3 EVEN COLUMNS - RESPONSIVE */
.col1of3 {float:left;width:29.83425%; margin-right:3.3149%;}
.col2of3 {float:left;width:29.83425%; margin-right:3.3149%;}
.col3of3 {float:left;width:29.83425%;}

/* 4 EVEN COLUMNS */
.col1of4 {float:left;width:23%;}
.col2of4 {float:left;width:23%; margin-left:25px;}
.col3of4 {float:left;width:22%; margin-left:25px;}
.col4of4 {float:left;width:22%; margin-left:25px;}

@media screen and (max-width: 768px){
.col2of2 {width:44%;}
}

@media screen and (max-width: 400px){
#content, #sidebar {width:95%;}
.col1of2, .col2of2 {width:95%;}
.col1of3, .col2of3, .col3of3 {width:95%;}
}
/*----------*/
/* footer   */
/*----------*/

#footer { 	
	width:100%;
	height:auto;
	background:#1F0100;
}
#footer p {text-align:center;font-size:95%;	color:#e8e8e8;	padding:20px;}
#footer h3 {text-align:center;color:#FFF; font-size:1.1rem;border:none;margin-bottom:0; padding:10px 0 0 0;}


blockquote {background: #f7f7f7 url('images/blockquote.png') left top scroll repeat-x; padding: 10px 0; margin-top: 30px; margin-bottom: 30px; font-size: 16px; color: #1d434c; line-height: 23px; overflow: hidden; box-shadow: 0px 0px 3px rgba(000,000,000,0.25); -webkit-box-shadow: 0px 0px 3px rgba(000,000,000,0.25); -moz-box-shadow: 0px 0px 3px rgba(000,000,000,0.25); position: relative; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; color: #5380A2;}
blockquote p, blockquote h4, blockquote .name {margin: 0 20px; padding: 10px 0; position: relative;}
blockquote p {position: relative; z-index: 1;}
blockquote p.first {background: url('../images/leftQuote.png') left top no-repeat;}
blockquote span.rightQuote {position: absolute; right: 20px; bottom: 20px; background: url('images/rightQuote.png') right bottom no-repeat; width: 52px; height: 38px; display: block; z-index: 0;}
blockquote .name {text-align: right; font-size: 16px; font-weight: bold; float: right; display: block; padding-right: 0 !important;}


input.text, input[type=text], input[type=email], input[type=password], textarea, .selector, select {font-family: Arial, Helvetica, sans-serif; font-style: italic; font-size: 12px; line-height: 18px; color: #393939; padding: 7px 10px; position: relative; border: 1px solid #cbcbcb; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; background: #fff;}
textarea {overflow: hidden !important;}
input[type=checkbox] {margin: 3px 7px 5px 0px !important;}

/*----------------------*/
/* Global classes 		*/
/*----------------------*/

.clear {clear: both;  height:0; overflow: hidden; zoom: 1;}
.clearpad {clear:both; padding:.8em;}
.ind {padding:20px;}
.noborder {	border: 0 !important; }
.nowrap { white-space: nowrap !important; }
.nopadding { padding: 0 !important; }
.nomargin {margin: 0 !important;}
.nobg {background: none !important;}
.noliststyle {list-style: none !important;}
.nodisplay {display: none;}
.overflow {clear: both; overflow: hidden; zoom: 1;}
.overflow10 {margin: 10px 0; clear: both; overflow: hidden; zoom: 1;}
.alignleft {margin: 0 20px 20px 0; float: left;}
.alignright {margin: 0 0 20px 20px; float: right;}
.alignleft, .alignright {display: inline; position: relative;}
.aligncenter {position: relative; margin-left: auto; margin-right: auto;}
.floatl {float: left;}
.floatr {float: right;}
.center {text-align: center;}
.error, .sendingError {color: #F00 !important; border: 1px solid #F00 !important;}

.orderonline {margin-left:20px; font-size:18px;}

.shadow {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
  
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);
	-ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";
	zoom: 1;
}

/* -------------------------------------------------*/
/* Info Boxes & Borders  - Responsive		 		*/
/* select box then apply color or gradient you wish */
/* -------------------------------------------------*/

.squareBox {width:100%; margin-bottom:1em; padding:.8em 2.2222em 1em 2.2222em;  border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; margin: 20px 0; overflow: hidden;}
.roundBox { width:98%; margin-bottom:1em; padding:.8em 2.2222em 1em 2.2222em; 
	/* rounded corners - set radius as you wish */
    webkit-border-top-right-radius:0.70em;
    -webkit-border-top-left-radius:0.70em;
	-webkit-border-bottom-right-radius:0.7em;
	-webkit-border-bottom-left-radius:0.7em;
	
    -moz-border-radius-topright:0.70em;
    -moz-border-radius-topleft:0.70em;
	-moz-border-radius-bottomright:0.70em;
	-moz-border-radius-bottomleft:0.70em;
    
	border-top-right-radius:0.70em;
    border-top-left-radius:0.70em;
	border-bottom-right-radius:0.7em;
	border-bottom-left-radius:0.7em;
}
@media screen and (max-width: 768px){
.squareBox, .roundBox {width:97%;}
}
@media screen and (max-width: 400px){
.squareBox, .roundBox {width:95%;}
}

/* set colors here */
.greenBox {color: #4F8A10; background: #DFF2BF; border: 1px solid #4F8A10;}
.greenBox h4 {color: #4F8A10 !important;}

.redBox {color: #D8000C; background: #FFBABA; border: 1px solid #D8000C;}
.redBox h4 {color: #D8000C !important;}

.yellowBox {color: #9F6000; background: #FEEFB3; border: 1px solid #9F6000;}
.yellowBox h4 {color: #9F6000 !important;}

.blueBox {color: #00529B; background: #BDE5F8; border: 1px solid #00529B;}
.blueBox h4 {color: #00529B !important;}

.blackBox {color:#f1f1f1; background:#1F0100; border:none; }
.blackBox h1 {color:#d6bd93; /* beige */}

/* borders */
.orangeborder {
	border:2px solid #F6892A;
	color: #F6892A;
}
.wteborder {border:2px solid #fff;}


/* ---------1.1.2  BUTTONS ----------------------------------*/
/* to make a gradient button, use the button class and apply the desired gradient from the gradient section as a secondary class */
.button {
	box-shadow: 0px 0px 5px rgba(0,0,0,0.15);
	padding: 10px 15px;
	border-radius: 10px;
	text-decoration:none;
	font-size:12px;
	text-transform:uppercase;
	line-height:17px;
	color:#fff;}

/* ---------1.1.3  GRADIENTS ----------------------------------*/
/* use this to create your custom gradients - www.colorzilla.com/gradient-editor  */

.beigeGrad {
	background: #D6BD93; 
	background: linear-gradient(top, #D6BD93 0%, #C1A168 100%);  
	background: -moz-linear-gradient(top, #D6BD93 0%, #C1A168 100%); 
	background: -webkit-linear-gradient(top, #D6BD93 0%,#C1A168 100%); 
	/* for IE 6-8 */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#D6BD93', endColorstr='#C1A168',GradientType=0 );
	color:#1F0100;
}
.orangeGrad {
	background: #CB4506; 
	background: linear-gradient(top, #530400 0%, #CB4506 100%);  
	background: -moz-linear-gradient(top, #530400 0%, #CB4506 100%); 
	background: -webkit-linear-gradient(top, #530400 0%,#CB4506 100%); 
	/* for IE 6-8 */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#530400', endColorstr='#CB4506',GradientType=0 );
	color:#f1f1f1;
}

/* ---------1.1.4  IMAGES AND CAPTIONS ----------------------------------*/

img, embed, object, video {max-width:100%;}
/*.home-feature {margin-top:-.6%;} */

.opaque {
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

.frame {border:3px solid #e8e8e8;}
.frame2 {padding:10px;background:#fff;box-shadow: 3px 5px 8px rgba(0,0,0,0.70);-moz-box-shadow: 3px 5px 8px rgba(0,0,0,0.70);-webkit-box-shadow: 3px 5px 8px rgba(0,0,0,0.70)}
.frame3 {padding:10px;background:#fff;box-shadow: 3px 5px 8px rgba(164,166,173,0.70);-moz-box-shadow: 3px 5px 8px rgba(164,166,173,0.70);-webkit-box-shadow: 3px 5px 8px rgba(164,166,173,0.70)}
/* frame 3 is lighter */

.doubleFramed {position: relative; border: 7px solid #fff; box-shadow: 0px 0px 4px rgba(000,000,000,0.5); -webkit-box-shadow: 0px 0px 4px rgba(000,000,000,0.5); -moz-box-shadow: 0px 0px 4px rgba(000,000,000,0.3); margin: 7px 7px 15px 7px;}
.doubleFramed {border: 7px solid #fff; box-shadow: 0px 0px 4px rgba(000,000,000,0.5); -webkit-box-shadow: 0px 0px 5px rgba(000,000,000,0.5); -moz-box-shadow: 0px 0px 4px rgba(000,000,000,0.3); margin: 7px 7px 15px 7px;}

span.magnifier {position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; background: #494949 url('images/magnifier.png') center center no-repeat;}
span.play {position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; background: #494949 url('images/play.png') center center no-repeat;}
.thumb span.play {position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; background: #494949 url('images/playSmall.png') center center no-repeat;}
span.paperClip {position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; background: #494949 url('images/paperClip.png') center center no-repeat;}
 
/* ---------1.1.5  DIVIDERS ----------------------------------*/
.hor { border-bottom: 1px solid #e0e0e0; margin: 17px auto; clear: both; overflow: hidden; position: relative; height: 1px; line-height: 1px; zoom: 1;}
.hor2 { border-bottom: 1px solid #fff; border-top: 1px solid #cdcecc; margin: 17px auto; clear: both; overflow: hidden; height: 0px; line-height: 0px; zoom: 1;}
.horDashed { border-bottom: 1px dashed #ccc; margin: 17px auto; clear: both; overflow: hidden; position: relative; height: 1px; line-height: 1px; zoom: 1;}
.horShadow {margin: 7px auto; overflow: hidden; position: relative; height: 35px; line-height: 3px; zoom: 1; background: url('../images/horShadow.png') center bottom scroll repeat-x;}
.horDouble {margin: 17px auto; clear: both; overflow: hidden; position: relative; height: 3px; line-height: 3px; zoom: 1; background: url('images/horDouble.png') center bottom scroll repeat-x;}
.starHor {overflow: hidden; position: relative; height: 67px; line-height: 67px; margin: 0; clear: both; background: url('images/starHor.png') center center no-repeat; zoom: 1;}

/* --------- TEXT STYLING ----------------------------------*/
/* responsive - relative to 12px default */

p {margin-bottom: 15px;}
@media screen and (max-width: 400px){
	p {font-size:.967em;}
	#footer p {font-size:.8em; line-height:1.25em;} 
}

h1, h2, h3, h4, h5, h6 {color: #434b51; font-weight: normal; line-height: 40px;}
h4, h5, h6 {line-height: 32px;}
h2 a, h3, h3 a, h4, h4 a, h5, h5 a, h6, h6 a {color: #fff;}

h1 {font-size:2em;}
h2 { font-size: 1.6666666em; text-transform: uppercase; }
h3 { font-size: 1.58em; margin-bottom: 15px; margin-top: 7px; color:#fff; font-family:Georgia, Times New Roman, Times, serif; border-bottom:1px solid #D6BD93;}
h4 {font-size: 1.3333333em; margin: 5px 0; }
h5 {font-size: 1.1666666em; margin: 5px 0;}


/* for titles with a colored background bar - just add this as a class to your h1-6 */
.titlebar {background-color:#474747; color:#fff; padding:1px 0px 1px 20px; margin-bottom:15px; }
.emphasis {font-weight:bold; font-size:1.3em; font-family:Georgia,Times New Roman,Times,serif;}

/* ---------1.3  LINKS AND LISTS ----------------------------------*/

a { color: #d50f38;	text-decoration: none; position: relative;}
a:hover { color: #b50d30; }
a:active, img { outline: none; border: none; }
.orangeGrad a:hover, .orangeGrad a:visited {color:#f1f1f1;font-weight:bold; }

ul {list-style:disc;}
li {line-height:1.2em; padding:0px 0px 5px 3px;margin-left:10px;font-size:14px;}*/

/* ---------1.4  FORMS ----------------------------------*/

/* Contact Form ------------------- */

#contact-form, #survey-form {width:98%px;overflow:hidden; background-color:none;padding:.1em;}
#contact-form fieldset, #survey-form fieldset {border:none;/*float:left; */}
#contact-form .field, #survey-form .field {clear:both;/*height:auto !important;*/height:2em;margin-bottom:.1em;}
#contact-form label{float:left;width:100px;font-weight:bold; font-size:12px;} 
#contact-form input {width:60%;padding:2px 0 2px 3px;border:1px solid #d2d2d2;float:left}
#contact-form textarea, #survey-form textarea {/*width:45%px; */height:10em;padding:2px 0 2px 3px;border:1px solid #d2d2d2;margin-bottom:1.5%;overflow:auto;float:left}
#contact-form .link1, #survey-form .link1 {float:left; width:60px;}

#survey-form label {float:left;width:25%;font-weight:bold; font-size:12px;}
#survey-form input[type="text"] {padding:2px 0 2px 3px;border:1px solid #d2d2d2;float:left;}
#survey-form input[type="date"] {padding:4px 0 4px 3px;border:1px solid #d2d2d2;float:left;}

.link1 {display:block;float:right;background:url(images/link1-bgd.gif) left top repeat-x;color:#fff;text-decoration:none; padding:6px;margin-right:10px;}
.link1:hover {color:#000}
.link1 span {display:block;background:url(images/link1-border.gif) no-repeat left top}
.link1 span span {background:url(images/link1-border.gif) no-repeat right top;padding:3px 15px 3px 15px}


/* ---------------------------------*/
/* 4.0 PAGES	  					*/
/* Page specific styling			*/
/* ---------------------------------*/

/* menu page styling */

.menutable {width:97%; margin-top:3em;border:1px solid #F6892A; border-collapse:collapse;  }
.menutable td {border:1px solid #F6892A;padding:.1em .8em; }
.menutable span {font-size:.8em;}

.menu-img {width:27%;margin:.5%}
@media screen and (max-width:1024px)
{
#wrapper {width:93.75%}
}

@media screen and (max-width: 400px){
.menutable {width:50%;}
}

.specials, .coupons {width:100%; border:2px dashed #050505; border-collapse:collapse;text-align:center;margin-bottom:20px;}
.coupons {min-height:250px;} /* to make height consistent */
.specials p {padding:10px;}
.specials img {margin:0 auto;}
.specials .heading {background:#000; color:#fff; font-size:1.5em; text-transform:uppercase;vertical-align:top;padding:5px;}
.specials td { padding:1.5em; vertical-align:top;}
.specials span.title, .specials span.price {font-weight:bold; font-size:1.3em; font-family:Georgia,Times New Roman,Times,serif;}
.specials span.body {color:#CC3300; font-weight:bold;}