/*
	Theme Name: Derby Station with Mobile CSS
	Theme URI: http://derbystation.com
	Author: Mindutopia
	Author URI: http://mindutopia.com
	Version: 2.0
	Description: Wordpress Theme for Derby Station
	Tags:
*/

*{ margin:0px; padding:0px; line-height: 1.4em; }

body{ font-size:81.25%; font-family: Georgia; background: url(images/bg.jpg); color:#000; }

/* links */
a, a:visited{ color:#350A15; text-decoration: none; }
a:hover{ color:#434734; /* color:#990909; */ }
a img{ border:none !important; }

/* Forms */
input, textarea{ outline:none; border:1px solid #999; display: block; }
input:focus, textarea:focus { outline: none; }
select{}

/* Headings */
h1,h2,h3,h4,h5,h6,p{ margin: 5px 0px 12px;}
h1{}
h2{}
h3{}
h4{}
h5{}
h6{}

/* Lists */
ul, ol{}
li{ margin-left: 15px; }

hr{ background:#ccc; height:1px; border: none; }

/* Divs */
.wrapper{}
#header{ display: block; width:960px; margin:0px auto; padding:5px 0; position: relative; height: 120px; z-index: 31; }
#main{ display: block;  width:960px; margin:0px auto; padding:5px; }
#footer{ display: block; width:960px; margin:0px auto 20px; padding:5px; position: relative; height: 60px; color:#666;}

.clear{ display: block; clear: both; width: 100%; height:1px; margin-top:-1px; }

/* Two Columns */
#left-main, #right-main{ display: inline-block; width:600px; vertical-align: top; padding:5px; border: 1px solid #f00; }
#left-side, #right-side{ display: inline-block; width:300px; vertical-align: top; padding:5px; border: 1px solid #00f; }
#left-main, #left-side{ margin-right: 10px; }

/* Navigation */

#header ul { list-style: none; display:block; margin: 0px auto; white-space: nowrap; position: relative; left:-10px; z-index: 30;}
#header ul li{ display: inline-block; vertical-align: top; margin: 15px 0px; text-align: center; white-space: nowrap; position: absolute; top:40px; }
#header ul li a{ font-size: 1.076em; padding:20px; text-align: center; color:#000; }
#header ul li a:hover{ color:#434734; }

#header ul li#logo{ left:404px; top:10px;  }
#header ul li#about-us{ left:0px; padding-left:2px; }
#header ul li#eat{ left:118px; }
#header ul li#drink{ left:200px; }
#header ul li#calendar{ left:305px; }
#header ul li#gallery{ left:575px; }
#header ul li#res{ left:738px; }
#header ul li#contact{ left:863px; }
#header ul li#blog { left:672px; }

/* Footer */
#footer p{ font-size: 0.83em; }
p#copyright{ display: inline-block; position: absolute; top:10px; left:10px; }
p#credit{ display: inline-block; position: absolute; top:2px; right:10px; }
a#mindutopia{ display:inline-block; vertical-align:middle; background: url(images/mindutopia.gif) no-repeat; height:17px; width:32px; font-size:0.1em; text-indent: -9999px; margin: 0px 5px 5px; }
a#logans, a#graydons{ display:inline-block; vertical-align:middle; background: url(images/other-logos.png) no-repeat; height:36px; width:36px; font-size:0.1em; text-indent: -9999px; margin-left: 5px; margin-top: 0px;}
a#logans{ background-position: -47px 0; width:46px; }

/* Prefooter */
#prefooter{ display:block; padding:10px; width:960px; margin: 10px auto; }
.third{ position: relative; background: #fff; display: inline-block; width:270px; height:141px; vertical-align: top; margin:0 10px 0 0;   padding:0 20px;}

.third.last{ margin-right: -1px; }
.third a img{ position: absolute; top:0px; left:0px; }
.third#come-visit{ background:url(images/come-visit.jpg) no-repeat; color:#666; }
.third#come-visit p{ font-size: 0.83em; }
.third#come-visit h2{ text-transform: uppercase; }

.third#mailing-list{ background:url(images/mailing-list.gif) no-repeat; color:#666; }
.third#mailing-list input#mailing-list-input{ width:228px; height: 30px; font-size: 1.125em; color:#666; border: none; background:transparent; position: absolute; top:92px; left:25px; font-family: Georgia; }
.third#mailing-list input#mailing-list-submit{ width:30px; height:30px; text-indent: -9999px; font-size: 0.1em; position: absolute; top:92px; left:255px; background: #333; cursor: pointer; background:transparent; border: none;  }

/* Home */
/* #slider */
#slider-wrap{ background:#cdc; height: 450px; position: relative; }
#top-frame, #bottom-frame{ display:block; position: absolute; background: url(images/frame2.png) no-repeat; height: 54px; width: 960px; z-index: 20; }
#top-frame{ top:0px; left:0px; background-position: 0px -1px; }
#bottom-frame{ bottom:0px; left:0px; background-position: 0px -54px; }
#caption{ width: 990px; height:65px; background: #571C20; z-index: 21; color: #fff; position: absolute; bottom:40px; left:-15px;}
#caption h1{ font-size: 41px; padding: 3px 16px; position: relative; top:-10px; text-transform: uppercase; }
#slider{ background:#ddc; height: 450px; position: absolute; top:0; left: 0; z-index: 10; }

/* Inside */
#content{ position: relative; background: #fff; padding-bottom: 20px;}
#content-wrap{ padding:20px; background: #fff; padding-bottom: 50px; }
#content-wrap .col-1{ display: inline-block; width:430px; margin-right: 25px; vertical-align: top; }
#content-wrap .col-2{ display: inline-block; width:430px; vertical-align: top; }
#photo-area{ height: 400px; background: #ddd;  position: relative; }
#gradient{ position: absolute; bottom: 0px; left:0px; background: url(images/gradient.png); width: 960px; height:280px; z-index: 10; }
#syn{width:394px; height:197px; padding: 10px; background:#571C20; color:#fff; position: absolute; left:-15px; top:100px; z-index: 11; }
#syn h1{ font-size: 3.23em; text-transform: uppercase; }
#syn p{ font-style: italic; }
#syn a{ color:#fff; opacity:0.7; }

/* Blog */
.post-box{ padding:10px 0; border-bottom: 1px dotted #666; }
.post-box.last{ border-bottom: none; }
.post-meta{ font-size:0.91em; font-style: italic; }

/* WPCF 7 */
div.wpcf7{ display: block; width:400px;}
div.wpcf7 label{ display: inline-block; width:130px; vertical-align: top; margin-right: 10px; position: relative; top:2px; }
span.wpcf7-form-control-wrap{ display: inline-block; vertical-align: top; width:190px; background:transparent;}
input.wpcf7-text{ } 
textarea.wpcf7-textarea{ } 
input.wpcf7-text,
textarea.wpcf7-textarea{  border:none; padding:5px;  background: #DCDCD5; width:260px; color:#666; margin-bottom: 12px; font-family: Georgia; font-size: 1.0em;}

textarea{  border:none; padding:5px 0px 5px 0px;  background: #DCDCD5; color:#666; margin-bottom: 12px; font-family: Georgia; font-size: 1.0em;  width:100%; }

input.wpcf7-submit, input#submit{ background:#666; color:#fff; font-size: 1.125em; padding:5px 10px; border: none; cursor: pointer; }

.slickr-flickr-gallery{left:5px; position:relative; width:935px;}

.mm-menu-view-wrapper h2{ font-size:1.85em; }
.mm-header{ padding-top:30px !important; margin-left:-10px; }
.mm-menu-column-wrap{ padding-left:5px !important; }
.mm-menu-item-header{ padding-top:12px; padding-left:10px; }
.mm-menu-item-wrap div{ padding:0px !important; }

.ie7 .third, .ie7. col-1, .ie7 .col-2{ display: inline; }
.clear{clear: both; display: block; position: static;}
/*
 * jQuery Nivo Slider v3.2
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
	width:100%;
	height:auto;
	overflow: hidden;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
	max-width: none;
	height: auto;
}
.nivo-main-image {
	display: block !important;
	position: relative !important; 
	width: 100% !important;
}

/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
	background:white; 
	filter:alpha(opacity=0); 
	opacity:0;
}
/* The slices and boxes in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }

/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	width:100%;
	z-index:8;
	padding: 5px 10px;
	opacity: 0.8;
	overflow: hidden;
	display: none;
	-moz-opacity: 0.8;
	filter:alpha(opacity=8);
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:9;
	cursor:pointer;
	height:56px;
	width: 28px;
	background: url(images/slide-arrows.png) no-repeat transparent; 
	font-size: 0.1em;
	text-indent: -9999px;
}
a.nivo-prevNav {
	left:10px;
}
a.nivo-nextNav {
	right:10px;
	background-position: -30px 0px; 
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
	text-align:center;
	padding: 15px 0;
}
.nivo-controlNav a {
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}
.buttons_wrap,
.home .m-content,
#header .main-menu #menu-toggle,
.mobile_logo{display: none;}

.gform_wrapper textarea,
.gform_wrapper input[type=email], .gform_wrapper  input[type=number], .gform_wrapper  input[type=password], .gform_wrapper  input[type=tel], .gform_wrapper  input[type=text], .gform_wrapper  input[type=url]{
	border:none; padding:5px 0px 5px 0px;  background: #DCDCD5; color:#666; margin-bottom: 12px; font-family: Georgia; font-size: 1.0em;  width:100%;
	width: 100% !important;
}

.gform_wrapper select {
    display: block;
    width: 100%;
    height: 28px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #666;
    background-color: #DCDCD5;
    background-image: none;
    border: 1px solid #DCDCD5;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit] {
	float: right;
	background:#571C20; color:#fff; font-size: 1.125em; padding:5px 10px; border: none; cursor: pointer; font-family: Georgia serif;
}

@media screen and (max-device-width: 599px){
	/* header */
	body{background: #440B19; color: white;}
	#header{width: 98%; height: auto;}
	
	.mobile_logo{display: block; padding: 12px 0px 12px 0px}
	.mobile_logo img{display: block; width: 39.113885%; height: auto;}
	#header ul.navigation{left: auto; display: none; border-bottom: #28060E solid 1px;}
	#header ul.navigation.open{display: block;}
	#header ul.navigation li{position: relative; display: block; margin: 0px auto; border-top: #28060E solid 1px; }
	#header ul.navigation li a{color: white; padding: 6px 0px;font-size: 17px; }
	
	#header ul.navigation li#logo{display: none;}
	
	#header ul li#logo,
	#header ul li#about-us,
	#header ul li#eat,
	#header ul li#drink,
	#header ul li#calendar,
	#header ul li#gallery,
	#header ul li#res,
	#header ul li#contact,
	#header ul li#blog { left:auto; top:auto; }
	#header .main-menu{position: static;}
	#header .main-menu #menu-toggle{color: white; display: block; position: absolute; width: 24.84375%; top:4px; right: 0px; font-size: 20px; padding: 6px 8px; 
		background: url(images/mobile/button_updated.png) center center #28060E no-repeat;
		background-size: 103px 34px;
		/* width: 12.94851794%; */
		-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
	}
	#header .main-menu .buttons_wrap{display: block; position: absolute; top: 7px; right: 29.84375%; }
	#header .main-menu .buttons{ width: 35px; height: 32px; display:inline-block; 
		background: url(images/mobile/button_spry.png) no-repeat;
		background-size: 103px 31px;
		margin-left: 3px;
	}
	#header .main-menu .buttons.phone{background-position: -69px 0px;}
	#header .main-menu .buttons.map{background-position: 0px 0px;}
	#header ul li#calendar{display: none!important;}
	/* 	main */
	#main{ display: block; width: 100%; padding: 0; /* width: 98.3333333334%; padding:0.8333333333%; */ position: relative; }
	/*slider frame*/
	#bottom-frame,
	#top-frame{display: none;}
	#caption{display: none;}
	#slider-wrap{ height:auto; position: relative; display: block;}
	#slider{height: auto; position: relative;}
	
	.home .m-content{display: block; position: relative; margin-top: 10px;  width: 100%; padding: 0 0 0 0;}
	.home .m-content p{font-size: 15px;}
	.home .m-content h1{ margin: 0px auto; display: block; line-height: 1em;  width: 85%;}
	.home .m-content > div{padding: 10px;}
	.m-content ul.list{list-style: none; width: 95%; display: block; padding-bottom: 25px;}
	.m-content ul.list li{display: block;margin-top: 5px;}
	.m-content ul.list li a{background:#F6F5EF; color: #450A18; width: 98%; display: block; padding: 6px 1%; text-align: center; }
	
	/*page*/
	#photo-area{width: 100%; height: auto; display: block;}
	#photo-area img{width: 100%; height: auto; display: block;}
	#gradient,
	#syn{display: none;}
	
	#content{background: transparent;}
	#content a{color: white; text-decoration: underline;}
	#content-wrap{background: transparent;}
	#content-wrap .col-2,
	#content-wrap .col-1{width: auto; display: block;}
	#content-wrap{color: white;}
	
	.slickr-flickr-gallery{width: 100%; display: block;}
	.slickr-flickr-gallery ul li{display: inline-block;}
	
	
	/*post*/
	.post-box{width: 95%;margin: 0px auto;}
	.post-box h2 a{color: white;}
	
	/*contact form 7*/
	div.wpcf7{width: 100%;}
	
	.wpcf7 input.wpcf7-text, 
	.wpcf7 textarea.wpcf7-textarea{width: 100%;}
	
	/*Footer*/
	#prefooter{display: none;}
	hr{display: none;}
		#footer{display: block; width: 97%; color: white;}
		#footer p{text-align: center; position: static; margin: 0px auto; display: block; }
	iframe{width: 100%; height: auto; display: block; margin: 0px auto; }	
	
}