/*----------------------------------------------

	GIRAFFE.CSS
	Author:		Engage Interactive
	
	IDEAS:
	Could potentially use one :after to create a rectangle, with perspective that does the shadow... Would only work in the latest and greates though... still would need extra div...

----------------------------------------------*/

/* RESET */

@import url(../../global/css/reset.css);


/* FONTS */

@import url(../fonts/typewriter/typewriter.css);


/* FORMS */

@import url(plugins/forms.css);


/* ICONS */

@import url(plugins/icons.css);


/*-------------------------------

	GENERIC STYLES

-------------------------------*/

 
#page_decorations {
	position: relative;
	min-width: 960px;
	min-height: 100%;
	_height: auto !important;
 	height: 100%;
}
 


/*---------------------

	BLOCKQUOTE

*/

blockquote {
	position: relative;
	padding-top: 20px;
}

blockquote p {
	position: relative;
	z-index: 1;
	padding: 15px;
	border: solid 2px;
	margin-bottom: 0;
	background: #FFF;
	font-size: 16px;
	line-height: 26px;
}

blockquote:before {
	content: '';
	display: block;
	position: absolute;
	left: 10px; top: 0;
	z-index: 0;
	width: 0;
	height: 0;
	border: solid 20px transparent;
}


/*---------------------

	PAPER

---------------------*/

.paper {
	padding: 20px;
	text-shadow: 1px 1px #FFF;
}

.webkit .paper,
.gecko .paper {
	padding: 14px;
	border-width: 6px;
	border-style: solid;
	background: none;;
}


/*---------------------

	BORDER

---------------------*/

.border,
.simple_promo {
	padding: 26px;
	border: dotted 3px;
	margin-bottom: 30px;
}

.webkit .border,
.gecko .border,
.webkit .simple_promo,
.gecko .simple_promo {
	padding: 20px;
	border-width: 9px;
}


/*---------------------

	BEIGE
	
	Usually the largest areas of content on the page

---------------------*/

.beige {
	margin-bottom: 30px;
	text-shadow: 1px 1px #FFF;
}

.beige .content:not(:last-child) {
	border-bottom: dashed 1px;
}


/*---------------------

	BRAND ACCENT

---------------------*/

.brand_accent {
	margin-bottom: 30px;
}


/*---------------------

	ERROR & ALERT

---------------------*/

.error_message {
	padding: 15px 15px 1px;
	margin-bottom: 30px;
}

.error_message p {
	margin-bottom: 14px;
	font-size: 12px;
	line-height: 18px;
}

p.error_message {
	padding: 10px;
}

.error_message,
p.error {
	position: relative;
	border: solid 1px;
	border-radius: 6px;
	color: #FFF;
	text-shadow: 1px 1px rgba(0,0,0,.3);
	
	-moz-border-radius: 6px;
}

 

/*---------------------

	HEADINGS

----------------------*/

.beige > h1,
.brand_accent > h1,
.beige > h2,
.brand_accent > h2,
.beige > h3,
.brand_accent > h3,
.beige > h4,
.brand_accent > h4 {
	margin: 0;
	border-bottom: dashed 1px #e4e2db;
}


/*---------------------

	H1

*/

 


/* BEIGE CONTENT HEADER */

.beige > h1,
.brand_accent > h1  {
	padding: 18px 30px 14px;
}


/*---------------------

	H2

*/

 

/*---------------------

	H3

*/

 

/* BEIGE CONTENT HEADER */

.beige > h3,
.brand_accent > h3 {
	padding: 16px 18px 12px;
}


/*---------------------

	H4

*/

h4 {
	margin-bottom: 10px;
	font-size: 18px;
}


/*---------------------

	H5

*/

h5 {
	margin-bottom: 8px;
	font-size: 16px;
}


/*---------------------

	PARAGRAPHS

*/

p {
	line-height: 20px;
	margin-bottom: 18px;
	
}

.intro {
	font-size: 16px;
	line-height: 26px;
}

.intro p {
	line-height: 24px;
}

.terms {
	margin-bottom: 10px;
	font-size: 10px;
}


/* ADDRESS */

address {
	font-style: normal;
}


/*---------------------

	WHITE LINK

---------------------*/

.white_link,
#brands .current span {
	position: relative;
	display: inline-block;
	padding: 9px 40px 8px 10px;
	border-radius: 6px;
	box-shadow: 0 3px rgba(0,0,0,.14);
	background: #FFF url(../images/generic/template/white_link.png) 100% 50% no-repeat;
	font-size: 15px;
	color: #000;
	
	-moz-border-radius: 6px;
	
	-moz-box-shadow: 0 3px rgba(0,0,0,.14);
	-webkit-box-shadow: 0 3px rgba(0,0,0,.14);
}

.white_link:hover {
	background: url(../images/generic/template/white_link_hover.png) 100% 50% no-repeat;
	color: #FFF;
	text-decoration: none;
}


/*---------------------

	INSIDE A PROMO

*/

.img .white_link,
.menu_promotion .white_link {
	position: absolute;
	bottom: 20px; left: 20px;
	z-index: 1;
}

.img .white_link:hover,
.menu_promotion .white_link:hover {
	background-color: #222;
	color: #FFF;
	text-shadow: 1px 1px #000;
}


/*-------------------------------

	BASIC LAYOUT

-------------------------------*/

#wrapper {
	position: relative;
	z-index: 2;
	width: 960px;
	margin: auto;
}


/*---------------------

	CONTENT

---------------------*/

.content {
	padding:22px 30px 20px;
	 z-index:100;
}

.single .content {
	padding: 16px 20px 1px;
}

.content.intro {
	padding-bottom: 20px;
	margin-bottom: 0;
}

.content .img {
	margin-bottom: 15px;
}

 

/* FAQ */

.faq dt {
	padding-bottom: 8px;
	font-size: 16px;
	line-height: 22px;
}

.faq dd {
	margin-bottom: 30px;
}


/*-------------------------------

	COLUMNS

-------------------------------*/

.column {
	display: inline-block;
	float: left;
	margin-right: 30px;
}

.column.last {
	margin-right: 0;
}

.single {
	width: 300px;
}

.double {
	width: 630px;
}


/*---------------------

	TEXT COLUMNS

*/

.columns {
	padding-bottom: 20px;
	column-count: 2;
	column-gap: 30px;

	-moz-column-count: 2;
	-webkit-column-count: 2;
	
	-moz-column-gap: 30px;
	-webkit-column-gap: 30px;
}


/*---------------------

	CLEAR FIX
	Use clear class as a last resort

*/
 
 


/*-------------------------------

	HEADER

-------------------------------*/

#primary,
#corporate {
	position: relative;
	z-index: 900;
	width: 960px;
	height: 218px;
	margin: 0 auto 20px;
}

#logo {
	position: relative;
	z-index: 1100;
	display: block;
	height: 76px;
	margin: auto;
}

#brand_toggle {
	display: block;
	position: absolute;
	top: 51px; left: 50%;
	z-index: 1100;
	width: 30px;
	height: 30px;
	border-radius: 15px;
	box-shadow: 0 2px rgba(0,0,0,.14);
	opacity: .8;
	background: #f9f8f6 url(../images/brand_switch.gif) 50% 50% no-repeat;
	cursor: pointer;
	transition: opacity .2s;
	
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	
	-moz-box-shadow: 0 2px rgba(0,0,0,.14);
	-webkit-box-shadow: 0 2px rgba(0,0,0,.14);
	
	-moz-transition: opacity .2s;
	-webkit-transition: opacity .2s;
}

#logo:hover + #brand_toggle,
#brand_toggle:hover {
	opacity: 1;
}

#logo:hover + #brand_toggle {
	-webkit-animation: wiggle .1s linear .1s 3;
}


/* ANIMATION */

@-webkit-keyframes wiggle {
	0% {
		margin-top: 0;
	}
	
	25% {
		margin-top: 5px;
	}
	
	75% {
		margin-top: -5px;
	}
	
	100% {
		margin-top: 0;
	}
}


/*---------------------

	NAV

---------------------*/

#primary ul {
	width: 690px;
	height: 50px;
	padding: 0;
	box-shadow: 0 2px rgba(0,0,0,.1);
	background: #FFF;
	overflow: hidden;
	text-align: center;
	
	-moz-box-shadow: 0 2px rgba(0,0,0,.1);
	-webkit-box-shadow: 0 2px rgba(0,0,0,.1);
}

#primary li {
	display: block;
	float: left;
	padding: 6px;
	border-right: dashed 1px;
}

#primary ul a {
	display: block;
	position: relative;
	height: 28px;
	padding-top: 10px;
	border-radius: 6px;
	font-size: 16px;
}

#primary ul a:hover {
	box-shadow: 0 2px rgba(0,0,0,.3);
	text-decoration: none;
	
	-moz-box-shadow: 0 2px rgba(0,0,0,.3);
	-webkit-box-shadow: 0 2px rgba(0,0,0,.3);
}

#primary ul a:active,
#primary .on a {
	box-shadow: inset 0 2px rgba(0,0,0,.4), 0 1px #FFF;
	
	-moz-box-shadow: inset 0 2px rgba(0,0,0,.4), 0 1px #FFF;
	-webkit-box-shadow: inset 0 2px rgba(0,0,0,.4), 0 1px #FFF;
}


/*---------------------

	WIDTHS
	We do this because browsers are all wonky if left to their own devices due to variations in font rendering.
	Also, we can do fun stuff with shadows :)

*/

#primary .menus {
	width: 92px;
}

#primary .locations {
	width: 118px;
}

#primary .promotions {
	width: 132px;
}

#primary .book {
	width: 138px;
}

#primary .signup {
	width: 96px;
	border-right: none;
}


/*---------------------

	HOME BUTTON

*/

#primary .home {
	padding: 0;
	border-right: none;
}

#primary .home a {
	width: 50px;
	height: 50px;
	padding: 0;
	border: none;
	border-radius: 0;
	transition: all .15s ease-in-out;
	text-indent: -5000px;
	
	-moz-border-radius: 0;
	
	-moz-transition: all .15s ease-in-out;
	-webkit-transition: all .15s ease-in-out;
}

#primary .home a:hover,
#primary .home.on a {
	top: 0;
	box-shadow: none;
	
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}


/*-------------------------------

	SEARCH FORM

-------------------------------*/

#search {
	position: absolute;
	right: 0; bottom: -2px;
	width: 254px;
	height: 38px;
	padding: 8px;
	box-shadow: 1px 2px rgba(0,0,0,.1);
	text-align: left;
	
	-moz-box-shadow: 1px 2px rgba(0,0,0,.1);
	-webkit-box-shadow: 1px 2px rgba(0,0,0,.1);
}

#search .join {
	box-shadow: 0 0 0 1px rgba(255,255,255,.2);
	
	-moz-box-shadow: 0 0 0 1px rgba(255,255,255,.2);
	-webkit-box-shadow: 0 0 0 1px rgba(255,255,255,.2);
}

#search input {
	width: 196px;
	height: 22px;
	font-style: normal;
}

#search.active button span {
	display: block;
	position: absolute;
	top: 0; right: 0;
	width: 38px;
	height: 34px;
	text-indent: -5000px;
}


/* FIX FOR FIREFOX & ITS DODGY BUTTONS */

.gecko #search.active button span {
	top: -19px;
}


/*---------------------

	RESULTS

---------------------*/

#search_results {
	display: none;
	position: absolute;
	top: 218px; left: 50%;
	z-index: 1200;
	width: 960px;
	padding-top: 4px;
	margin-left: -480px;
}

/* THE BORING RESULTS CONTAINER - This is not used for the exciting threee deeee results! */

#results_wrapper {
	position: relative;
	z-index: 1;
}

#search_results h2 {
	height: 36px;
	padding: 15px 16px 0;
	margin: 0;
	border-style: dashed;
	border-bottom-width: 1px;
	text-transform: none;
	font-size: 18px;
}

#search_results .result {
	position: relative;
	height: 50px;
	padding: 5px;
	background: #FFF;
	border-bottom: dashed 1px;
	cursor: pointer;
}

#search_results .result:hover,
#search_results .result.last {
	padding: 5px 5px 6px;
	border-bottom: none;
}

#search_results .result.last:after {
	content: '';
	display: block;
	position: absolute;
	bottom: -5px; left: 0;
	width: 98%;
	height: 5px;
	margin-left: 1%;
	background: rgba(0,0,0,.14);
}

#search_results .result:hover h3,
#search_results .result:hover h3 span,
#search_results .result:hover small {
	color: #FFF;
	text-shadow: 1px 1px rgba(0,0,0,.2);
}

#search_results .result:hover h3 span {
	color: rgba(255,255,255,.8);
}

#search_results .result:hover small:after {
	background-image: url(../images/classic/icons/white.png);
}


/*---------------------

	CONTENT

*/

#search_results .result .brand {
	display: block;
	float: left;
	width: 40px;
	height: 40px;
	margin: 5px 20px 5px 5px;
	border-radius: 20px;
	box-shadow: 0 2px rgba(0,0,0,.14);
	background-color: #FFF;
	background-image: url(../images/generic/icons/logos.png);
	
	-moz-border-radius: 20px;
	
	-moz-box-shadow: 0 2px rgba(0,0,0,.14);
	-webkit-box-shadow: 0 2px rgba(0,0,0,.14);
}

#search_results .result h3 {
	float: left;
	width: 500px;
	height: 35px;
	padding-top: 15px;
	margin: 0;
	text-transform: none;
}

#search_results .result h3 span {
	display: inline-block;
	position: relative;
	top: -1px;
	font-size: 13px;
}


/* DISTANCE */

#search_results small {
	position: relative;
	float: left;
	height: 33px;
	padding: 17px 0 0 30px;
	background-position: 0 17px;
	background-repeat: no-repeat;
	font-size: 16px;
}

#search_results small:after {
	top: 50%;
	margin-top: -9px;
}

/* LINK */

#search_results a.white_link {
	position: absolute;
	top: 12px; right: 12px;
	font-size: 15px;
}

#search_results .result:hover .white_link {
	text-shadow: none;
}


/*---------------------

	PAGE OVERLAY

*/

#overlay,
.tmask {
	display: none;
	position: fixed;
	z-index: 800;
}

#overlay,
#overlay .background,
.tmask {
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100%;
	height: 100%;
}

#overlay .background {
	position: absolute;
	z-index: 1;
	background: #000;
	opacity: .7;
}

#overlay .loading,
#search_message {
	display: none;
	position: absolute;
	top: 50%; left: 50%;
}

/* LOADING */

#overlay .loading {
	z-index: 2;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 20px;
	box-shadow: 0 3px rgba(0,0,0,.2);
	background-color: #FFF;
	background-position: 50% 50%;
	background-repeat: no-repeat;
	
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	
	-moz-box-shadow: 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 3px rgba(0,0,0,.2);
}


/* MESSAGE */

#search_message {
	z-index: 1200;
	width: 300px;
	padding: 16px 20px 1px;
	margin-left: -170px;
}

#search_message .button {
	display: block;
	position: absolute;
	top: -10px; right: -10px;
	width: 28px;
	height: 28px;
	padding: 0;
	border-radius: 20px;
	
	-moz-border-radius: 20px;
}

#search_message .button span {
	display: block;
	width: 28px;
	height: 28px;
	text-indent: -5000px;
	box-shadow: none;
	background-position: 50% 50%;
	
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
}


/*---------------------

	TOP BORDER

*/

#search_results .top_border {
	position: absolute;
	top: 0; right: 0;
	z-index: 2;
	width: 960px;
	height: 4px;
	background: #000;
}


/*---------------------

	CLOSE

*/

#search_close {
	display: block;
	position: absolute;
	z-index: 0;
	bottom: -97px; left: 50%;
	height: 32px;
	padding-top: 70px;
	margin-bottom: 20px;
	background: url(../images/generic/template/search_rope.png) 53% 0 no-repeat;
}

#search_close span {
	display: inline-block;
	height: 24px;
	padding: 8px 10px 0;
	margin: 0;
	box-shadow: 1px 3px rgba(0,0,0,.14);
	transition: all .2s ease-in-out;
	font-size: 16px;
	text-transform: uppercase;
	
	-moz-box-shadow: 1px 3px rgba(0,0,0,.14);
	-webkit-box-shadow: 1px 3px rgba(0,0,0,.14);
	
	-webkit-transition: all .2s ease-in-out;
}

#search_close:hover span {
	color: #ffea01;
	
	-webkit-transform: rotate3d(0,0,0,-4deg);
}


/*-------------------------------

	RESULTS FOR WEBKIT
	Complicated 3D stuff is here... BRAIN MELTING!

-------------------------------*/

#search_results {
	-webkit-perspective: 500;
	-webkit-perspective-origin: 50% 50%;
}

#search_results .flip {
	display: none;
	position: relative;
	top: 0; left: 0;
	z-index: 1;
	width: 960px;
	
	-webkit-backface-visibility: hidden;
	-webkit-transform-origin: 50% 0;
	
	-webkit-perspective: 600;
	-webkit-perspective-origin: 50% 0%;
	
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-direction: normal;
	-webkit-animation-fill-mode: both;
}

#search_results.flipdown .flip {
	display: block;
	
	-webkit-transform: rotateX(-95deg);
	-webkit-animation-name: flipDown;
	-webkit-animation-duration: .8s;
}

#search_results.active .flip {
	display: block;
}

#search_results.rollup .flip {
	display: block;
	
	-webkit-transform: rotateX(0deg);
	-webkit-animation-name: rollUp;
	-webkit-animation-duration: .2s;
}

@-webkit-keyframes flipDown {
	0% {
		-webkit-transform: rotateX(-95deg);
	}
	
	30% {
		-webkit-transform: rotateX(20deg);
	}
	
	60% {
		-webkit-transform: rotateX(-10deg);
	}
	
	100% {
		-webkit-transform: rotateX(0deg);
	}
}

@-webkit-keyframes rollUp {
	0% {
		-webkit-transform: rotateX(0deg);
	}
	
	100% {
		-webkit-transform: rotateX(-120deg);
	}
}


/*-------------------------------

	FOOTER

-------------------------------*/

footer {
	position: relative;
	clear: both;
	width: 960px;
	margin: auto;
	text-align: center;
}

#flickr h4,
.social_button,
#engage,
#concepts {
	background-image: url(../images/generic/template/footer_sprite.png);
}


/*---------------------

	SOCIAL

---------------------*/

#social {
	height: 60px;
	margin-bottom: 25px;
}

/* FLICKR */

#flickr {
	float: left;
	padding: 6px 0 6px 6px;
	margin-right: 16px;
	border-radius: 4px;
	box-shadow: 0 3px rgba(0,0,0,.14);
	overflow: hidden;
	background: #e7ca2a;
	
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	
	-moz-box-shadow: 0 3px rgba(0,0,0,.14);
	-webkit-box-shadow: 0 3px rgba(0,0,0,.14);
}

#flickr h4 {
	display: block;
	float: left;
	width: 125px;
	height: 48px;
	margin: 0;
	text-indent: -5000px;
}

#flickr a {
	display: block;
	float: left;
	width: 42px;
	height: 42px;
	margin-right: 8px;
	border: solid 2px #fdfdfd;
	border-radius: 3px;
	background: #000;
	
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

#flickr a:hover {
	box-shadow: 0 3px rgba(0,0,0,.14);
	
	-moz-box-shadow: 0 3px rgba(0,0,0,.14);
	-webkit-box-shadow: 0 3px rgba(0,0,0,.14);
}


/*---------------------

	FACEBOOK & TWITTER

*/

#social .social_button {
	display: block;
	float: left;
	margin-top: 6px;
}

.social_buttons {
	margin-bottom: 30px;
	text-align: center;
}

.social_button {
	display: inline-block;
	width: 200px;
	height: 46px;
	border-radius: 6px;
	box-shadow: 0 3px rgba(0,0,0,.14);
	text-indent: -5000px;
	
	-moz-border-radius: 6px;
	
	-moz-box-shadow: 0 3px rgba(0,0,0,.14);
	-webkit-box-shadow: 0 3px rgba(0,0,0,.14);
}


/* TWITTER */

#twitter_button {
	margin-right: 16px;
	background-position: 0 -48px;
}


/* FACEBOOK */

#facebook_button {
	background-position: 0 -94px;
}


/*---------------------

	LINKS

*/

footer ul {
	clear: both;
	padding: 2px;
	margin-bottom: 25px;
	border-radius: 3px;
	box-shadow: 0 2px rgba(0,0,0,.14);
	background: #FFF;
	text-align: left;
	font-size: 0;
}

footer li {
	display: inline;
	margin-right: 4px;
	font-size: 12px;
}

footer li.right {
	float: right;
	margin: 0;
}

footer li a {
	display: inline-block;
	padding: 4px 4px 3px;
	color: #333333;
	text-shadow: 1px 1px #FFF;
	font-weight: normal;
}

footer li a:hover {
	border-radius: 2px;
	color: #FFF;
	text-decoration: none;
	
	-moz-border-radius: 2px;
}


/*---------------------

	ENGAGE

*/

#engage,
#concepts {
	display: block;
	position: relative;
	float: right;
	width: 116px;
	height: 26px;
	margin-bottom: 20px;
	opacity: .8;
	transition: all .2s ease-in-out;
	background-position: 0 -140px;
	text-indent: -5000px;
	
	-moz-transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
}

#engage:hover,
#concepts:hover {
	opacity: 1;
}

#engage {
	margin-top: 6px;
}

#concepts {
	float: left;
	width: 98px;
	height: 38px;
	background-position: 0 -166px;
}

#concepts .bubble {
	position: absolute;
	top: -90px; left: -125px;
	width: 120px;
	height: 120px;
	background-image: url(../images/generic/bubbles/back_to.png);
}


/*-------------------------------

	SOCIAL FEEDS

-------------------------------*/

#twitter_feed h3,
#facebook_feed h3,
#youtube h3 {
	margin: 0;
}

#twitter_feed h3 a,
#facebook_feed h3 a,
#youtube h3 a {
	display: block;
	height: 46px;
	margin: auto;
	background: url(../images/generic/template/social.gif) 50% 0 no-repeat;
	text-indent: -5000px;
}

#facebook_feed h3 a {
	background-position: 50% 50%;
}

#youtube h3 a {
	background-position: 50% 100%;
}


/* TWITTER */

#twitter_feed {
	width: 250px;
	padding: 0 6px 6px;
	margin: 0 auto 30px;
	background: #34acc9;
	color: #FFF;
}

#twitter_feed hgroup {
	padding: 10px;
}

#twitter_feed a {
	color: #34acc9;
}

#twitter_window {
	width: 250px;
	height: 220px;
	background: #FFF;
	color: #333;
	overflow: auto;
}

#twitter_feed .feed_tweet {
	padding: 10px;
	border-bottom: dashed 1px #ccc;
}

#twitter_feed .feed_tweet:last-child {
	border-bottom: none;
}

#twitter_feed p {
	margin-bottom: 6px;
	font-size: 12px;
	line-height: 18px;
}

#twitter_feed .feed_tweet div {
	display: inline-block;
	padding: 3px 6px 4px;
	border-radius: 4px;
	background: #efefef;
	font-size: 10px;
	
	-moz-border-radius: 4px;
}

#twitter_feed .feed_tweet div time,
#twitter_feed .feed_tweet div a {
	display: inline;
	text-shadow: 1px 1px #FFF;
}

#twitter_feed .feed_tweet div ul li {
	display: inline;
	margin-right: 10px;
}


/* FACEBOOK */

#facebook_feed {
	width: 238px;
	height: 280px;
	padding: 0 6px 6px;
	margin: 0 auto 30px;
	background: #305d9b;
}

#facebook_feed .fb_iframe_widget {
	height: 234px;
	overflow: hidden;
	background: #FFF;
}


/* YOUTUBE */

#youtube {
	width: 260px;
	padding: 0 6px 6px;
	margin-bottom: 30px;
	background: #c32e32;
}

#youtube > * {
	display: block;
}


/*-------------------------------

	BUBBLES

-------------------------------*/

.bubble {
	display: none;
	position: absolute;
	left: 50%;
	z-index: 1;
}

.permenant {
	display: block;
}

.bubble.dev img {
	display: block;
}

.bubble.dev {
	box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
	
	-moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,.5)
}

.bubble.dev:hover {
	z-index: 10000;
	background-color: rgba(255,255,255,.5);
	cursor: move;
}

@media screen and (min-width: 1260px) {

	.bubble {
		display: none;
	}
	
}


/*-------------------------------

	FACEBOOK LIKE BUTTON

-------------------------------*/

#facebook {
	position: absolute;
	top: 0; right: 10px;
	padding: 4px;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 3px rgba(0,0,0,.14);
	background: #FFF;
	
	-moz-border-radius: 0 0 6px 6px;
	
	-moz-box-shadow: 0 3px rgba(0,0,0,.14);
	-webkit-box-shadow: 0 3px rgba(0,0,0,.14);
}


/* Hide that shit comment box */

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
	display: none !important;
}

#facebook .fb-like {
	display: block;
	width: 49px;
	height: 20px;
	margin: 0;
	overflow: hidden;
}

#facebook iframe {
	width: 49px;
	max-width: 49px;
}


/* WIN GECKO & WIN CHROME */

.win.gecko #facebook .fb-like,
.win.chrome #facebook .fb-like {
	width: 46px;
}

.win.gecko #facebook iframe,
.webkit.win #facebook iframe {
	width: 46px;
	max-width: 46px;
}


/* IE9 */

.ie9 #facebook .fb-like {
	width: 47px;
	height: 21px;
}

.ie9 #facebook iframe {
	width: 47px;
	max-width: 47px;
}


/* IE7 & IE8 */

.ie7 #facebook .fb-like,
.ie8 #facebook .fb-like {
	width: 47px;
	height: 21px;
}

.ie7 #facebook iframe,
.ie8 #facebook iframe {
	width: 47px;
	max-width: 46px;
}


/*-------------------------------

	BRAND SWITCHER

-------------------------------*/

/*---------------------

	STATIC
	Footer & Corporate

---------------------*/

#brands {
	margin-bottom: 25px;
	padding:28px 22px;
	text-align: center;
}

#brands.hidden {
	display: none;
}

#brands .clear {
	overflow: hidden;
}

#brand_switcher .brand,
#brands .brand {
	display: block;
	float: left;
	width: 265px;
	padding: 20px;
	font-size: 12px;
	text-align: center;
	border-right: dashed 1px;
	border-color: #DDDAD2;
}

#brands .brand a.logo {
	display: block;
}

#brands .brand img {
	margin: auto;
}

#brands .brand p {
	min-height: 60px;
	margin-top: 10px;
}

#brands .current span {
	padding-right: 10px;
	margin-bottom: 10px;
	background-image: none;
	color: #FFF;
}

#brands .white_link {
	margin-bottom: 10px;
	text-align: left;
	font-size: 15px;
}


/*---------------------

	DYNAMIC
	Logo swapper

---------------------*/

#brand_switcher {
	position: absolute;
	top: 0; left: 50%;
	z-index: 1200;
	width: 1011px;
	height:118px;
	margin-left: -480px;
	
	-webkit-transform: rotate3d(0,0,0,0);
}

#brand_switcher .brand {
	padding: 20px 20px; 
	height: 90px;
	border-right: dashed 1px;
	border-color: #DDDAD2;
}

#brand_switcher .brand:last-child,
#brands .brand:last-child {
	border-right: none;
}

#brand_switcher .brand img {
 
}

#brand_switcher .brand p,
#brand_switcher .brand .white_link,
#brand_switcher .brand span {
	display: none;
}


/*---------------------

	FAKE LOGO

*/

#fake_logo {
	position: absolute;
	top: 0;
	z-index: 1400;
	display: block;
}


/*---------------------

	TOOLTIP

*/

#tooltip.brand {
	width: 200px;
	padding: 15px 15px 0;
	background: #FFF;
}

#tooltip.brand .arrow.up {
	background-position: -23px 0;
}


/*-------------------------------

	SHADOWS

-------------------------------*/

.shadow,
.beige,
.brand_accent,
.tbox,
.menu_promotion,
.img {
	position: relative;
}

.shadow > *,
.beige > *,
.brand_accent > *,
.tbox > *,
.menu_promotion > *,
.img img {
	position: relative;
	z-index: 1;
}

.shadow:before,
.shadow:after,
#wrapper .beige:before,
#wrapper .beige:after,
#wrapper .brand_accent:after,
#wrapper .brand_accent:before,
.tbox:after,
.tbox:before,
.menu_promotion:after,
.menu_promotion:before,
.img:after,
.img:before {
	content: '';
	display: block;
	position: absolute;
	z-index: 0;
}

.shadow:before,
#wrapper .beige:before,
#wrapper .brand_accent:before,
.tbox:before,
.menu_promotion:before,
.img:before {
	bottom: -3px; left: 0;
	width:100%;
	height: 3px;
	margin-left: 1%;
 
}

.gecko .paper.shadow:before,
.webkit .paper.shadow:before {
	bottom: -9px; left: 0;
}

.shadow:after,
#wrapper .beige:after,
#wrapper .brand_accent:after,
.tbox:after,
.menu_promotion:after,
.img:after {
	top: 2%; left: -8px;
	width: 100%;
	height: 98%;
	padding: 0 8px;
	/*background: url(../images/shadow.png) 0 100% no-repeat, url(../images/shadow.png) 100% 100% no-repeat #FFF;*/
	background-size: 1000px 200%, 1000px 200%;
}

.gecko .paper.shadow:after,
.webkit .paper.shadow:after {
	left: -14px;
	padding: 0 14px;
}


/*-------------------------------

	GENERIC PANELS

-------------------------------*/

/*---------------------

	BOOK A TABLE

---------------------*/

#book_a_table {
	display: block;
	width: 267px;
	height: 87px;
	margin: 6px 0 20px;
	transition: transform .1s ease-in-out;
	text-indent: -5000px;
	
	-moz-transition: -moz-transform .1s ease-in-out;
	-webkit-transition: -webkit-transform .1s ease-in-out;
}

#book_a_table:hover {
	transform: rotate(-2deg);
	
	-moz-transform: rotate(-2deg);
	-webkit-transform: rotate3d(0,0,0,-2deg);
}


/*---------------------

	SIMPLE PROMO
	Dotted border, image floated right, title and text with link button

---------------------*/

.simple_promo {
	position: relative;
	overflow: hidden;
}

.simple_promo h3 {
	font-size: 22px;
	line-height: 28px;
	margin-bottom: 15px;
}

.simple_promo p.intro {
	font-size: 14px;
	line-height: 20px;
}

.simple_promo img {
	float: right;
	margin-left: 20px;
}


/*---------------------

	NEW FOOD

---------------------*/

#new_food {
	position: relative;
	width: 260px;
	height: 260px;
	margin-bottom: 20px;
}

#new_food h3 {
	position: absolute;
	left: -3px; top: -3px;
	z-index: 20;
	width: 123px;
	height: 123px;
	text-indent: -5000px;
}

#new_food a {
	display: block;
	width: 260px;
	height: 260px;
}

#new_food a:hover {
	text-decoration: none;
}

#new_food span {
	position: absolute;
	right: 0; bottom: 0;
	padding: 0 20px 15px 10px;
	color: #FFF;
	font: 17px/21px "TypewriterSerial";
	font-smoothing: antialiased;
	text-shadow: 1px 1px 4px rgba(0,0,0,.8);
	text-align: right;
	
	-moz-font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
}



/*-------------------------------

	MOBILE POPUP

-------------------------------*/

#mobile .scroll {
	overflow: hidden;
}

#mobile .content {
	float: left;
	width: 350px;
	padding-right: 0;
}

#mobile .content ul {
	margin-bottom: 15px;
	padding-bottom: 4px;
}

#mobile .content li {
	background: url(../images/generic/homepage/mobile/bullet.png) center left no-repeat;
	color: #5C4832;
}

#mobile #iphone {
	float: right;
	width: 381px;
	height: 522px;
	margin: 22px 25px 20px 0;
	position: relative;
	background: url(../images/generic/homepage/mobile/iphone.png) no-repeat;
}

#mobile #iphone .slider {
	position: absolute;
	top: 78px; left: 123px;
	width: 237px;
	height: 355px;
	overflow: hidden;
}


/*-------------------------------

	TINY BOX PLUGIN

-------------------------------*/

.tbox {
	position: absolute;
	display: none;
	z-index: 1400;
}

.tmask {
	position: absolute;
	display: none;
	top: 0px; left: 0px;
	height: 100%;
	width: 100%;
	z-index: 1200;
}

.tinner {
	border: solid 3px #FFF;
}

.tcontent .brand_accent {
	margin: 0;
}

.tclose {
	position: absolute;
	top: 12px; right: 12px;
	z-index: 10;
	width: 18px;
	height: 18px;
	border: solid 6px;
	opacity: .8;
	cursor: pointer;
	background-position: 0 -18px;
}

.tclose:hover {
	opacity: 1;
}


/*---------------------

	LEGAL

---------------------*/

#tandcs h2 {
	position: relative;
	height: 29px;
}

#tandcs .scroll {
	height: 538px;
	overflow: auto;
}


/*---------------------

	FLICKR

---------------------*/

#tgallery img {
	display: block;
}


/*-------------------------------

	TOOLTIP
	A generic tooltip

-------------------------------*/

#tooltip {
	position: absolute;
	z-index: 2000;
	border: solid 3px;
	box-shadow: 0 3px rgba(0,0,0,.2);
	
	-moz-box-shadow: 0 3px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 3px rgba(0,0,0,.2);
}

#tooltip .arrow {
	display: block;
	position: absolute;
	left: 50%;
	width: 23px;
	height: 13px;
	margin-left: -12px;
}

#tooltip .up {
	top: -16px;
	background-position: 0 0;
}

#tooltip .down {
	bottom: -16px;
	background-position: 0 -12px;
}


/*-------------------------------

	GALLERY PLUGIN STUFF

-------------------------------*/

.slider {
	position: relative;
}


/*---------------------

	SLIDER WINDOW
	Initially this is hidden, then when the javascript does its stuff, used as the overflow hidden bit. If javascript fails then anything outside of here is shown still. Clever!

---------------------*/

.slider_window {
	display: none;
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #000;
}

.slider_window > img,
.slider_window > a,
.slider_window > div {
	display: block;
	position: absolute;
	top: 0; left: 0;
}

/* Image content */

.slider_window > div {
	width: 960px;
	height: 365px;
}

.slider_window > div > img,
.slider_window > div > a {
	display: block;
	float: left;
}


/*---------------------

	NAV

---------------------*/

.slider .slider_nav {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	z-index: 2;
}

.slider img {
	display: block;
}


/* DOTS */

.slider .slider_nav ul {
	position: absolute;
	top: 10px; right: 10px;
	padding: 5px 0 5px 5px;
	opacity: .2;
	transition: opacity .5s ease-in-out;
	
	-moz-transition: opacity .5s ease-in-out;
	-webkit-transition: opacity .5s ease-in-out;
}

.slider:hover .slider_nav ul {
	opacity: 1;
}

.slider .slider_nav li {
	float: left;
	margin: 0 5px 0 0;
}

.slider .slider_nav li a {
	display: block;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	box-shadow: 0 2px rgba(0,0,0,.2);
	background: #FFF;
	text-indent: -5000px;
	
	-moz-border-radius: 8px;
	
	-moz-box-shadow: 0 2px rgba(0,0,0,.2);
	-webkit-box-shadow: 0 2px rgba(0,0,0,.2);
}

.slider .slider_nav li a.on,
.slider .slider_nav li a:hover {
	background: #000;
}


/* ARROWS */

.slider .slider_nav .arrow,
#news .arrow {
	display: block;
	position: absolute;
	top: 0;
	z-index: 3;
	width: 60px;
	height: 60px;
	border-radius: 30px;
	text-indent: -5000px;
	
	-moz-border-radius: 30px;
}

.slider .slider_nav .prev,
#news .arrow.prev {
	left: -35px;
	background-position: 0 0;
}

.slider .slider_nav .next,
#news .arrow.next {
	right: -35px;
	background-position: -60px 0;
}

.slider .slider_nav .prev:hover {
	background-position: 0 -60px;
}

.slider .slider_nav .next:hover {
	background-position: -60px -60px;
}


/*-------------------------------

	3D HARDWARE ACCELLERATION

-------------------------------*/

#brand_toggle,
#book_a_table,
.tweet ul li,
.tweet li a,
.slider .slider_nav ul,
#engage,
#concepts,
.select,
#lunch {
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
}


/*-------------------------------

	SHIFTS
	These push the content about to give it that haphazard look

-------------------------------*/

@media screen and (min-width: 1040px) {
	
	.shift_left_10,
	.shift_left_20,
	.shift_right_10,
	.shift_right_20 {
		position: relative;
	}
	
	.shift_left_10 {
		left: -10px;
	}
	
	.shift_left_20 {
		left: -20px;
	}
	
	.shift_right_10 {
		right: -10px;
	}
	
	.shift_right_20 {
		right: -20px;
	}
	
}