/*
	COLOURS
	----------------------------
	DARK TEXT = rgb(75,66,67);
	LIGHTER TEXT = rgb(120,113,114);
	REVERSED TEXT = rgb(171,170,170);
	REVERED DARKER = rgb(96,90,90);
	ORANGE = rgb(182,113,49);
	----------------------------	
*/

/* import CSS for compliant browsers */ 
@import url(reset.css);@import url(typography.css);@import url(fonts.css);@import url(grid.css);@import url(jquery.fancybox.css);

/***************************************
GRID - http://github.com/dotjay/hashgrid/downloads
****************************************/
#grid{ background: url(..img/bg-grid-980.gif) repeat-y 0 0; width: 980px; position: absolute; top: 0; left: 50%; margin-left: -490px;}
#grid.grid-1{background: url(../img/bg-grid-980.gif) repeat-y 0 0;}
#grid div.horiz{height: 19px; border-bottom: 1px dotted #aaa; margin: 0; padding: 0;}


/***************************************
GLOBALS
****************************************/
html, body {margin:0;padding:0;}
body {background: url(../img/display/grain.jpg) white repeat center top; overflow-x: hidden;}


/***************************************
HEADER
****************************************/
#head {border-bottom: 1px solid #fff; height: 180px; padding-top: 24px; background: url(../img/display/paper.jpg) white repeat center top; }
#head div {width: 980px; margin: 0 auto; position: relative; }
#head h1 {text-indent:-999em; float: left; display: inline; width: 300px; height: 145px; overflow: hidden; position: relative; top:6px;}
#head h1 a {float: left; display: block; background: url(../img/display/logo.png) transparent no-repeat 0 0; width: 300px; height: 145px;}

#head nav {position: absolute; width: 400px; right: 70px; top:10px;}
#head nav ul {display: block;}
#head nav li {
	display:block; float:left; text-shadow: 0 1px 0 rgba(255,255,255,0.8); font-variant: small-caps; letter-spacing: 2px;
	font-size: 1.1em; vertical-align: middle; margin-right: 16px;
}
#head nav li a {
	text-align: center; color: #eee; padding: 1px 10px 4px 10px; text-shadow: 0 1px 0 rgba(0,0,0,0.9); vertical-align: middle;
	background: #918d8d; 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #918d8d), color-stop(0.99, #6c6a6a));
	background: -moz-linear-gradient(center top,#918d8d 1%,#6c6a6a 99%);
	-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;
	-webkit-transition: background 0.5s ease-in-out;
}
#head nav li a:hover, #head nav li a:focus, #head nav li a:active {
	background: #6c6a6a; 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.1, #6c6a6a), color-stop(0.99, #918d8d));
	background: -moz-linear-gradient(center top,#6c6a6a 1%,#918d8d 99%);
	text-shadow: 0 -1px 0 rgba(0,0,0,0.9);
	-moz-box-shadow:0 1px 0 rgba(255,255,255,0.95); -webkit-box-shadow:0 1px 0 rgba(255,255,255,0.95); box-shadow:0 1px 0 rgba(255,255,255,0.95);
}

#head nav li a:before {content: '+';}
#head a {text-shadow: 0 1px 0 rgba(255,255,255,0.8);}

#head hgroup {display: block;float: left; margin-left: 80px; width: 570px; margin-top: 70px;}
#head h2 {text-shadow: 0 1px 0 rgba(255,255,255,0.8); font-size: 2em; line-height: 0; color: rgb(75,66,67);  text-align: center;}
#head h2 span {font-variant: small-caps; letter-spacing: 4px; color: rgb(75,66,67); color: rgba(75,66,67,0.9); }
#head .amp {font-size: 1.7em; padding: 0 4px; vertical-align: middle; color: rgba(182,113,49,0.8); line-height: 0;}
#head h3 {text-shadow: 0 1px 0 rgba(255,255,255,0.8); color: rgb(75,66,67); color: rgba(75,66,67,0.7); font-size: 1.15em; text-align: center;}


/***************************************
CONTENT
****************************************/
section {color: #dfdfdf; padding-bottom: 40px;}
#nice {padding-top: 57px; position: relative;}
#bulk {border-top: 3px solid rgba(0,0,0,0.8);}
.blk aside {margin-top: 60px;}
.blk blockquote p {
	background: url(../img/display/curl.png) transparent no-repeat 6px 0; height: 190px; padding-top: 16px;
	display: block; font-size:1.5em; line-height: 40px; position: relative; top:-28px; width: 75%; padding-left: 20%;
	text-shadow: 0 1px 1px rgb(0,0,0);
}

.blk .g2 {position: relative; left: -10px; }
.blk .g2 h3 {
	font-size: 1.333em; color: #f1eeee; text-transform: uppercase; letter-spacing: 4px; 
	text-shadow: 0 1px 1px rgb(0,0,0); font-weight: 300;
	text-align: center; line-height: 20px; position: relative; top:-1px; margin-bottom: 1px;
}

.blk .g2 em {font-size: 11px; color: #605a5a; text-shadow: 0 1px 1px rgb(0,0,0); display: block; padding-left: 62px; }


#dial {
	background: url(../img/display/clock.png) transparent no-repeat 0 0; height: 135px; 
	width: 135px; margin-top: 24px; margin-left: 75px; position: relative;
}

#sec, #min, #hour {position: absolute; width: 3px; height: 270px; top: -69px; left: 67px;}
#sec {background: url(../img/display/sechand.png) transparent no-repeat 0 0; z-index: 3;}
#min {background: url(../img/display/minhand.png) transparent no-repeat 0 0; z-index: 2;}
#hour {background: url(../img/display/hourhand.png) transparent no-repeat 0 0; z-index: 1;}

.blk.tier {position: relative; top:-6px;}
.blk.tier .g2 em {padding-left: 82px; width: 160px; line-height: 20px;}
.blk.tier .g2 h3 {text-transform: none; font-style: italic; letter-spacing: 0px; text-align: left; padding-left: 82px;}

.blk.tier .g2 {background: url(../img/display/curl-small.gif) transparent no-repeat 20px 50%; margin-top: 20px;}

.blk.tier ul {
	width: 620px; margin-left: 10px; height: 90px; overflow: hidden; display: inline; float: left; 
	position: relative; top: -4px; overflow: visible;
}
.blk.tier li {display: block; position: relative;}
.blk.tier li a {
	display: block; float: left; width: 100px; margin:0 5px; height: 90px; margin-right: 10px; text-indent: -999em;
	background: url(../img/display/logo-sprite.gif) transparent no-repeat 0 0;
	opacity:0.6; -webkit-transition: opacity 0.5s ease-in-out;
}

.blk.tier li a:hover, .blk.tier li a:focus, .blk.tier li a:active {opacity:1;}

.blk.tier li + li a {background-position: -120px 0; width: 90px;}
.blk.tier li + li + li a {background-position: -220px 0; width: 140px;}
.blk.tier li + li + li + li a {background-position: -370px 0; width: 100px;}
.blk.tier li + li + li + li + li a {background-position: -485px 0; width: 110px;}


/***************************************
TOOLTIPS
****************************************/

/* trigger button */
.tips {
	position: relative;
}

.blk.tier li a {position: relative;}


/* tooltip styling */
.blk.tier li div {
	display:none;
	background:rgb(0,0,0); background:rgba(0,0,0,0.9);
	padding: 15px;
	color:#eee;
	z-index: 5;
	width: 200px;
	border: 1px solid #000;
	position: absolute;
	top:-100px;
	left: -50px;
	font-size: 0.917em; line-height: 2em;
	-moz-box-shadow:0 0 18px rgba(255,255,255,0.6); -webkit-box-shadow:0 0 18px rgba(255,255,255,0.6); box-shadow:0 0 18px rgba(255,255,255,0.6);
	-moz-border-radius:6px; -webkit-border-radius:6px; -border-radius:6px;
}


.blk.tier li div  {
   -webkit-animation-name: foo;
   -webkit-animation-duration: 0.4s;
   -webkit-animation-iteration-count: once;
   -webkit-animation-direction: normal, normal;
   -webkit-animation-timing-function: linear, ease-in;
}

@-webkit-keyframes foo { 
	0%  { -webkit-transform: translate(0px, 20px);} 
	100% { -webkit-transform: translate(0px, 0px);}
}

.blk.tier li div cite {color:rgb(182,113,49); }

.blk.tier li a:hover div, .blk.tier li a:focus div, .blk.tier li a:active div {display: block; text-indent: 0; top:-120px;}


/***************************************
FOLIO
****************************************/
#good {
	width: 980px; margin: 0 auto; position: relative; 
	border-top: 2px solid #333; border-bottom: 1px solid #222;
	border-top: 2px solid rgba(0,0,0,0.3); border-bottom: 1px solid rgba(255,255,255,0.1); 
	padding:0 0 13px 0; margin-bottom: 40px; overflow: hidden;
}

#good h2 {
	font-size: 28em; line-height: 0; text-transform: uppercase; letter-spacing: -6px; 
	position: absolute; top:80px; left: 50%; margin-left: -380px; z-index: 0;
	text-align: center; 
	color:#fff; 
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10);
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
	color: rgba(255,255,255,0.05);
	text-shadow: 0 0 8px rgba(0,0,0,0.2);
}

#good ul {display: block; margin-top: 0px; top:-2px;  position: relative; z-index: 1;}
#good ul li, #good ul li.soon:hover, #good ul li.soon:focus, #good ul li.soon:active  {
	width: 288px; height: 148px; float: left; display: inline; position: relative;
	margin-left: 20px; margin-bottom: 20px; background: rgba(0,0,0,0.3); overflow: hidden;
	border: 6px solid #000;  border: 6px solid rgba(255,255,255,0.1);
	-moz-box-shadow:0 0 8px rgba(0,0,0,0.8); -webkit-box-shadow:0 0 8px rgba(0,0,0,0.8);
	-webkit-transition: all 0.5s ease-in-out;
}

#good ul li:hover, #good ul li:focus, #good ul li:active {
	border-color: rgb(282,213,149); border-color: rgba(282,213,149,0.1);
	-moz-box-shadow:0 0 18px rgba(255,255,255,0.6); -webkit-box-shadow:0 0 18px rgba(255,255,255,0.6);
}

#good ul li img, .fl {display: block; position: absolute; top: 0; left: 0;}
.fl {display: block; width: 448px; height: 248px; position: relative;}
				
#good ul li div { 
	position: absolute; top: 109px; left: 0; z-index: 3;
	background: #000; background: rgba(0,0,0,0.95); 
	height: 20px; width: 268px; padding: 10px; border-top: 1px solid rgba(255,255,255,0.6);
	-moz-box-shadow:0 -4px 8px rgba(0,0,0,0.4); -webkit-box-shadow:0 -4px 8px rgba(0,0,0,0.4);
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}

#good ul li h3 {
	text-transform: uppercase; letter-spacing: 2px; font-size: 1em; color: #eee; position: relative; z-index: 4;
	text-shadow: 0 0 12px rgba(255,255,255,0.9); border-bottom: 1px dotted #555; padding-bottom: 14px; margin-bottom: 6px;
}
#good ul li h3 span {
	color: #605a5a; text-shadow: 0 1px 1px rgb(0,0,0); font-variant: small-caps; position: absolute; right: 0px; top:2px;
	text-align: right; text-transform: lowercase; font-size: 10px; z-index: 4;
}

#good ul li h3 span:before {content: "{"; opacity:0.6;}
#good ul li h3 span:after {content: "}"; opacity:0.6;}

#good #fragment-2 ul li {width: 448px; height: 248px;}
#good #fragment-2 div {height: 50px; width: 428px; top: 209px; left: 0;}

.soon, cite.la {
	width: 288px; height: 148px; background: url(../img/display/soon.png) transparent no-repeat 0 0;
	position: absolute; z-index: 1; top: 0; left: 0;
}

/*-//--MENU--//-*/
#good menu {
	position: relative;  top:-16px; z-index: 0; text-align: center; margin-bottom: 16px; 
	margin-left: auto; margin-right: auto; width: 360px; 
	background: rgb(30,30,30);
	background: rgba(30,30,30,0.95);
	background: -webkit-gradient(linear, center bottom, center top, color-stop(0.10, rgba(30,30,30,0.95)), color-stop(0.90, rgba(60,60,60,0.95)));
	background: -moz-linear-gradient(center bottom, rgba(30,30,30,0.95) 10%, rgba(60,60,60,0.95) 90%);
	padding: 12px; padding-top: 18px; border-bottom: 1px solid rgba(60,60,60,0.95);
	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.8); -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.8);
	box-shadow: 0  3px 3px rgba(0,0,0,0.8);
	-moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
}

#good menu li {display: inline; word-spacing: 3px; font-size: 1em; border-right: 1px solid rgba(255,255,255,0.1); padding:0 10px;}
#good menu li + li + li {margin-left: 10px; border-right: none; padding: 0;}
#good menu li h3 {display: inline; text-shadow: 0 1px 1px rgba(0,0,0,0.9);}
#good menu li a {color: #777; color: rgba(255,255,255,0.15); }
#good menu .ui-tabs-selected a, #good menu a:hover, #good menu a:focus, #good menu a:active {
	color: #999; color: rgba(255,255,255,0.6); outline: none; text-shadow: 0 1px 1px rgba(0,0,0,0.9);
}
	
	
/*-//--TABS--//-*/
.ui-tabs-hide {display: none;}
.ui-tabs-nav:after {display: block;clear: both;content: " ";}
.tavdiv {}

/* Additional IE specific bug fixes... */
* html .ui-tabs-nav { /* auto clear, @ IE 6 & IE 7 Quirks Mode */display: inline-block;}
*:first-child+html .ui-tabs-nav  { display: inline-block;}


/***************************************
CONTACT
****************************************/
#right {margin: 0 auto; width: 980px; margin-top: 78px; margin-bottom: 0px; clear: both;}
#right #tact  {
	width: 418px; padding: 20px; display: inline; float: left; margin-left: 20px; position: relative; top:-20px;
	background: rgb(0,0,0); background: rgba(0,0,0,0.6); border: 1px solid #000;
}
#right h3 {
	text-transform: uppercase; letter-spacing: 2px; font-size: 1.5em; color: #eee; position: relative; z-index: 4;
	text-shadow: 0 0 12px rgba(255,255,255,0.9); border-bottom: 1px dotted #555; padding-bottom: 14px; margin-bottom: 26px;
}
#tic li {
	display: block; background: url(../img/display/pete.jpg) transparent no-repeat 0 0; padding: 20px; margin-bottom: 20px;
	position: relative; top:-20px; height: 120px;
}

#tic li + li {background: url(../img/display/steve.jpg) transparent no-repeat 0 0; margin-bottom: 0;}

#tic h5 {font-size: 1.5em; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px;}
#tic span {
	display: block; color:#777; 
	color: rgba(255,255,255,0.3); margin-bottom: 12px; font-size: 0.92em; font-variant: small-caps; letter-spacing: 3px;
}
#tic p {width: 75%; text-shadow: 0 1px 3px #000; line-height: 20px;}


/***************************************
FOOTER
****************************************/
footer {margin: 0 auto; width: 940px; margin-top: 0px; margin-bottom: 0px; clear: both; position: relative; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 13px; background: url(../img/display/bow.png) transparent no-repeat bottom left; height: 200px;}
footer p {line-height: 20px; color: #666; width: 66%; padding-left: 320px; margin-top: 70px }
footer h6 {
	position: absolute; left: 320px; top:50px; z-index: 2;
	text-transform: uppercase; letter-spacing: 2px; font-size: 1.5em; color: #eee; position: relative; z-index: 4;
	text-shadow: 0 0 12px rgba(255,255,255,0.3); width:66%;
}

/***************************************
FORMS
****************************************/
form {}
form li {position: relative; display: block;}
form li + li {float: left; width: 45%; margin-right: 28px;}
form li + li + li {margin-right: 0;}
form label {display: block; margin: 10px 0 16px 0;}
form label span {display: block; color: rgba(255,255,255,0.5); position: relative; top:4px;}
form legend {display: block; margin-bottom: 10px;}
form input, form textarea {
	width: 95%; padding:10px; border: 0; background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.4); font-size: 2em;
	display: block; vertical-align: middle; line-height: 20px; font-size: 1em;
}
form textarea {clear: both; overflow: hidden; height: 20px; line-height: 30px; }
form select {}
form button {margin-top: 22px; margin-bottom: 10px; clear: both;}

form input:focus, form input:active, form textarea:focus, form textarea:active {background: rgba(255,255,255,0.6); color: #333;}

/***************************************
BUTTONS
****************************************/
.button, button {
	padding: 1px 4px 1px 4px; text-align: center; text-transform: lowercase; border: 1px solid #ddd; display: inline;
	color: #333; position: relative; font-size: 0.9em; cursor: pointer;
	background: #eee;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0.49, #eee), color-stop(0.55, #ccc));
	background: -moz-linear-gradient(center top, #eee 49%, #ccc 55%);
	-moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; text-shadow: 0 1px 0 #fff;
}

.button:hover, .button:focus, .button:active, button:hover, button:focus, button:active {
	color: #666;
	background: #ddd;
}

.button:active, button:active {top:1px;}



/***************************************
EASTER EGG
****************************************/

.trigger {
	position: absolute; width: 24px; height: 24px; top: -14px; right: 318px;
	text-indent: -999em; display: block; overflow: hidden; cursor: pointer;
	background: url(../img/display/toggles.png) transparent no-repeat 0 0; z-index: 8;
	outline: none;
}
.trigger:hover, .trigger:focus {background-position: -24px 0;}
.trigger:active, .trigger.active {background-position: -48px 0;}

#panel {
	background:url(../img/play/full.gif) #f2f2f2 repeat-x center top; 
	height: 395px; overflow: hidden; position: relative; top: 0px; z-index: 2; width: 100%;
}
#panel .wrapp {position: relative;width: 900px;margin: 0 auto;z-index: 1;}

#bird {
	position: absolute; z-index: 2; width: 25px; height: 25px; background: url(../img/play/bird.png) transparent no-repeat 0 0; 
	top:100px; 	left: 46%;
}

#plane {
	position: absolute; z-index: 5; width: 210px; height: 90px; background: url(../img/play/plane.png) transparent no-repeat 0 0; 
	top:100px; 	left: 75%;
}

#cloud, #cloud2 {
	position: absolute; z-index: 3; width: 470px; height: 220px; background: url(../img/play/cloud.png) transparent no-repeat 0 0; 
	-moz-transform: scale(0);
	top:40px; left: -10%;
}

#cloud2 {
	top:-40px; left: -90%; opacity:0.5; 
}

#boiing {
	position: absolute; z-index: 4; width: 75px; height: 87px; background: url(../img/play/boiing.png) transparent no-repeat 0 0; 
	top:228px; 	left: 55.2%;
}

 
#bird {
   -webkit-animation-name: bi;
   -webkit-animation-duration: 25s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: normal, normal;
   -webkit-animation-timing-function: linear, ease-out;
}

#plane {
   -webkit-animation-name: pl;
   -webkit-animation-duration: 15s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: normal, normal;
   -webkit-animation-timing-function: linear, ease-in;
}

#cloud{
   -webkit-animation-name: pl;
   -webkit-animation-duration: 125s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: normal, normal;
   -webkit-animation-timing-function: linear, ease-in-out;
}


#cloud2 {
   -webkit-animation-name: pl2;
   -webkit-animation-duration: 225s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: normal, normal;
   -webkit-animation-timing-function: linear, ease-in-out;
}

#boiing {
   -webkit-animation-name: bo;
   -webkit-animation-duration: 1s;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-direction: normal, normal;
   -webkit-animation-timing-function: linear, ease-in;
}

@-webkit-keyframes bi { 
	0%  { -webkit-transform: translate(-800px, 0px);} 
	40% { -webkit-transform: rotate(-10deg); }
	100% { -webkit-transform: translate(2000px, -400px);}
}
@-webkit-keyframes pl { 0%  { -webkit-transform: translate(300px, 0px);} 100% { -webkit-transform: translate(-2000px, 0px);}}
@-webkit-keyframes pl2 { 0%  { -webkit-transform: translate(1600px, 0px);} 100% { -webkit-transform: translate(-2000px, 0px);}}
@-webkit-keyframes bo{ 
	0%  { -webkit-transform: translate(0px, 0px);} 
	2%  { -webkit-transform: translate(0px, -1px);} 
	50% { -webkit-transform: translate(0px, -30px);}
	52% { -webkit-transform: translate(0px, -31px);}
	100% { -webkit-transform: translate(0px, -2px);}
}


@media screen and (max-device-width: 480px){
	body{-webkit-text-size-adjust: none;}
}

/***************************************
HOUSE KEEPING
****************************************/
.last {margin-right: 0;}
.height_fix {height: 1%;}
.block {display: block;}
.inline {display: inline;}
.relative {position: relative;}
.clear_left {clear:left;}
.none {display:none;}
html {image-rendering: -moz-crisp-edges;}
img {image-rendering: optimizeQuality;  -ms-interpolation-mode: bicubic;}
img[src$=".gif"] {image-rendering: -moz-crisp-edges; -ms-interpolation-mode: nearest-neighbor;}/* applies to GIF images only */
article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, details{ display: block; }/*html5 refiners*/
hr {display: block; width: 980px; border: 0; border-bottom: 1px solid rgba(255,255,255,0.1); margin: 0 auto;}