/* ------------------------------ 
PAGE STRUCTURE 
------------------------------ */

/* 
#container has an absolute width (780 pixel) 
The width of inner elements is set to auto,
in this way all inner elements have the same 
width of the element which contains them 
*/


#container{
background-color:#FFFFFF;
padding: 10px;
width:780px;
position:relative;
margin-left: auto;
margin-right: auto;

}
#topbar{
width:auto; 
display:block; 
height:120px;
margin-left: auto;
margin-right: auto;
}

#main{width:auto; 
display:block;
margin-left: auto;
margin-right: auto;
	min-height:400px;
}

#quiz{
width:250px; 
display:block;
margin-left: auto;
margin-right: auto;
}

#quiz{
include-source: url("http://www.cnn.com"); 
}



#column_left{width:760px; margin-right:20px; float:left;}


/* 
div.spacer, solve an issue with #container height
in css 2 column layout. 
*/

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; height:24px;}


#navbar{

font-size:14px;
color:#000080;
background:#4169E1;
font-weight:bold;
padding:6px;
overflow:auto;
height:1%;
clear:both;
margin-left: auto;
margin-right: auto;
}
#navbar a:hover {background-color:#FFFFFF}

   #navbar a{
   color:#3b5d14;
   text-decoration:none;
   margin:0 10px;
   height:23px;
   line-height:23px;
   float:left;
   display:block;
   }
   
   
   a.active{
   height:23px;
   line-height:23px;
   background:url(pics/pic/tb_a.png) right top no-repeat;
   padding-right:5px;
   }

   a.active span{
   background:url(pics/pic/tb_span.png) left top no-repeat;
   height:23px;
   display:block;
   padding-left:5px;
   }

#middlebar{
font-size:12px;
color:#3b5d14;
background:#90b557;
font-weight:bold;
padding:6px
overflow:auto;
height:1%;
clear:both;
}

#middlebar a:hover {background-color:#66CC33}

#middlebar a.active{
   height:23px;
   line-height:23px;
   background-color:#66CC33}
		

#middlebar a{
color:#3b5d14;
text-decoration:none;
text-align: center;
margin:0 5px;
padding-right:10px;
height:23px;
line-height:23px;
display:block;
float:left;
background:url(pic/mb_a.png) right top no-repeat;
}

   a.sub{
   height:23px;
   line-height:23px;
   background:url(pic/mb_a.png) right top no-repeat;
   padding-right:10px;
   }

   a.sub span{
   background:url(pic/mb_span.png) left top no-repeat;
   height:23px;
   display:block;
   padding-left:10px;
   } 



.menu
{
width: 10em; 
height: 2em;
font: 18px arial;
color:#ffffff;
font-weight: bold;
text-align: center;
vertical-align: center;
background-color: #000060;
}


.closed{
background:RoyalBlue;
}

h1
{ 
text-align: center;
font: 32px arial;
font weight: bold;
}

h2
{ 
text-align: center;
font: 24px arial;
}

h3
{ 

text-align: center;
font: 18px arial;
}

h4
{ 
text-align: left;
padding-left: 1cm;
padding-right: 1cm;
font: 16px arial;
line-height: 135%
}


p
{
text-align: left;
font: 16px arial;
line-height: 135%
}


.imageleft
{

padding: 5px;
border: 1px solid blue;
float: left;
font: 10px;
}

.imageright
{
padding: 5px;
border: 1px solid blue;
float: right;
font: 10px;
}





/*popup login*/
div.sample_popup { z-index: 1; }

div.sample_popup div.menu_form_header
{
  border: 1px solid black;
  border-bottom: none;

  width: 200px;

  height:      20px;
  line-height: 19px;
  vertical-align: middle;

  background: url('form_header.png') no-repeat;

  text-decoration: none;
  font-family: Times New Roman, Serif;
  font-weight: 900;
  font-size:  13px;
  color:   #206040;
  cursor:  default;
}

div.sample_popup div.menu_form_body
{
  width: 200px;
  border: 1px solid black;
  background: url('form.png') no-repeat left bottom;
}

div.sample_popup img.menu_form_exit
{
  float:  right;
  margin: 4px 5px 0px 0px;
  cursor: pointer;
}

div.sample_popup table
{
  width: 100%;
  border-collapse: collapse;
}

div.sample_popup th
{
  width: 1%;
  padding: 0px 5px 1px 0px;

  text-align: left;

  font-family: Times New Roman, Serif;
  font-weight: 900;
  font-size:  13px;
  color:   #004060;
}

div.sample_popup td
{
  width: 99%;
  padding: 0px 0px 1px 0px;
}

div.sample_popup form
{
  margin:  0px;
  padding: 8px 10px 10px 10px;
}

div.sample_popup input.field
{
  width: 95%;
  border: 1px solid #808080;

  font-family: Verdana, Sans-Serif;
  font-size: 12px;
}

div.sample_popup input.btn
{
  margin-top: 2px;
  border: 1px solid #808080;

  background-color: #DDFFDD;

  font-family: Verdana, Sans-Serif;
  font-size: 11px;
}