/*********************************************************************************************

Theme Name: Collins on Pine
Theme URI: 
Description: Designed by DEI Creative
Version: 1.0.0
Author: DEI Creative
Author URI: http://www.deicreative.com/

**********************************************************************************************

Designed and Built by DEI Creative - deicreative.com

CSS, XHTML and Design Files are all Copyright 2013 DEI Creative

**********************************************************************************************


/********************************************************************************************* 

x. CSS Reset 

*********************************************************************************************/
* {
	margin: 0;
	min-height: 0;
	outline: none;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0px;
}

/********************************************************************************************* 

x. Typekit

*********************************************************************************************/
.wf-loading {        
  	visibility: hidden;
}  

.wf-active {        
	visibility: visible;
}

/*********************************************************************************************

x. Basic Setup (Body, Fonts, etc.) 

*********************************************************************************************/
html, body {
	font: 400 16px "proxima-nova", Arial, Helvetica, sans-serif;
	color: #FFF;
	width: auto; height: auto;
	background: #FFF;
}

a {
	color: #FFF;
	font-weight: 500;
}

a:hover {
  	color: #EEE;
}

a img {
	border: none;
}

.clearfloat {
	clear: both;
	height: 0;
	font-size: 1px;
	line-height: 0;
}

.learn-more {
	text-indent: -999px;
	width: 108px; height: 65px;
	background: url(img/learn-more.png);
	margin: 65px auto;
	display: block;
	position: relative;
	z-index: 998;
	overflow: hidden;
}

.section {
	width: 100%; height: 650px;	
	position: relative;
	padding: 150px 0 0 0;
	overflow: hidden;
}

.section .content {
	text-align: center;
	width: 100%; height: auto;
	background: #FFF;
	padding: 35px 0;
	display: none;
	position: absolute;
	bottom: 0; left: 0;
}

.section .content table {
	width: 700px; height: auto;
	margin: 0 auto;
}

.section .content table td.padding-right {
	width: 325px; height: auto;
	text-align: right;
	padding: 0 25px 0 0;
	vertical-align: top;
}

.section .content table td.padding-left {
	width: 325px; height: auto;
	text-align: left;
	padding: 0 0 0 25px;
	vertical-align: top;
}

.section .content .back {
	text-indent: -999px;
	width: 64px; height: 64px;
	background: url(img/back.png);
	margin: -32px 0 0 0;
	display: block;	
	position: absolute;
	top: 50%; left: 50px;
	overflow: hidden;
}

.section .content h1 {
	font: 400 38px "franklin-gothic-ext-comp-urw" , Arial, Helvetica, sans-serif;
	color: #4d5048;
	text-transform: uppercase;
	text-align: center;
	width: 750px; height: auto;
	background: url(img/grey.jpg) center repeat-x;
	margin: 0 auto 15px auto;
}

.section .content h1 span {
	background: #FFF;
	padding: 0 20px;
}

.section .content .line {
	width: 750px; height: 1px;
	background: url(img/grey.jpg);
	margin: 10px auto 0 auto;
}

.section .content .min-max {
	width: 37px; height: 27px;
	background: url(img/min-max.png) top left #FFF;
	position: absolute;
	top: -27px; right: 50px;
}

.section .content .min-max.down {
	background: url(img/min-max.png) bottom left #FFF;
}

.section .content p {
	font-size: 14px;
	color: #4f534b;
	line-height: 18px;
	padding: 0 0 15px 0;
}

.section .content p .button {
	margin: 0 5px 5px 5px;
}

.section .landing {
	text-align: center;
	width: 570px;
	height: 72px;
	position: relative;
	z-index: 595;
	margin-bottom: 0;
	margin-left: auto;
	margin-right: 24px;
	margin-top: 12px;
}

.section .landing p {
	line-height: 24px;
}

.section .header {
	margin: 0 auto 30px auto;
}

/*********************************************************************************************

x. Navigation

*********************************************************************************************/
#nav {
	width: 100%; height: 65px;
	background: #FFF;
	position: fixed;
	top: 65px;
	z-index: 999;
	display: none;
}

#nav a {
	width: auto; height: 65px;
	text-indent: -999px;
	display: block;	
	position: relative;
	z-index: 999;
	overflow: hidden;
}

#nav a.live-btn {
	width: 47px;
	background: url(img/sprite-navigation.png) 0 0;
}

#nav a.eat-btn {
	width: 60px;
	background: url(img/sprite-navigation.png) 0 -65px;
}

#nav a.sleep-btn {
	width: 71px;
	background: url(img/sprite-navigation.png) 0 -130px;
}

#nav a.logo {
	width: 122px; height: 122px;
	background: url(img/logo.png);
	position: relative;
	top: -30px;
}

#nav a.breathe-btn {
	width: 58px;
	background: url(img/sprite-navigation.png) 0 -195px;
}

#nav a.stir-btn {
	width: 47px;
	background: url(img/sprite-navigation.png) 0 -260px;
}

#nav a.reserve-btn {
	width: 78px;
	background: url(img/sprite-navigation.png) 0 -325px;
}

#nav li {
	margin: 0 13px;
	position: relative;
	float: left;
}

#nav li.current {
	width: auto; height: 65px;
	background: url(img/nav-current.png) top no-repeat;
	padding: 8px 0;
	position: relative;
	top: -8px;
}

#nav ul {
	width: 665px; height: 65px;
	margin: 0 auto;
	list-style: none;
}


/*********************************************************************************************

x. Home

*********************************************************************************************/
#home {
	width: 100%; height: 900px;
	background: url(img/home/wood.jpg) 50% 0 no-repeat fixed #3F190C;
	padding: 0;
}

#home .explore { 
	text-indent: -999px;
	width: 119px; height: 101px;
	background: url(img/home/explore.png);
	margin: 0 0 0 -60px;
	display: block;
	position: fixed;
	top: 525px; left: 50%;
	overflow: hidden;	
}

#home #home-nav {
	width: 841px; height: 298px;
	margin: 0 0 0 -420px;
	position: fixed;
	top: 165px; left: 50%;
}

#home #home-nav a {
	width: auto; height: 42px;
	text-indent: -999px;
	margin: 125px 0 0 0;
	display: block;	
	overflow: hidden;
}

#home #home-nav a.live-btn {
	width: 47px;
	background: url(img/home/sprite-navigation.png) 0 0;
}

#home #home-nav a.eat-btn {
	width: 60px;
	background: url(img/home/sprite-navigation.png) 0 -42px;
}

#home #home-nav a.sleep-btn {
	width: 71px;
	background: url(img/home/sprite-navigation.png) 0 -84px;
}

#home #home-nav a.logo {
	width: 298px; height: 298px;
	background: url(img/home/logo.png);
	margin: 0;
}

#home #home-nav a.breathe-btn {
	width: 58px;
	background: url(img/home/sprite-navigation.png) 0 -126px;
}

#home #home-nav a.stir-btn {
	width: 47px;
	background: url(img/home/sprite-navigation.png) 0 -168px;
}

#home #home-nav a.reserve-btn {
	width: 78px;
	background: url(img/home/sprite-navigation.png) 0 -210px;
}

#home #home-nav li {
	margin: 0 13px;
	float: left;
}

#home #home-nav ul {
	width: 841px; height: 42px;
	margin: 0 auto;
	list-style: none;
}

/*********************************************************************************************

x. Live

*********************************************************************************************/
#live {
	background: url(img/live/saloon.jpg) 50% 0 no-repeat fixed #60441D;
}

#live .header {
	width: 156px; height: 84px;
	background: url(img/live/header.png);
}

#live #room {
	width: 100%; height: 900px;
	background: url(img/live/room.jpg) 50% 0 no-repeat fixed #000;
	position: absolute;
	top: 0; left: 100%;
	z-index: 998;
}


/*********************************************************************************************

x. Eat

*********************************************************************************************/
#eat {
	background: url(img/eat/leaves.jpg) 50% 0 no-repeat fixed #799950;
}

#eat .header {
	width: 310px; height: 50px;
	background: url(img/eat/header.png);
}

#eat #kitchen {
	width: 100%; height: 900px;
	background: url(img/eat/kitchen.jpg) 50% 0 no-repeat fixed #000;
	position: absolute;
	top: 0; left: 100%;
	z-index: 998;
}

/*********************************************************************************************

x. Sleep

*********************************************************************************************/
#sleep {
	background: url(img/sleep/chair.jpg) 50% 0 no-repeat fixed #607A91;
}

#sleep .header {
	width: 191px;
	height: 57px;
	background: url(img/sleep/header.png);
}

#sleep #bed {
	width: 100%; height: 900px;
	background: url(img/sleep/bed.jpg) 50% 0 no-repeat fixed #000;
	position: absolute;
	top: 0; left: 100%;
	z-index: 998;
}


#sleep .content table {
	width: 800px; height: auto;
}

#sleep .content table td.padding-right {
	width: 375px; height: auto;
}

#sleep .content table td.padding-left {
	width: 375px; height: auto;
}

/*********************************************************************************************

x. Breathe

*********************************************************************************************/
#breathe {
	background: url(img/breathe/forest.jpg) 50% 0 no-repeat fixed #F1F3E8;
}

#breathe #fog {
	width: 100%; height: 900px;
	background: url(img/breathe/fog.png) 50% 0 no-repeat fixed;
	position: absolute;
	top: 0; left: 0;
	z-index: 997;
}

#breathe .learn-more {
	background: url(img/breathe/learn-more.png);
}

#breathe .header {
	width: 156px; height: 85px;
	background: url(img/breathe/header.png);
}

#breathe p {
	color: #4f534b;
}

#breathe #seattle {
	width: 100%; height: 900px;
	background: url(img/breathe/seattle.jpg) 50% 0 no-repeat fixed #000;
	position: absolute;
	top: 0; left: 100%;
	z-index: 998;
}

/*********************************************************************************************

x. Stir

*********************************************************************************************/
#stir {
	background: url(img/stir/lights-bg.jpg) 50% 0 no-repeat fixed #C38461;
}

#stir .header {
	width: 110px; height: 84px;
	background: url(img/stir/header.png);
}

#stir #lights {
	width: 100%; height: 900px;
	background: url(img/stir/lights-fg.png) 50% 0 no-repeat fixed;
	position: absolute;
	top: 0; left: 0;
	z-index: 997;
}

#stir #martini {
	width: 100%; height: 900px;
	background: url(img/stir/martini.jpg) 50% 0 no-repeat fixed #000;
	position: absolute;
	top: 0; left: 100%;
	z-index: 998;
}

#stir #martini #map {
	width: 515px; height: 285px;
	background: url(img/stir/map.jpg);
	margin: 0 auto 20px auto;
	position: relative;
}

#stir #martini #map .location {
	width: 13px; height: 13px;
	background: url(img/stir/location.png);
	position: absolute;
	top: 0; left: 0;
	z-index: 998;
}

#aToolTip {
	position: absolute;
	width: auto;
	display: none;
	z-index: 50000;
}

#aToolTip .aToolTipContent {
	position:relative;
	margin:0;
	line-height: 16px;
	padding:0;
}

.defaultTheme {
	background: #FFF;
	border: 1px solid #333;
	color: #333;
	font-size: 10px;
	text-transform: uppercase;
	margin:0;
	padding: 1px 6px;	
}

/*********************************************************************************************

x. Reserve

*********************************************************************************************/
#reserve {
	background: url(img/reserve/linen.jpg) 50% 0 no-repeat fixed #232426;
}

#reserve .button {
	margin: 0 5px 5px 5px;
	display: inline-block;
}

#reserve .buttons-row-top {
	padding: 20px 0 0 0;
}

#reserve .buttons-row-bottom {
	padding: 0 0 20px 0;
}

#reserve .divider {
	width: 46px; height: 8px;
	background: url(img/reserve/divider.png);
	margin: 35px auto;
}

#reserve .header {
	width: 247px; height: 60px;
	background: url(img/reserve/header-reserve.png);
}

#reserve #social {
	text-align: center;
	list-style: none;
}

#reserve #social a {
	width: 24px; height: 24px;
	display: block;
}

#reserve #social a#facebook {
	background: url(img/facebook.png);
}

#reserve #social a#twitter {
	background: url(img/twitter.png);
}

#reserve #social li {
	margin: 20px 5px 0 5px;
	display: inline-block;
	zoom:1; *display: inline; /* ie 7 */
}

/*********************************************************************************************

x. Contact

*********************************************************************************************/
#contact-photo {
	/*background: url(img/contact/photo.jpg) center no-repeat #f8fae4;*/
}

form .text {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333;
	line-height: 30px;
	width: 340px; height: 30px;
	border: 1px solid #CCC;
	margin: 0 30px 15px 0;
	padding: 0 10px;
	display: block;
}

form textarea {
	font: 12px Arial, Helvetica, sans-serif;
	color: #333;
	line-height: 16px;
	width: 340px; height: 90px;
	border: 1px solid #CCC;
	margin: 0 30px 15px 0;
	padding: 10px;
	display: block;
	resize: none;
}

form .text.error {
	color: red;
}