/*
Theme Name: custom theme by Red Barn Computers
Author: Alex Meyerson
Author URI: http://rbc.redbarncomputers.com/web/web-development.html
*/

@import url("css/reset.css");
@import url("css/font-awesome.css");

html,body {margin:0; padding:0; height:100%; font-size: 16px;  
			font-family: 'Open Sans', sans-serif; font-family: 'Old Standard TT', serif;
			background: #958878 url(img/bkg-brick.jpg) center center no-repeat; background-size: cover; background-attachment: fixed;
			color: #555;
}

a{color: #930505 ;}
a:visited{color: #930505 ;}
a:hover{color: #000 ;}
a.graphic {text-indent: -9999px; display: block;}

em{ font-style: italic; }

h1,h2,h3,h4,h5,h6{font-weight: 600; margin: 15px 0;}

.hide { display: none; }

p{line-height: 1.25em; font-size: 1em; margin: 10px 0 0 0; padding: 0;}

strong{ font-weight: 600; }

ul li, ol li{margin: 15px 0 0 30px;}
ul.horizontal li, div.horizontal ul li { margin: 15px 8px 0;}

a img {border: none;}
p img {margin-bottom: 0.5em;}
/*
Resize images to fit the main content area.
- Applies only to images uploaded via WordPress by targeting size-* classes.
- Other images will be left alone. Use "size-auto" class to apply to other images.
*/
img.size-auto, img.size-full, img.size-large, img.size-medium, .attachment img, .widget-area img, .wp-caption {
	max-width: 100%; /* When images are too wide for containing element, force them to fit. */
	height: auto; /* Override height to match resized width for correct aspect ratio. */
}

td {vertical-align:top;}

/**LAYOUT**/

#container {	min-height:100%; position:relative; width: 1350px;
			background: #eee; margin: 0 auto; -webkit-box-shadow: 0 0 5px 5px #111; box-shadow: 0 0 25px 5px #111;}
#header {background:#930505; height: 65px; width: 1240px; position: absolute; top: 15px; right: -40px; z-index: 500;
			box-shadow: 3px 3px 4px rgba(0,0,0,0.3); -webkit-box-shadow: 3px 3px 4px rgba(0,0,0,0.3); -moz-box-shadow: 3px 3px 4px rgba(0,0,0,0.3);}
#body {padding:0px; padding-bottom:130px; /*Height of the footer */}
#footer {position:absolute; bottom:0; width:100%; padding: 15px 0 0; height:105px; /* Height of the footer */	
			background:#ccc; border-top: 1px solid #fff; color: #666; font-weight: 600;}

/****** Header  ****/
#header h1{margin: 0;}
#header h1 a{float: left; display: block; height: 65px; width: 220px; background: url(img/logo.png) 0 0 no-repeat;}

.tagline {position: absolute; right: 10px; top: 85px; color: #fff; z-index: 9999; font-size: 1.3em;}

/****** Footer  ****/
#hours div {text-indent: 1em;  line-height: 1em; font-size: 14px; float: left;}
#hours p {margin: 0;}
#hours > div {}
#hours {width: 30%;}
.address {width: 45%;}
.address > div {display: inline-block;}
#phonenumber {font-size: 2.5em; margin-right: .5em;}
#cards {width: 23%; text-align:center;}


/****** Menu  ****/
#access {margin-right: 40px;}
#access a {font-size: 18px;}
#access ul {list-style: none; margin: 0; padding: 0;}
#access li {float: left; position: relative; margin: 0;}
#access li.current_page_item, #access li.current_page_ancestor {background: url(img/bkg-menu-active.png) 0 0 repeat-x;}

#header .menu-main-container::before {content: ""; position: absolute; z-index: 550; left: 1200px; right: -45px; top: 65px;  bottom: -40px;
								background: url(img/menu-curl.png) 0 0 no-repeat;}
#menu-main {float: right;}
#menu-main > li {float: left; }
#menu-main a {display: block; line-height: 65px; padding: 0 1em;text-decoration: none; color: #FFF;}
#menu-main > li:last-child a {padding-right: 0;}
#menu-main a:hover {color: #EAC117;} 
#menu-main ul {box-shadow: 0 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
	display: none; float: left;	position: absolute;	top: 65px; left: 0; z-index: 550; margin: 0; padding: 0;}
#menu-main ul a {background: #eee; line-height: 1em;	padding: .5em .5em .5em 1em; width: 10em; height: auto; color: #555;}
#menu-main ul a:hover {background: #fff;}
#access ul li:hover > ul {display: block;}

/*** banner ***/
#banner-container {background: #000; width: 100%; height: 460px;}
#banner {width: 1110px; height: 460px; margin: 0; margin-left: 200px;}
#banner ul, #banner li {margin: 0; padding: 0;}

#menu-carousel {padding: 0;}

/****** Content  ****/
.home #container {background: url(img/bkg-noise.jpg) 0 0 repeat;}
.page #primary {margin-top: 2em;}
#primary{ padding: 0 1%;}

#crumbs {padding: 10px 0; }
#crumbs .current {font-size: 14px; color: #555; }
#crumbs a{font-size: 14px; font-weight: 400; color: #777; text-decoration: none; border: none;}
#crumbs a:hover {}

/*** banner-interior ***/
#banner-interior {width: 100%; height: 250px; background:  #000 url(img/bkg-interior.jpg) 0 0 no-repeat;}
.page-title {color: #fff; position: absolute; top: 150px; left: 150px; text-transform: uppercase; font-size: 3em; font-weight: 400;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.8);}

#stripe {height: 85px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5); box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, .5); padding: 5px 0;
background-image: linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
background-image: -o-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
background-image: -moz-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient(bottom, rgb(238,238,238) 0%, rgb(255,255,255) 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, rgb(238,238,238)),
	color-stop(1, rgb(255,255,255))
);}
#stripe h2, #stripe h3 {text-align: center; margin: 10px 0;}
#stripe h2 {font-style: italic;}
#stripe h3 {color: #999;}

.columns {overflow: hidden; }
.columns > div {margin: 1% 2%; float: left; }
.columns.two > div {width: 46%;}
.columns.three > div {width: 29.3%;}
.columns.four > div {width: 20.5%;}

.columns .sixty {width: 57%;  margin: 0; margin-right: 3%; margin-left: 0;}
.columns .forty {width: 37%;  margin: 0; margin-left: 3%; margin-right: 0; }

.columns .column-image {background-position: center center; background-size: contain; background-repeat: no-repeat;}

.columns.stacked > div {}
.columns.stacked .row-left {clear: both; width: 49%; margin: 0; margin-right: 1%; margin-left: 0;}
.columns.stacked .row-right {width: 49%;  margin: 0; margin-left: 1%; margin-right: 0;}

.split {}
.main {width: 60%;}
.aside {position:absolute; top: 180px; right: 0; margin: 45px 7%; padding: 1% 2%; width: 22%;}

#content .back-to-top {font-size: 12px; border-bottom: none;}

/** Nav **/
#primary nav {display: block;}
#primary nav .nav-previous {float: left;	width: 50%;}
#primary nav .nav-next {float: right;	text-align: right; width: 50%;}
#primary #nav-above {display: none; padding: 0 0 .5em; border-bottom: 4px #d4d4d4 double;}
.paged #primary #nav-above, .single #primary #nav-above {display: block;}
#nav-below {	padding: .5em 0 0; border-top: 4px #d4d4d4 double;}

/** Pages  **/
.post{margin: 15px 0 30px 0;}

/** Posts  **/

#content .post{border-top: 4px #d4d4d4 double;}
#posts div:first-child {border-top: none; padding-top: 0;}
#content .post, .paged #posts div.post:first-child, .single #posts div.post:first-child {padding-top: 15px; margin-top: 0;}
h2.entry-title {margin: 0; padding: 0; font-weight: bold; text-transform: uppercase;}

.byline{font-style: italic; font-size: 0.9em; color: #999;}
.byline a{font-style: normal;}
span.date{margin: 0; padding: 0; font-weight: bold; text-transform: uppercase;}

.tribe-events-event-list-meta td {background: transparent !important;}

.menuslider li {margin: 0; padding: 0;}
.menuslider {margin: 0; padding: 0;}

/** Widgets **/
#secondary aside {clear: both;}

/**GENERAL CLASSES **/

.left{float: left;}
.right{float: right;}

.left-col{width: 62%;float: left;}
.right-col{float: right;width: 32%;margin-left: 2%;}

ul.horizontal li{display: inline; list-style-type: none;}

/* self-clear floats */
.group:after, #primary nav:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}


/*WordPress Image Classes*/
img.centered {display: block; margin-left: auto;	margin-right: auto;}
.alignright {float: right; margin-left: 10px; margin-bottom: 10px;}
.alignleft {float: left; margin-right: 10px; margin-bottom: 10px;}
.aligncenter,
div.aligncenter {display: block;	margin-left: auto; margin-right: auto;}

.wp-caption {border: 1px solid #ddd;	text-align: center;	background-color: #d4d4d4; padding-top: 4px; margin: 10px;}
.wp-caption img {margin: 0; padding: 0; border: 0 none;}
.wp-caption p.wp-caption-text {font-size: 0.85em; line-height: 1.214em; padding: 0 4px 5px; margin: 0;}

/* icons */
[class^="icon-"], [class*=" icon-"]  {color: #999;}
[class^="icon-"].right, [class*=" icon-"].right  { width: auto; margin-right: 15px; color: #999;}
#crumbs [class^="icon-"],#crumbs [class*=" icon-"]  {color: inherit; margin: 0 4px;}
ul.icon {margin: 0; padding: 0 5px; list-style-type: none;}
ul.icon li {margin: 8px; margin-left: 0;}

/*Forms*/
.searchbar{float: left;}
.searchbar form {margin-left: 0;}
.searchbar input{display: inline; width: 160px;}
.searchbar input[type="text"]{height: 19px; margin: 10px 0;}
.searchbar input[type="submit"]{background:  #333 url('http://number5restaurant.com/wp-2013/wp-content/themes/img/search.png') center no-repeat; 
							text-indent: -99999px; width: 33px; padding: 1px 0;margin-left: -10px;}
							
form{text-align: left; max-width: 500px; margin-left: 10px;}
form div label{padding-bottom: 3px;}
form div input, form div textarea{font-size: 1em;}
form div textarea{height: 170px;}
form div input[type=submit]{width: 200px; margin: 0 auto; background: #999999; color: #EAEAEA; font-size: 1.6em;}
form div input[required], form div textarea[required]{color: MidnightBlue ;}

#contact-left {width: 36%; padding: 0 2%; float: left;}
#contact-right {width: 56%; padding: 0 2%; float: left;}

.mobile {display: none;}

/* Media queries */
@media screen and (max-width: 1450px) {

#container {width: 1140px;}
#header {width: 1120px;}
#header .menu-main-container::before {left: 1080px;}
#banner-container {height: 423px;}
#banner {width: 1020px; margin-left: 100px; height: 423px;}

#menu-main a {padding: 0 .75em;}

.wp-image-96 {width: 680px; height: auto;}

#cards img {width: 90%; max-width: 300px; height: auto; }
#cards {width: 33%;}
#hours {width: 34%;}
#hours div {text-indent: .5em;}
.address {width: 33%; text-align: center;}
#phonenumber {font-size: 2em;}
}


@media screen and (max-width: 1200px) {
/*** DESKTOP ***/
#container {width: 100%;}
#banner-container {height: auto;}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {display: none; !important;}
#banner {width: 100%; margin-left: 0; height: auto;}
#header {width: 100%; left: 0; top: 0;}
#header .menu-main-container::before {display: none;}
#access {margin-right: 1em;}
#access a {font-size: 16px;}
#menu-main a {padding: 0 .75em;}
#header h1 a {width: 200px;}

#hours td {font-size: 13px;}
}
 
@media screen and (max-width: 960px) {
/*** tablet ***/
/***fullscreen elements come off ***/
.fullscreen {display: none !important;}
.mobile {display: block;}

#content img {max-width: 40%; height: auto;}

#menu-carousel {width: 500px; padding: 0 10px; margin: 0 auto;}

/** switch to mobile menu **/
#header {position: static;}
#banner-interior {height: 0; padding-bottom: 35%;}
#access {height: auto; margin-right: 0; }
#access .menu-link {float: right;display: block; line-height: 65px; padding: 0 .75em; text-decoration: none; color: #FFF;}
#menu-main {overflow: hidden; max-height: 0; clear: both; width: 100%; position: relative; z-index: 100; border-bottom: 3px solid #000;}
#menu-main.active {max-height: 55em; height: auto;}
#menu-main a {color: #555; line-height: 2em; padding: 0 .75em; width: 100%;}
#menu-main li{display: block; float: none; width: 100%; padding: 0 !important; background: #e9e6dc !important; border-bottom: 1px solid #ccc;}
#menu-main > li:hover {background: #fff !important;}
#menu-main > li:first-child a {padding-left: .75em;}

#menu-main ul {display: block; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; position: static; width: 100%; float: none;}
#menu-main ul {background: #e9e6dc; border-bottom: 1px solid #ccc; border-bottom: none;}
#menu-main ul a {width: 100%;}
	
#menu-main .current-menu-item {background: #fff;}
#stripe {height: auto;}
#stripe h2 {font-size: 1em; margin: .2em;}
#stripe h3 {font-size: .8em;}

#contact-left, #contact-right {width: 100%; padding: 0 0; float: left;}


#body {padding-bottom: 20px;}
#footer {height: auto; position: static;}
.address {width: 100%; background: #fff; text-align: center;}
#phonenumber {font-size: 1.2em;}
#footer > div {clear: both;  width: 310px; margin: 0 auto; float: none; padding: .5em 0 ;}
#hours-dinningroom {margin-bottom: .5em;}
#hours td {font-size: 12px;}

}

@media screen and (max-width: 710px) {
html,body {background: #fff;}
#content img {width: 80%; max-width: 80%; float: none; margin: 0 auto; height: auto; display: block;}
#primary{ padding: 0 2%;}
#googlemap {width: 100%; height: 480px;}

#menu-carousel {width: 98%; padding: 0 0; margin: 0 1%;}

}