/*	----------------------------------------------------------------------------
	
	CSS for PGA Pipeline
	Contact: timothy.gray@turner.com
	
	----------------------------------------------------------------------------
	
	1.	Globals
	2.	Links
	3.	Structure
		A.	Foundation
		B.	Left Column
		C.	Video Player (additional styles in video_player.css)
		D.	Right Column
		E.  Footer
	4. Overlay		
			
	----------------------------------------------------------------------------
	(1) GLOBALS
	--------------------------------------------------------------------------*/
	
	* {
		margin: 0;
		padding: 0;
		}
	
	html, body {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		background: #202020;
		font-family:"Lucida Grande", Verdana, sans-serif;
		color: #212121;
		}
	
	a img {
		border: none;
		}
			
    h1 {
		font: 12px/1.3em "Lucida Grande", Verdana, sans-serif;
		font-weight: bold;
		padding: 5px 0;
		}

	h2 {
		font: 11px/1.3em "Lucida Grande", Verdana, sans-serif;
		}
		
	h3 {
		font: 12px/1.3em "Lucida Grande", Verdana, sans-serif;
		font-weight: bold;
		padding: 10px 0 6px 0;
	    }

	ul li {
		list-style: none;
		}
	

	
/*	----------------------------------------------------------------------------
	(2) LINKS
	--------------------------------------------------------------------------*/
	
	a, a:link, a:visited, a:active, a:hover {
		text-decoration: none;
		color: #000;
		}  


	
/*	----------------------------------------------------------------------------
	(3a) STRUCTURE: Foundation
	--------------------------------------------------------------------------*/   
		
	#application {
		width: 800px;
		height: 719px;
		border: 2px solid #fff;
		background: #e9e9e9;
		text-align: center;
		}   

		
		#content {
			display: block;
			width: 800px;
			height: 378px;
			background: #e9e9e9 url(http://i.a.pga.com/pga/images/events/pipeline/img/background_content.gif) no-repeat;
			overflow:hidden;
			}
		
			#left {
				width: 146px;
				float: left;
				padding: 0 4px 0 5px;
				text-align: left;
				}
				
			#right {
				width: 156px;
				float: right;
				padding: 0;
				overflow:hidden;
				}   
			
	
/*	----------------------------------------------------------------------------
	(3b) STRUCTURE: Left Column
	--------------------------------------------------------------------------*/
			
    #video_tabs {
		width: 146px;
		height: 13px;
		padding: 7px 0 0 0;
		}
		
		#details {
			float:right;
			width:46px;
			height:12px;
			}
	
	#latest_container {
		width: 127px;
		height: 202px;
		padding: 0 9px 0 10px;
		text-align: left;
		}

	#details_container {
		/*position: relative;
		display: none;
		visibility: hidden;*/
		position: absolute;
		top: 90px;
		left: 5px;
		width: 127px;
		height: 202px;
		padding: 0 9px 0 10px;
		text-align: left;
		}
	
		#video_details #permalink {
			position: absolute;
			display: block;
			left: 10px;
			top: 160px;
			width: 110px;
			height: 22px;
			z-index: 99;
			}
	
		#video_details #email_this {
			position: absolute;
			display:block;
			left: 10px;
			top: 180px;
			width: 110px;
			height: 22px;
			z-index: 99;
			}

	#video_email_container {
		position: absolute;
		top: 70px;
		left: 2px;
		width: 153px;
		height: 377px;
		background-color: #fff;
		border: 1px solid #858384;
		border-top: none;
		z-index: 100;
		}

		#video_email {
			position: relative;
			z-index: 100;
			text-align: left;
			padding: 0 7px;
			color: #333;
			}

		#video_email_sending, #video_email_sent {
			padding-top: 150px; 
		    }
		    
		    #video_email_sending input, #video_email_sent input {
    			margin-top: 8px; 
    		    }
	    	
	#fb_email_container {
		position: absolute;
		top: 123px;
		left: 645px;
		width: 155px;
		height: 324px;
		background-color: #fff;
		border: 1px solid #858384;
		border-top: none;
		z-index: 100;
		font-size:8px/.9em;
		}

		#fb_email {
			position: relative;
			z-index: 100;
			text-align: left;
			padding: 5px 7px;
			color: #333;
			}
			
		#fb_email_sending, #fb_email_sent {
			padding-top: 150px;
			}

		    #fb_email_sending input, #fb_email_sent input {
    			margin-top: 8px; 
    		    }
     


/*	----------------------------------------------------------------------------
	(3c) Video Player
	--------------------------------------------------------------------------*/
				
	#video_container {
		display: block;
		float:left;
		margin: 0;
		padding: 0;
		}

    	#video_title {
    		z-index: 1;
    		width: 444px;
    		height: 20px;
    		padding: 12px 12px 0 20px;
    		font-family: "Lucida Grande", Lucida, Verdana, Geneva, Arial, Helvetica, sans-serif;
    		font-size: 11px;
    		color: #fff;
    		font-weight: bold;
    		text-align: left;  
    		}
		
		#video_player {
    		width: 464px;
    		height: 330px;
    		padding: 0 12px 0 12px;
    		margin: 0; 
    		}

	

/*	----------------------------------------------------------------------------
	(3d) Right Column
	--------------------------------------------------------------------------*/ 
			
	#help {
		display: block;
		width: 156px;
		height: 19px;
		}

		#help img {
			width: 156px;
			height: 19px;
			margin-bottom:-1px;
			}



/*	----------------------------------------------------------------------------
	(3e) Footer
	--------------------------------------------------------------------------*/

	#navigation {
		display: block;
		width: 800px;
		height: 162px;
		margin-top:0;
		}

		#get_flash {
			width: 800px;
			height: 40px;
			color: #fff;
			}
	
		#live_feeds {
			padding-left: 100px;
			width: 620px;
			}
		
		#live_feeds li {
			position: relative;
			float: left;
			width: 151px;
			height: 90px;
			padding: 0 0 0 2px;
			color: #ccc;
			text-transform: uppercase;
			text-align: left;
			font-size: 10px;
			background: url(http://i.a.pga.com/pga/images/events/pipeline/img/bg_thumbnail.gif) no-repeat 0 14px;
			}
		
		#live_feeds li img {
			width: 125px;
			height: 70px;
			position: absolute;
			top: 17px;
			left: 3px;
			}
		
	#ad_728_frame {
		position: absolute;
	    bottom: 37px;
		left: 37px;
		width: 728px;
		height: 90px;
		}  
              

/*	----------------------------------------------------------------------------
	(4) Overlay
	--------------------------------------------------------------------------*/
				
	#overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 900px;
		height: 900px;
		min-height: 100%;
		float: left;
		z-index: 9999;
		background: #000;
		}  

	#box {
		position: absolute;
		top: 75px;
		left: 165px;
		width: 400px;
		height: 320px;
		border: 1px solid #444;
		background: #fff;
		z-index: 10000;
		padding: 30px;
		border: 5px solid #c3c3c3;
		} 

	#close {
	    position: absolute;
	    top: 7px;
	    right: 8px;
	    cursor: pointer;
		}
		
	#thanks {
	    padding-top: 145px;
        }

	#registration {
		text-align: left;
		}

	#registration td.label {
		text-align: right;
		padding: 11px;
		width: 80px;
		}

    #registration input.reg {
		width: 200px;
		}

    #registration td.check {
		padding-right: 10px;
		vertical-align: top;
		}