#global {

/*top  container centered horizontally, 10px from the top*/

     position:absolute;
     left: 50%; 
      top:50%;    
     width: 700px;
     height: 335px; 
     margin-top: -167px; /* half of the height */
     margin-left: -350px; /* half of the width */
text-align: left;

     }


body {
     margin: 0; /* to avoid margins */
     text-align: center; /* to correct the centering IE bug*/
    padding:0; 
    /*background:#FFF;*/
background: gray url(images/tlo2.gif);

    /*Notice that we need to set the padding because Opera's default is not zero. Also, we set the background color to white, because Netscape 6 for the Macintosh defaults to a background color of gray.  */
font: normal small verdana, arial, helvetica, sans-serif;
 }

.red {color:red;}
.lblue {color: #003366;font-weight:bold;} /*color for e*/
#header h2 { margin: 0px;padding-left: 5px; padding-top: 5px; font-size: 10px; font-weight: bold; color: #336699;} /*nav line with links*/
#header h3 {  margin: 0px;padding-left: 5px; font-size: 10px; color: #555; } /*hazards monitor*/
#header h1 {  margin: 0px;padding-left: 53px; font-size: 20px; color: #336699; }
p {font: normal 11px Arial, Verdana,  sans-serif; margin:1px;padding-left:12px;padding-top:6px;padding-right:5px;}

#controls p { margin:0px;padding-left:12px;padding-top:4px;padding-right:5px;}

a { text-decoration: none; padding: 0px; margin: 0px;}
#link a:link    {  color: gray; }
#link a:visited { color: gray; }
#link a:hover { color: red;} 
#link a:active {color: gray; } 

#controls a:link    {  color: black; }
#controls a:visited { color: black; }
#controls a:hover { color: red;} 
#controls a:active {color: black; } 


#output a:link    {  color:black; }
#output a:visited { color: black; }
#output a:hover {  color: red;} 
#output a:active {color: black; } 


.blue {color: #336699;font-weight:bold;}
.gray {color:#808080; }

/* main divs */

#topbar{
position:absolute;
top:0px;
left:0px;
width:698px;
height:30px;
background-color: black;
background: gray url(images/ytp_top_bl.gif);
border-left: 1px solid gray;
border-top: 1px solid gray;
border-right: 1px solid gray;
/*border-bottom: 1px solid navy;*/


}


#main {
position:absolute;
left:0px;
top:30px;
width:452px;
height:285px;
border-left:1px solid gray;
background: black;
color:white;

}

#output{
position:absolute;
left:450px;
top:70px;
margin: 0px;
width:248px;
height:225px;
overflow:auto;
/*border: 1px solid gray;*/
/*border-top: white;*/
/*border-bottom: 1px solid navy;*/
border-left: 1px solid navy;
border-right: 1px solid gray;

/*border-top:8px solid red;*/
background-color: orange;
}

#controls {
position:absolute;
left:451px;
top:290px;
margin: 0px;
width:247px;
height:25px;
/*border: 1px solid gray;*/
/*border-top: red;*/
/*border-bottom: 1px solid navy;*/
border-left: 1px solid gray;
border-right: 1px solid gray;
/*display: none; */

/*border-top:1px solid red;*/
background-color: #E0E0E0;
}

#botbar{
position: relative;
top:315px;
left:0px;
width:698px; 
height:19px; 
font-size:10px;
background-color: black;
background: gray url(images/ytp_bot_bl.gif);
border-left: 1px solid gray;
border-bottom: 1px solid gray;
border-right: 1px solid gray;
}




/* static tabs section*/

#tabsdiv {
position:absolute;
top:30px;
left:451px;
width:247px;
height:260px;
background: black;
border-right: 1px solid gray;
border-left: 1px solid gray;
}

#anch3{
position:absolute;
top:0px;
left:0px;
width:246px;
height:20px;
/*background-color: yellow;*/
/*background:  url(images/ytp_but_bl.gif) repeat-x;*/
/*border-right: 1px solid gray;
border-left: 1px solid gray;*/
}



.navtabconfig  {
font: 11px Arial, Verdana,  sans-serif;
width: 100%; /*leave this value as is in most cases*/
}

.navtabconfig  ul{
margin: 0;
padding: 0;
float: left;
left:1px;
/* width: 100%; width of menu*/
border-top: 1px solid gray; /*border*/
/*border-left: 1px solid gray; *//*left border on the first tab*/
/*background: blue;*/
/*background: black url(../images/indentbg.gif) center center repeat-x;*/
}

.navtabconfig  ul li{
display: inline;

}

.navtabconfig  ul li a{
float: left;
color: white; /*text color*/
/*padding: 0px 08px;*/
text-decoration: none;
border-right: 1px solid gray; /*navy divider between menu items*/
background: blue url(images/ytp_but_bl.gif);
}



.navtabconfig ul li a:visited{
color: white;
}


.navtabconfig ul li a:hover {
/* background: gray; forget it, doesn't work once clicked and changed to green inline*/ 
/*color: blue;*/
color: white;
text-decoration: underline;
}


.navtabconfig3  ul li a{
padding: 3px 10px;
border-bottom: 1px solid white;
background: blue url(images/ytp_but_bl.gif);
}


#tab10,#tab11,#tab12
{
position:absolute;
top:51px;
left: 451px;
margin: 0px;
display: none;
width:247px;
height:244px;
background:white;
border-left: 1px solid gray;
border-right: 1px solid gray; 
}




/* display list of videos in playlist tab  */
#searchResultsVideoList
{
position:absolute;
top:40px;
left: 0px;
margin: 0px;
width:235px;
height:200px;
padding-left:5px;
padding-right:5px;
background:white;
/*border-right: 1px solid gray; */
overflow: auto;
font-size:10px;
}

#searchResultsVideoList a {font-size:10px; line-height:11px;  display:inline-block;}
#searchResultsVideoList a:link {color:gray;}
#searchResultsVideoList a:visited {color:gray;}
#searchResultsVideoList a:hover {color:red;}
#searchResultsVideoList a:active {color:gray;}


/* display navigation button in playlist tab  */
#searchResultsNavigation
{
position:absolute;
top:5px;
left: 5px;
margin: 0px;
width:120px;
height:22px;
background:white;
}

/* display counters in playlist tab  */
#searchResultsCount{
  position:absolute;
top:5px;
left: 127px;
margin: 0px;
height:22px;
width:115px;
background:white;
color:gray;
font-size:10px; 
padding-top:3px;
}




/* display information for currently playing video Tab11 */
#videoInfo{
overflow: auto;
width:235px;
height:235px;
background:white;
font-size:10px; 
padding-left:5px;
padding-right:5px;
}

/* display playlist category */
.playlistCat
{
border-bottom: orange solid 1px;
cursor: pointer;
}

/* display category list */
.categoryList
{
border-bottom: orange solid 1px;
cursor: pointer;
}

/* display error message */
#error_msg {
position: absolute;
top: 80px;
left: 90px;
/*display: none;*/
visibility: hidden;
/*visibility:visible;*/
background: white;
border: solid 2px red;
width: 248px;
height: 50px;
z-index: 100;
color:red;
padding:10px;
font-size:12px;
}




/* display playlist category in More tab */
#publicPlaylists {
position:absolute;
top: 100px;
left: 25px;
/*border: solid 1px red;*/
font-size:11px;
}


/* this on not required? */
#static
{
position:absolute;
top:20px;
margin: 0px;
width:246px;
height:20px;
/*border: 1px solid gray;*/
/*border-top: white;*/
/*border-bottom: 1px solid navy;*/
border-left: 1px solid navy;
border-right: 1px solid gray;
/*border-top:8px solid red;*/
background-color: white;
}



/* end static tabs section */


/* search related div and formatting */

#input {
position:absolute;
top:25px;
left:10px;
}


/* search input */
#yts {
 background-color: #ffffff;
color: gray;
height: 13px;
font-size: 10px;
width:220px;
}

#button
{

height: 18px;
font-size: 10px;
color: #000;
border: 2px outset #d7b9c9
}

/* div*/
#buttons {
position:absolute;
top:60px;
float:left;
left:80px;

}


/* back and next buttons */

#previousPageButton {color:black;}




/* secondary divs */


#videoPlayer {
font-size: 11px;
padding:10px;
}


#logo {
position:absolute;
top:6px;
left:15px;
height:18px;
width:18px;
/*background:black;*/

}

#mtitle {
position:absolute;
top:6px;
left:37px;
height:18px;
width:650px;
/*background:gray;*/
color:white;
font-weight:bold;
font-size:14px;
/*padding-top:2px;*/
}


/* stats not showing...*/
#stats {
position:absolute;
top:3px;
left:15px;
height:15px;
width:100px;
background:red;
}


/* display player stats*/

#pl_stats{
position:absolute;
top:2px;
left:15px;
height:15px;
width:150px;
color:white;

}


/* div with play option selection*/
#fn {
position:absolute;
top:2px;
left:230px;
height:15px;
width:200px;
color:white;
/*background:gray;*/
}

/* div with play option selection buttons*/
#fnb {
position:absolute;
top:-1px;
left:300px;
height:15px;
width:200px;
/*background:red;*/
}


/* website link*/
#link {
position:absolute;
top:3px;
left:540px;
height:15px;
width:150px;
/*background:red;*/

}



/*for FF to remove outline on selected!!!*/
a{
-moz-outline-style:none;
}


#player_text {
position:absolute;
left:0px;
top:0px;
width:452px;
height:262px;
background: black;
color:white;
/* padding:10px; cannot have padding because of img output! */
font-size:10px;

}

#player_text p {padding:10px;}

#player_text a { text-decoration: underline; padding: 0px; margin: 0px;}
#player_text a:link    {  color: gray; }
#player_text a:visited { color: gray; }
#player_text a:hover { color: red;} 
#player_text a:active {color: gray; } 

#error_out {
position: absolute;
top: 80px;
left: 90px;
/*display: none;*/
visibility: hidden;
/*visibility:visible;*/
background: white;
border: solid 2px red;
width: 248px;
height: 50px;
color:red;
padding:10px;
font-size:12px;

}