@import url("reset.css");

/* ============= */
/* = Utilities = */
/* ============= */

/*column widths*/
.one 	{width: 152px;}
.two 	{width: 316px;} 
.three 	{width: 480px;} /* Half */
.four 	{width: 644px;} 
.five 	{width: 808px;}
.six 	{width: 972px;} /* Full */
 
/*gutter setting*/
.columnBoth {margin: 0 12px;}
.columnRight {margin-right: 12px;}
.columnLeft {margin-left: 12px;}

.label50 {float:left; width:50px;}
.label100 {float:left; width:100px;}

#container {position: relative; width: 100%;}
#content {display: none; margin-bottom: 40px; width: 996px;}

#headerWrapper {background: #231f20; font-size: 12px;}
#headerWrapper #header {background: transparent url(../images/cg_head.gif) no-repeat center; color: #fff; margin: 0 auto; 
	position: relative; width: 996px;}
#headerWrapper #header ul {border-top: #fff 1px dotted; float: right; margin-right: 10px; margin-top: 215px; width: 480px;}
#headerWrapper #header li {border-right: #fff 1px dotted; float: left; height: 150px; margin: 3px 0 0 11px; 
	padding: 0px 10px 10px 0; width: 142px;}
#headerWrapper #header li:first-child {margin-left: 0;}
#headerWrapper #header #last {border-right: none;}
#headerWrapper #header li a {color: #fff;}
#headerWrapper #header li a:hover {color: #00eeee;}
#headerWrapper #header li h1 {font-size: 24px; font-weight: 400; letter-spacing: 3px; margin: 8px 0; text-transform: uppercase;}
#headerWrapper #header #twitter_div {margin: 0; padding: 0;}
#headerWrapper #header #twitter_div ul, #headerWrapper #header #twitter_div li {border: none; float: none; height: auto; 
	margin: 0; padding: 0;}
#headerWrapper #header #twitter_div {line-height: 20px;}
#headerWrapper #header #twitter_div a {margin-top: 12px;}
#headerWrapper #header #twitter_div li {padding: 0 3px;}
#headerWrapper #header #twitter_div li span a {display: inline; font-family: Helvetica; font-style: normal; margin-top: 0;}
#headerWrapper #header #twitter_div li a {display: block; font-family: Georgia; font-style: italic; margin-right: 5px;
	margin-top: 5px; padding: 3px; text-align: right;}
	
#footerWrapper {background: #231f20; bottom: 0px; clear: both; font-size: 12px; height: 24px; position: fixed; width: 100%; z-index: 5000;}
#footerWrapper #footer {color: #fff; margin: 0 auto; width: 996px;}
#footerWrapper #footer li {float: left; padding: 5px 12px;}
#footerWrapper #footer li a {color: #fff;}
#footerWrapper #footer li a:hover {border-bottom: #fff 1px solid;}
#footerWrapper #footer #formLeft {float:left;}
#footerWrapper #footer #formLeft p {margin-bottom: 15px;}
#footerWrapper #footer #formRight {float:left; margin-left:20px;}
#footerWrapper #footer .formThanks {color:lime; display:none; }

#navWrapper {background: url('../images/shadow.png') repeat-x bottom; height: 55px; padding-bottom: 20px; width: 100%; z-index: 999;}	
#nav {background: #fff; margin: 0 auto; padding-top: 3px; width: 996px;}
#nav li {background: #fff; float: left; font-size: 36px; font-variant: small-caps; text-align: center; width: 332px;}
#nav li a {color: #231f20; display: block; text-transform: uppercase; padding: 5px 0;}
#nav li a:hover {background: #00eeee; color: #fff;}

#secret {background: #231f20; color: #fff; margin-top: -2px; position: fixed; top: 0px; width: 100%; z-index: 1000;}
#secret a {background: url("../images/cg_small.gif") no-repeat right; color: #fff; display: block;}
#secret a:hover {background: #00eeee url("../images/cg_small_o.gif") no-repeat right;}

/*Animation Classes*/
.headerWrapperZero {height: 0px;}
.headerWrapperFull {height: 430px;}
.headerZero {height: 0px; margin-top: 0px; overflow: hidden;}
.headerFull {height: 430px; overflow: visible;}
.headerContentZero {font-size: 0px; height: 0px; margin-top: -250px;}
.headerContentFull {font-size: 12px; margin-top: 215px;}
.secretZero {font-size: 0px; height: 0px}
.secretZero a {height: 0px}
.secretFull {font-size: 24px; height: 55px;}
.secretFull a {height: 55px}
.line1 {background: #231f20; height: 2px; margin: 3px 0;}
.lineZero {height: 2px; margin-top: 0px;}
.lineFull {height: 2px; margin-top: 3px;}
.navWrapperZero {position: fixed; top: 53px;}
.navWrapperFull {position: absolute; top:435px;}
.contentZero {margin: 130px auto 12px auto;}
.contentFull {margin: 80px auto 12px auto;}

#comingSoon {margin: 15px auto; text-align: center; width: 996px;}
#comingSoon h1 {font-size: 90px; text-transform: uppercase;}

/* ========= */
/* = Pages = */
/* ========= */

/*Work*/
#workDetails {margin: 10px 0px;}
#workDetails p, #workDetails li {font-size: 14px; line-height: 1.5em;}
#workDetails h1, #workDetails h1 a {color: #231f20; }
#workDetails h1 a:hover {color: #555;}
#workDetails h1, #workDetails h2 {font-family: Georgia, serif; font-style: italic; font-weight: 100;}
#workDetails h1 {background: url(../images/h_back2.gif) repeat-x; font-size: 36px; height: 50px; margin: 10px 0; padding: 7px 12px;}
#workDetails h2 {background: #666; color: #fff; font-size: 18px; margin-bottom: 5px; padding: 2px 8px;}
#workDetails ul {list-style: disc; margin: 0px 8px 8px 28px;}
#workDetails p {margin: 0 8px 8px 8px;}
#workDetails #workDesc {float: left;}
#workDetails #workImage {border: 1px solid #cccccc; float: left; margin-right: 10px; width: 644px;}
#motioncontainer .selectedImage {border-top: #00eeee 3px solid; height: 178px; margin: 8px 0px 10px 0px; width: 336px;	-webkit-box-shadow: 5px 5px 5px #888;
		-moz-box-shadow: 5px 5px 5px #888;
}
.selectedImage img {background-color: #000;}

/*About*/
#aboutUs p, #aboutUs li {font-size: 14px; line-height: 1.5em;}
#aboutUs .answer {color: #231f20; float: left; margin: 25px 18px 26px 7px; width: 906px;}
#aboutUs .answer a {background: #eee; border-bottom: #999 1px solid; border-right: #999 1px solid; color: #444; padding: 0px 2px;}
#aboutUs .answer a:hover {background: #FFFF00;}
#aboutUs .qa {border-bottom: #999 1px solid; border-right: #999 1px solid; font: italic 100 18px Georgia, serif; padding: 6px;}
#aboutUs h2 {background: url(../images/h_back2.gif) repeat-x bottom; clear:both; color: #231f20; font: italic 100 18px Georgia, serif; padding: 15px 3px;}
#aboutUs ul {list-style: disc; margin: -22px 0 24px 100px;}
.you {background: #FFFF00; color: #444; margin-right: 6px;}
.us {background: #eee; color: #444; float: left; margin: 16px 10px 30px 10px; width: 30px;}

/*Code*/
#code p, #code li {font-size: 14px; line-height: 1.5em;}
#code h1 {background: url(../images/h_back2.gif) repeat-x; font-size: 36px; height: 50px; margin: 20px 0 0 0; padding: 7px 12px;}
#code p {margin-bottom: 12px;}
#code p a {background: #eee; border-bottom: #999 1px solid; border-right: #999 1px solid; color: #444; padding: 0px 2px;}
#code p a:hover {background: #FFFF00;}

/*home*/
#home {}
#home li {float: left; margin-right: 12px; min-height: 200px; width: 152px;}
#home h1 {color: #888; font: italic 100 38px Georgia, serif; height: 50px; margin: 35px 10px 50px 10px;	text-align: center;}
.shade {background: #eee;}

/*404*/
#fourOhFour {text-align: center;}
#fourOhFour h1 {color: #888; font: italic 100 38px Georgia, serif; margin: 10px 0 40px 0;}

/*Off Air*/
#offAir {background: #232124;}
#offAir img {margin: 50px auto; display: block;}
#offAir h1 {color: #eff1f0; font: italic 100 38px Georgia, serif;	text-align: center;}