﻿/*=========================
	Initaial Reset
==========================*/
body, html, form, p, ul, li, ol, h1, h2, h3, h4, h5, h6{
	margin: 0;
	padding: 0;
}

body, html{
	height:100%;
	width: 100%;
}

img
{
	border:none;
	margin: 0;
	padding: 0;	
}

body{
	background: #000;
	color: #000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 62.5%;
}

.clearFloats{
	clear: both;
	font-size: 0px;
	height: 0px;
	line-height: 0px;
	margin: 0;
	overflow: hidden;
}

h3{
	font-size: 1.2em;
	line-height: 1.25em;	
}

h4{
	font-size: 1.1em;
	line-height: 1.27em;	
}

a{
	color: #333;
	text-decoration: underline;
}

a:hover{
	color: #333;
	text-decoration: underline;
}

/*=========================
	Page & Columns
==========================*/
.wrapper{
	background: url(../../Images/bg_main.jpg) no-repeat center top #000;
	margin: 0 auto;
	position: relative;
	width: 1086px;
}

#flashContainer, .masterForm{
	width:100%;
	height: 100%;	
}

/*=========================
	Header
==========================*/
.header{
	height: 164px;
	margin: 0 auto;	
	position: relative;
	width: 940px;
}

.facebookPreview{
	display: none;	
}

.header h1{
	font-size: 1.8em;
	font-weight: bold;
	left: 26px;
	position: absolute;
	top: 20px;
}

.header .share{
	height: 16px;
	position: absolute;
	right: 7px;
	top: 5px;
	width: 165px;
}

.header .share img{
	cursor: pointer;
	float: left;
	margin: 0 5px 0 0;	
}

.header ul.nav{
	height: 40px;
	left: 217px;
	list-style: none;
	position: absolute;
	top: 32px;
	width: 608px;
}

.header ul.nav li{
	display: inline;
	float: left;
	list-style: none;
	padding: 0 2px 0 0;
}

.header ul.nav li a:hover img, .header ul.nav li a.selected img{
	opacity:0.00;
	filter:alpha(opacity=00);
	-moz-opacity: 0.00;
	-khtml-opacity: 0.00;
}

.header a.navTale{
	background: url(../../Images/nav_tech_tales.gif) no-repeat left -40px;
	display: block;
	height: 40px;
	overflow: hidden;
	width: 150px;	
}

.header a.navDown{
	background: url(../../Images/nav_downloads.gif) no-repeat left -40px;
	display: block;
	height: 40px;
	overflow: hidden;
	width: 150px;	
}

.header a.navReal{
	background: url(../../Images/nav_real_stories.gif) no-repeat left -40px;
	display: block;
	height: 40px;
	overflow: hidden;
	width: 150px;	
}

.header a.navSub{
	background: url(../../Images/nav_submit.gif) no-repeat left -40px;
	display: block;
	height: 40px;
	overflow: hidden;
	width: 150px;	
}

.header .submitYourOwn{
	bottom: 16px;
	position: absolute;
	right: 44px;
}

/*=========================
	Footer
==========================*/
.footer{
	color: #666;
	font-size: 0.9em;
	line-height: 1.33em;
	height: 14px;
	margin: 0 0 0 190px;
	padding: 20px 0 16px 0;
	text-align: right;
	width: 705px;	
}

.footer img{
	float: left;	
}

.footer a{
	color: #999;
	text-decoration: none;
}

.footer a:hover{
	color: #999;
	text-decoration: underline;
}

/*=========================
	Content
==========================*/
.contentWrapper{
	background: url(../../Images/bg_content_paper.gif) repeat-y;
	margin: 0 0 0 190px;
	padding: 26px 30px 20px 30px;
	position: relative;
	width: 645px;
}

.contentWrapper h2{
	left: 30px;
	position: absolute;
	top: -13px;	
	z-index: 100;
}

.contentWrapper p{
	font-size: 1.1em;
	line-height: 1.27em;
	padding: 8px 0;
	width: 476px;
}

.contentWrapper a{
	color: #00a0e2;
	text-decoration: underline;
}

.contentWrapper a:hover{
	color: #549f0b;
	text-decoration: underline;
}

p.submitIntro{
	padding: 0 0 17px 0;
	width: 645px;
}

p.submitIntro a, p.submitIntro a:hover{
	text-decoration: none;
}

p.meta{
	color: #666;
	padding-top: 0;	
}

p.tcPara{
	padding-bottom: 20px;	
}

ol.tcList{
	font-size: 1.1em;
	line-height: 1.27em;
	margin: 8px 0 20px 0;
	padding: 0 0 0 20px;	
}

ol.tcList li{
	padding: 0 0 5px 0;	
}

/*=========================
	Form
==========================*/
.validation{
	color: #C00;
	font-size: 1.1em;
	line-height: 1.30em;
	padding: 0 0 20px 0;	
}

.validation li{
	width: 218px;	
}

.formHeading{
	color: #333;
	font-size: 1.2em;
	font-weight: bold;	
	padding: 0 0 3px 0;
}

.formHeading span{
	font-size: 0.92em;
	font-weight: normal;	
}

.formItem{
	clear: both;
	padding: 0 0 17px 0;
}

.textInput{
	border: 1px solid #666;
	padding: 5px;
	width: 208px;	
}

.checkInput{
	padding: 10px 0 0 0;	
}

.checkInput input, .checkInputList input{
	clear: both;
	float: left;
	height: 14px;
	margin: 0;
	padding: 0;
}

.checkInput label, .checkInputList label{
	display: block;
	float: left;
	font-size: 1.1em;
	padding: 2px 0 0 5px;
	width: 208px;	
}

.registerForm{
	float: left;
	padding: 1px 0 0 0;
	width: 272px;
}

.registerInfo, .storyInfo{
	float: left;
	padding: 1px 0 0 0;
	width: 373px;
	position:relative;
}

.registerInfo p, .storyInfo p{
	width: 373px;
}

.storyInfo .textInput{
	width: 361px;
}

.storyInfo .textAreaInput{
	border: 1px solid #666;	
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	height: 278px;
	padding: 5px;
	width: 358px;
}

.storyInfo .checkInputList label{
	width: 150px;
}

.downloadSubmit{
	margin: 3px 0 0 0;
}

/*=========================
	Comp Details
==========================*/
.compDetails{
	background: url(../../Images/bg_comp_details.gif) repeat-x top;	
	height: 170px;
	margin: 0 0 0 190px;
	padding: 40px 20px 22px 20px;
	position: relative;
	width: 665px;
}

.compDetails h3{
	color: #000;
	font-size: 1.5em;	
	font-weight: bold;
	line-height: 1.27em;
	padding: 0 0 10px 0;	
}

.compDetails p{
	color: #fff;
	font-size: 1.1em;
	line-height: 1.27em;
	padding: 8px 0;
	width: 344px;
}

.compDetails .detailPic{
	position: absolute;	
	right: 16px;
	top: 0px;
}

.compDetails a{
	color: #fff;	
}

/*=========================
	Downloads
=========================*/
.downloadsList{
	padding: 3px 0 0 0;	
}

.downloadsList .week .weekLabel{
	color: #333;
	float: right;
	font-size: 1.2em;
	line-height: 1.25;
	padding: 5px 0 0 0;
	width: 260px;
}

.downloadsList .week .weekDownloads{
	background-color: #fff;
	border: 1px solid #666;	
	float: left;
	margin: 0 27px 14px 0;
	padding: 7px 14px 10px 14px;
	position: relative;
	width: 328px;
}

.downloadsList .week .weekDownloads td a{	
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.27em;
	text-decoration: none;
}

.downloadsList .week .weekDownloads table{
	margin: 13px 0 0 0;
}

.downloadsList .week .weekDownloads img.speech{
	position: absolute;
	right: -20px;
	top: 13px;
}

.downloadsList .week .weekDownloads h3{
	color: #333;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.25;
	padding: 0 0 3px 0;
}

.downloadsList .week .weekDownloads td{
	padding: 0 0 10px 0;
	text-align: left;
	vertical-align: middle;	
}

.downloadsList .week .weekDownloads td.iconCol{	
	width: 41px;
}

.showHideLink{
	display: none;	
}

/*=========================
	Stories Gallery
=========================*/
.storyGallery{
	float: left; 
	width: 491px;
}

.story .storyLabel{
	color: #333;
	float: right;
	font-size: 1.2em;
	line-height: 1.25;
	padding: 5px 0 0 0;
	width: 106px;
}

.story .storyPanel{
	background-color: #fff;
	border: 1px solid #666;	
	float: left;
	margin: 0 27px 14px 0;
	padding: 7px 14px 10px 14px;
	position: relative;
	width: 328px;
}

.story .storyPanel p{
	width: 100%;
}

.story .storyPanel td a{	
	font-size: 1.1em;
	font-weight: bold;
	line-height: 1.27em;
	text-decoration: none;
}

.story .storyPanel table{
	margin: 13px 0 0 0;
}

.story .storyPanel img.speech{
	position: absolute;
	right: -20px;
	top: 13px;
}

.story .storyPanel h3{
	color: #333;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.25;
	padding: 0 0 3px 0;
}

.story .storyPanel td{
	padding: 0 0 10px 0;
	text-align: left;
	vertical-align: middle;	
}

.story .storyPanel td.iconCol{	
	width: 41px;
}

.showHideStoryLink{
	display: none;	
}

.storyTags{
	float: left;
	position: relative;
	top: -18px;
	width: 154px;
}

.storyTags ul, .storyTags li{
	list-style: none;	
}

.storyTags li{
	padding: 4px 0 0 19px;	
}

.storyTags li a{
	background: url(../../Images/bg_tag_link.gif) no-repeat 0 5px;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	line-height: 1.25;
	padding: 0 0 0 12px;
	text-decoration: none;
}


/*=========================
	Non flash homepage
=========================*/
#nonFlash{
	background: url(../../Images/bg_non_flash.jpg) no-repeat center top;
	height: 383px;
	margin: 0 auto;
	padding: 149px 225px 0 225px;
	position: relative;
	width: 416px;
}

#nonFlash h1{
	left: 226px;
	position: absolute;
	top: 50px;
}

#nonFlash .btnDownload{
	bottom: 164px;
	left: 270px;
	position: absolute;
}

#nonFlash .btnStories{
	bottom: 164px;
	right: 270px;
	position: absolute;
}

#nonFlash p{
	font-size: 1.1em;
	line-height: 1.27em;
	padding: 24px 0;
}


#nonFlash a{
	color: #00a0e2;
	text-decoration: underline;
}

#nonFlash a:hover{
	color: #549f0b;
	text-decoration: underline;
}

#nonFlash .textFooter{
	color: #666;
	margin: 144px auto 0 auto;
	text-align: center;
}

#nonFlash .textFooter a{
	color: #666;	
	text-decoration: none;
}

#nonFlash .textFooter a:hover{
	color: #666;	
	text-decoration: underline;
}