body{margin:0; padding:0; background:url(images/bg.gif) repeat-x #779bcb; font-family:Arial, Helvetica, sans-serif;}

#wrapper{margin:20px auto; position:relative; border:1px solid #333; width:1000px;  background:#dfdfdf; }
#header{height:250px;}

#header #logotype{position:relative; top:-240px; left:130px; margin:0px; padding:0;  }
#header h2{float:left; margin:-70px 0 0 150px; padding:0; width:400px; height:20px; background:red; font-size:100%; color:#fff; }
#logo{position:relative; top:-140px; left:-740px;}



#puzzle{position:absolute; top:0px; left:750px; width:250px; height:250px; margin:0; }

#blue a{position:absolute; top:0; right:0; height:126px; width:153px; display:block; background:url(images/blue.png) 0 135px  ;}
#blue a:hover{background:url(images/blue.png) 0 0 ;}
#red a{position:absolute; top:0; left:0; height:153px; width:126px; display:block; background:url(images/red.png) 0 153px ;}
#red a:hover{background:url(images/red.png) 0 0 ;}
#green a{position:absolute; bottom:0; left:0; height:124px; width:153px; display:block; background:url(images/green.png) 0 133px ;}
#green a:hover{background:url(images/green.png) 0 0 ;}
#yellow a{position:absolute; bottom:0; right:0; height:152px; width:125px; display:block; background:url(images/yellow.png) 0 152px ;}
#yellow a:hover{background:url(images/yellow.png) 0px 0px ;}



#content{ background:url(images/cont.png) top right no-repeat; margin:0;}
#cont_left{width:690px; padding:0 20px 0 0; margin:0px 0 10px 20px; float:left; text-align:justify; border-right:1px dotted #666; color:#00c;}
#cont_right{width:230px; margin:0px 20px 10px 0; float:right;}

/*#cont_right .box{border:2px solid #f90; background:#fff; padding:10px; margin:10px 0 0 0; }*/
#cont_right .box{border-bottom:1px dotted #666; padding:10px; margin:10px 0 0 0; }
#cont_right .box{font-size:80%;}
#cont_right .box h2{font-size:100%; margin:0; padding:0;}
#cont_right .box ul{margin:0; padding:5px 0 0 10px;}
#cont_right .box a{color:#000; border-bottom:1px dotted #000; text-decoration:none;}
#cont_right .box a:hover{border-bottom:1px solid #000;}
.logos{border:1px solid #ccc; background:#fff; text-align:center;}
.logos .badges{margin:3px 30px;}
.logos img{margin:3px 15px;}

.links{clear:both; border-bottom:1px dotted #666; margin:0 10px 10px 10px; padding:5px 10px;}
.links img{float:right; margin:0 0 5px 10px;}

#nav{line-height:30px; background:#666; height:30px; width:1000px; font-family:Arial, Helvetica, sans-serif; border:1px solid #333; border-width:1px 0; margin:0; }
#nav, #nav ul { /* all lists */ padding:0; margin:0; list-style: none; }
#nav a { display: block; width: 100px; color:#fff; font-size:70%; font-weight:bold; text-decoration:none;}
#nav a:hover {color:#000; background:#ccc;}
#nav li { /* all list items */float: left; width: 100px; /* width needed or else Opera goes nuts */ text-align:center;}
#nav li ul { /* second-level lists */ position: absolute; background: #666; width: 100px; left: -999em; border:1px solid #333; border-width:0 1px 1px 1px; /* using left instead of display to hide menus because display: none isn't read by screen readers */}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */left: auto;}

#foot{ background:#999; height:60px;}
#foot p.right{float:right; margin:0 10px 0 0; }
#foot p.left{float:left; margin:0 10px 0 10px; }
#foot p{ padding:0; color:#fff; font-size:70%; line-height:10px; margin:5px 10px 0 10px; }
#foot p a{text-decoration:none; color:#e1e1e1; border-bottom:1px dotted #e1e1e1;}
#foot p a:hover{color:fff; border-bottom:1px solid #fff;}
.big{font-size:170%; color:#f90; text-align:center; height:40px; clear:both;}
.big a{border-bottom:2px dotted #f90;  text-decoration:none; color:#f90;}
.big a:hover{border-bottom:2px solid #f90; }
.clear{clear:both;}

form{width:500px; margin:0 10px 20px 0 ; padding:0px; border:1px solid #666; }
form h2{ font-size:120%; border-bottom:1px solid #666; padding:5px 0 5px 20px; margin:0; background:#d1d1d1;}
label{width:200px; float:left; text-align:right; margin:7px 5px 0 0px;  padding-top:0px; font-size:80%; position: relative;}
input, select {width:250px; float:left; margin:5px -3px 3px 3px;}
textarea{width:440px;  margin:10px 0 10px 20px ; height:100px; clear:both;}
.button{width:100px; float:right; margin-right:30px }
.mandatory{color:#f00; }
.long{width:400px; text-align:left; margin:0 0 0 20px; }