/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Filename: idaho.css
* Version: 1.0.0 (2009-03-30)
* Website: http://gays.com/idaho/
* Author: Olaf Helmig
* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* _basic reset
==========================================*/
*{
  margin: 0;
  padding: 0;
}
:focus{ 
  outline: 0; 
}
html,
body{
  height: 100%;
  width: 100%;
}
body{
	color: #333;  
  font: normal normal 100%/1.5 Arial, Tahoma, Helvetica, sans-serif;   
  font-size: 12px;   
  text-align: center;      
  background: #fff url(/idaho/images/html_bg.gif) repeat-x top left;  
}
/*ie6 hack hover everything */
* html body { behavior:url(/css/hover.htc);}
ol, ul { list-style: none; }
ol.ordered
{
	list-style-type:decimal;
	padding-left: 20px;
}
img{ 
  border: 0px;
  display: block;
}
a{
  text-decoration: none;    
}
.clearer{
  clear: both;
  display: block;
  height: 1px;
  margin-bottom: -1px;
  font-size: 1px;
  line-height: 1px;
}
.clearfix:before {
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE5/Mac \*/
* html .clearfix {height: 1px;}
.clearfix {display: block;}
/* End hide from IE5/Mac */
.truncate{ overflow: hidden;}
/* _page
==========================================*/
#page{
  width: 990px;      
  margin: 0 auto;         
  text-align: left;    
  position: relative;      
}
/* _header
==========================================*/
#header{
  width: 990px;
  height: 160px;    
  padding-top: 10px;
}
#header h1{
  width: 320px;
  height: 160px;
  background: url(/idaho/images/logo_artikel3.png) no-repeat top left;
  float: left;
}
/* _navigation (main navigation)
==========================================*/
#navMain{  
  position: absolute;
  top: 105px;
  left: 400px;    
}
#navMain li{
  float: left;
  position: relative;
}
#navMain li a{
  color: #666;    
  display: block;
  text-transform: uppercase;  
  padding: 5px;
  margin-right: 5px;
  /*-moz-border-radius: 12px;
  -webkit-border-radius: 12px;*/  
}
#navMain li.ACT a,
#navMain li:hover a{
  color: #fff;
  background: #333;
}
#navMain li.ACT ul{
  display: block;
}
/* 2nd level */
#navMain ul{
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  padding-top: 10px;
  width: 250px;    
}
#navMain li:hover ul{
  display: block;
}
#navMain ul li a{    
  padding: 4px 5px;
  margin-bottom: 1px;
  background: none !important;
  font-size: .875em;  
  color: #999 !important;
}
#navMain ul li.ACT a,
#navMain ul li:hover a{
  background: #ccc !important;  
  color: #333 !important;
}
/* _navigation (share navigation)
==========================================*/
#navShare{
  position: absolute;
  top: 20px;
  right: 0;  
}
#navShare li{
  float: right;
}
#navShare li a{
  display: block;
  text-indent: -9999px;  
  width: 24px;
  height: 24px;
  margin-left: 5px; 
}
/* share social network buttons upper right corner */
#nsTwitter a{ background: url(/idaho/images/icon_twitter_small.gif) no-repeat top left; }
#nsFacebook a{ background: url(/idaho/images/icon_facebook_small.gif) no-repeat top left; }
#nsMyspace a{ background: url(/idaho/images/icon_myspace_small.gif) no-repeat top left; }
/* small copy write */
#nsText{
  clear: both;
  float: none !important;
  text-align: right;
  font-size: .875em;
}
/* _content-Wrapper
==========================================*/
#content-Wrapper{
  width: 990px;
  float: left;     
}
/* _content-Main
==========================================*/
#content-Main{
  width: 990px;
  padding-top: 20px;
  height: 420px; /* what happens when the content changes dynamcially ? */
  float: left;    
}
#content-Main p a,
#content-Sub p a{
  font-weight: bold;
  color: #333;
}
/* video container */
#content-Main #video{
  float: left;    
  width: 640px;
  height: 385px;  
}
/* what text */
#content-Main #txtWhat{
  width: 310px;
  padding: 10px 20px 15px 20px;
  float: left;
}
#content-Main #txtWhat p{
  padding: 10px 0 0 10px;
}
/* submit your video button */
#submitVideo{  
  display: none;
  visibility: hidden;
  width: 226px !important;
  height: 52px;    
  background: url(/idaho/images/btn_submitvideo.png) no-repeat top left !important;    
  float: left; 
  position: relative;
  left: 30px;
  top: 0; 
}
#submitVideo span{
  color: #666;
  font-size: .875em;
  font-weight: bold;
  position: absolute;
  top: 55px;
  right: 10px;
}
/* network share buttons */
#content-Main #txtSpread{
  width: 290px;  
  float: left;
}
/* video container small (spread the word page) */
#content-Main #videoSmall{
  float: left;    
  width: 480px;    
}
#content-Main #videoSmall p{
  padding-top: 8px;
}
#content-Main #videoSmall input{
  width: 476px;
}
#content-Main #videoSmall textarea{
  width: 476px;
  height: 40px;
}
/* mailform container */
#content-Main #mailVideo,
#content-Main #mailVideoSuccess{
  float: right;
  width: 450px;      
}
#content-Main #mailVideo form{  
  float: left;
  width: 100%;
}
#content-Main #mailVideo form ul{
  float: left;  
}
#content-Main #mailVideo form ul li{
  float: left;
  width: 225px;
  padding-top: 10px;    
}
/* width exceptions for the recipients */
#content-Main #mailVideo form ul li.recipients{
  width: 429px;
}
#content-Main #mailVideo form ul li label{
  display: block;
  font-weight: bold;
}
#content-Main #mailVideo form ul li input{
  width: 200px;
  margin-top: 5px;
}
#content-Main #mailVideo form ul li.recipients input{
  width: 425px;
}
/* msg body */
#content-Main #mailVideo form ul li#msgBody{
  width: 450px !important;
  padding-top: 10px;
}
#content-Main #mailVideo form ul li p{
  width: 415px;
  height: 120px;
  padding: 5px;
  float: left;    
  background: #fff;
  border: 1px solid #a5acb2;
  overflow: auto;
}
/* submit button */
#content-Main #mailVideo form ul li input#submit{
  width: auto;
  background: #333;
  border: 1px solid #aaa;
  border-color: #fff #aaa #aaa #fff;
  color: #fff;
  padding: 5px;
  font-size: .875em;
  cursor: pointer;
  float: right;
  margin: 10px 22px 0 0;
}
#content-Main #mailVideo form ul li input#submit:hover{
  border-color: #aaa #fff #fff #aaa;
  color: #333;
  background: #fff;
}
/* form_error */
.form_error{
  width: 429px !important;
  margin-bottom: -10px;  
}
.form_error span{
  width: 100%;  
  float: left;      
  background: #d0530f;  
  position: relative;
  z-index: 10;    
  text-align: center;
  color: #fff;
  font-weight: bold;
}
/* send successful */
#content-Main #mailVideoSuccess p{
  padding: 10px 0 0 10px;
}
/* _content-Sub
==========================================*/
#content-Sub{
  width: 990px;
  float: left;
  padding: 20px 0;  
}
#content-Sub #txtHow,
#content-Sub #txtTips{
  width: 370px;
  float: left;
  padding-right: 20px;    
}
#content-Sub #txtHow p{
  padding: 10px 0 0 10px;
}
#content-Sub #txtTips a{
  color: #333;
}
#content-Sub #txtTips a:hover{
  color: #cc0000;
}
/* tips */
#content-Sub #txtTips ul{
  list-style-type: square;
  padding: 10px 0 0 30px;
}
/* spread */
#content-Sub #txtSpread{
  width: 210px;
  float: left;  
}
/* share network icons */
#txtSpread ul{
  margin-top: 10px;
  padding-left: 10px;
  width: 200px;
  float: left;  
}
#txtSpread ul li a{
  color: #999;
  padding: 15px 0 0 60px;
  width: 140px;
  height: 55px;  
  display: block;
}
#txtSpread ul li a:hover{
  color: #333;
}
#txtSpread li#shareTwitter{ background: url(/idaho/images/icon_twitter.gif) no-repeat top left; }
#txtSpread li#shareFacebook{ background: url(/idaho/images/icon_facebook.gif) no-repeat top left; }
#txtSpread li#shareMyspace{ background: url(/idaho/images/icon_myspace.gif) no-repeat top left; }
/* spread EXCEPTION on the spread the word page */
#content-Sub #txtSpread.exception{
  width: 990px;
  float: left;
  margin-top: 40px;  
  padding-top: 30px;
  border-top: 1px dotted #888;
}
/* share network icons */
#txtSpread.exception ul{
  margin-top: 10px;
  padding-left: 10px;
  width: 980px;
  float: left;  
}
#txtSpread.exception ul li{
  float: left;
}
/* WHY */
#content-Sub #txtWhy{
  width: 380px;
  float: left;
}
#content-Sub #txtWhy p{
  padding: 10px 0 0 10px;
}
/* martyrs */
#content-Sub #martyrs{
  width: 610px;  
  float: left;    
}
#content-Sub #martyrs ul{
  width: 552px;
  float: right;
}
#content-Sub #martyrs ul li{
  float: left;
  padding: 0 0 8px 8px;  
}
#content-Sub #martyrs ul li a{}
#content-Sub #martyrs ul li a img{
  border: 1px solid #aaa;
}
#content-Sub #martyrs ul li a img:hover{
  border: 1px solid #666;
}
/* SUBMIT your video recorder + uploader container */
#HolderRecorder,
#HolderUploader{
  width: 990px;
  float: left;  
  position: relative;
  z-index: 1;
}
/* farnsworth recorder */
#flashRecorder{
  padding-top: 10px;
  width: 380px;
  height: 323px;
  position: relative;
  z-index: 0;
  float: left;          
}
#flashRecorderTips{
  float: left;
  width: 450px;
  padding-left: 20px;
}
	

#uploaderTips{
  float: left;
  width: 520px;
  padding-left: 20px;
}

#recorderIframe
{
	width: 425px; 
	height: 359px;
	float: right;
	background-color: #FF0000;
}

#flashRecorderTips p,
#uploaderTips p{
  padding: 10px 0 10px 10px;
  font-size: 1.125em;
}
#flashRecorderTips p span{
  font-size: .875em;
}
#HolderRecorderInfo{
  width: 280px;
  padding: 20px;
  border: 10px solid #ccc;
  background: #000;
  color: #fff;  
  z-index: 100;
  text-align: left;  
}
#HolderUploader ul,
#HolderRecorderInfo ul{
  width: 300px;
  padding: 10px;
  float: left;  
}
#HolderUploader ul li,
#HolderRecorderInfo ul li{
  float: left;
  width: 100%;
  padding-top: 5px;
}
#HolderUploader ul li label,
#HolderRecorderInfo ul li label{
  display: block;
  font-weight: bold;
}
#HolderUploader ul li input,
#HolderRecorderInfo ul li input{
  width: 250px;
}
/* location */
#HolderUploader ul li select,
#HolderRecorderInfo ul li select{
  width: 254px;
}
#HolderUploader ul li input.btnSubmit,
#HolderRecorderInfo ul li input.btnSubmit{
  width: auto;
  background: #333;
  border: 1px solid #aaa;
  border-color: #fff #aaa #aaa #fff;
  color: #fff;
  padding: 5px;
  font-size: .875em;
  cursor: pointer;
  /*-moz-border-radius: 12px;
  -webkit-border-radius: 12px;*/
}
#HolderUploader ul li input.btnSubmit:hover,
#HolderRecorderInfo ul li input.btnSubmit:hover{
  border-color: #aaa #fff #fff #aaa;
  color: #333;
  background: #fff;
}
#HolderRecorderInfo ul li input.btnCancel{
  width: auto;
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
}
/*  */
#HolderUploader ul li span{
  font-size: .875em;
  color: #666;
  display: block;
  padding-bottom: 10px;
}
/* recorder info copy writing */
#recorderTips{
  width: 300px;
  padding: 10px 0 0 20px;
  float: left;
  list-style-type: square;
}
#recorderTips li{}
/* progress bar for uploader */
#HolderUploaderProgress{
  width: 160px;
  padding: 20px;
  border: 10px solid #ccc;
  background: #000;
  color: #fff;
  font-weight: bold;  
  z-index: 100;
  text-align: center;  
}
/* alternative upload link (style is on the p tag) */
.altSubmit{
  border: 1px solid #999;
  /*-moz-border-radius: 12px;
  -webkit-border-radius: 12px;*/
}
/* MAIL */
#HolderMail p{
  padding: 10px 0 0 10px;
}
#HolderMail a{
  font-weight: bold;
  color: #666;
}
/* SPREAD - banners */
#banner{
  width: 990px;  
  float: left;    
}
#banner .col1{
  float: left;
  width: 650px;  
}
#banner .col2{
  float: left;
  width: 320px;  
}
#banner p{
  padding: 10px 0 0 10px;    
  font-size: 1.25em;  
}
/* banner container */
#banner div{
  padding: 5px 10px 0 0;
  float: left;
}
#banner div.clearer{ padding: 0 !important; }
/* embed link displayed in textarea */
#banner input{
  font-size: .875em;
  color: #aaa;  
}
#banner img{
  border: 1px solid #aaa;
}
#banner img:hover{
  border: 1px solid #333;
  cursor: pointer;
}
#banner #b150x200{ width: 150px; }
#banner #b150x200 input{ width: 146px; }

#banner #b180x150{ width: 180px; }
#banner #b180x150 input{ width: 176px; }

#banner #b125x125{ width: 125px; }
#banner #b125x125 input{ width: 121px; }

#banner #b100x100{ width: 100px; }
#banner #b100x100 input{ width: 96px; }

#banner #b468x60{ width: 468px; }
#banner #b468x60 input{ width: 464px; }

#banner #b120x60{ width: 120px; }
#banner #b120x60 input{ width: 116px; }
/* banner size (nr.displayed) */
#banner span{  
  color: #666;
  font-size: .875em;
  text-align: center;
  display: block;  
}
/* textarea  */
#bannerCode{
  width: 290px;
  height: 130px;
  margin: 5px 0 20px 10px;
}
/* FAQ */
#txtFAQ{
  width: 800px;
}
#txtFAQ p{
  width: 790px;
  padding: 10px 0 0 10px;
  float: left;
}
#txtFAQ strong{
  display: block;
}
#txtFAQ ul{
  list-style-type: square;
  padding-left: 30px;
  float: left;
  width: 770px;
}
#txtFAQ ul li{
  width: 100%;
}

/* _footer
==========================================*/
#footer{
  width: 990px;
  float: left;
  border-top: 1px dotted #888;
  margin-top: 20px;
}
#footer p{
  padding: 20px;
  font-size: .875em;
  color: #888;
}
#footer a{
  color: #666;
}