body, h1, h2, h3, h4, h5, h6, p, ol, ul, form, blockquote {
      padding: 0;
      margin: 0;  
}
h1, h2, h3, h4, h5, h6, pre, code {
    font-size: 1em;
}
a { text-decoration: none; }
a img { border: none; }

p { margin: 1em 5px; }
h1 { margin: 5px 5px 1em 5px; }
h2 { margin: 1em 5px; }
ol, ul { margin-left: 4em; }
ol li, ul li { margin-bottom: 1em; }

#homebody { min-width: 650px; }
#homebody li { margin-bottom: 0; }

#container {
  padding-left: 210px;   /* LC fullwidth */
  padding-right: 220px;  /* RC fullwidth + CC padding */
}

#container .column {
  position: relative;
  float: left;
}
#intro {
  padding: 5px 5px;    /* CC padding */
  width: 100%;
  font-size:medium;
}
#roo-section {
  width: 200px;          /* LC width */
  padding: 0;            /* LC padding */
  left: -220px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}
#joey-section {
  width: 200px;          /* RC width */
  padding: 0;            /* RC padding */
  margin-right: -220px;  /* RC fullwidth + CC padding */
}

.kanga-section { 
	             text-align: center;
				 border-style: ridge;
				 border-width: 5px; 
                 height: 380px;
                 position:relative;
                }
                
#kangas-nav {
  clear: both;
}


#allcontent { /*width: 800px;*/
              max-width: 1200px;
              padding-top: 5px;
			  padding-bottom: 5px;
			  background-color: #7FFFFF;
			  margin-left: auto;
			  margin-right: auto; }
			  
.kanga-name { font-weight: bold; }
.kanga-section .kanga-name { text-align:left;
                             font-size: 1.5em;
                             margin-top: 0;
                             padding-top: 0;
                             margin-left: 5px; }   
                             
.kanga-section ul { margin: 0 20px; 
                    list-style-type:none; 
                    position:absolute;
                    top: 200px;
                    left: 0px;
                   }	                                        
.kanga-section ul a { line-height: 2em ; } 

.banner { text-align: center; 
          display:block; 
          margin-top:40px;}
          
.clear { clear: both; }
         
#roo-section { border-color: #FFCC33;
               background: #FFCC33 url(images/rootopandbottom.jpg) no-repeat center top;
             } 
                     		   
#joey-section { border-color: #37DD00;
                background: #37DD00 url(images/joeytopandbottom.jpg) no-repeat center top;
              }
                
a.email { background: url(images/mail.gif) no-repeat left center; 
          padding-left: 20px; }
                
#joey-section #joeyupper { top: 80px; }
#joey-section #joeylower { top: 300px; }

#roo-section:hover, #joey-section:hover { background-position: center -380px;
                                          z-index: 600; }
                
.roo { background-color: #FFCC33; }	  
.webpoll { background-color:  #BCE6BC; }
.joey { background-color: #37DD00; }		
a:link, a:visited { text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
a:link, a:visited, a:hover, a:active { font-weight : bold; }
#roo-section a, #joey-section a, #navbar a, #content a { font-weight : normal }
a:active { color: white; }
		
body { font-family: Verdana, Geneva, Arial, sans-serif;
       font-size: small; 
	   background-color: #00FFFF; }
   
#hit-counter { margin-left: auto;
               margin-right: auto;
               width: 120px;
               /*border: 1px solid black;*/
               clear: both; }
#bottom-nav { margin-left: auto;
              margin-right: auto;
              clear: both;
              text-align: center;
             }	   
body.download, body.videos { min-width: 760px; }			   
.download { background-color: #800080;}		   
.download #allcontent { background-color: #CC99FF;}	
.centre { text-align: center; }
.padding { padding: 5px 5px 5px 5px }
						 			  
h1 { font-size: 150%; }
h2 { font-size: 120%; }
caption { font-weight: bold;
          font-size: 150%; }
		  
td, th { padding: 5px; }
table { margin-left: 20px; 
        margin-right: 20px; }
.table-version { width: 15%;
                 text-align: center;
				 vertical-align: top; }
.table-date { width: 15%;
              text-align: center;
			  vertical-align: top; }
.table-comments { width: 70%; }
.table-video { width: 50%;
               text-align: center;
			   vertical-align: middle; }
.table-links { width: 50%;
               text-align: center;
			   vertical-align: middle; }
               
	
.home {  text-align: center;}
.home img { border: 0px; }
#gallery { background-color: #000080; }
#guest-book { background-color: #FF8000; }
#guest-book a:link, #guest-book a:hover { color: yellow; }
#guest-book a:visited { color: #800000; }
#guest-book a:active { color: white; }
	 
#gallery-content { text-align: center; }
#features { background-color: #0000FF; }
#features a:link { color: #00FFFF;; }
#features a:visited { color: #FF9900; }

#features-content { width: 800px;
				    margin-left: auto;
					margin-right: auto;
				  	color: white; }
.video-content { text-align: center; }
.figure-id { font-weight: bold; }
#source-forge { font-size: 70%; }
#source-forge-table { margin-left: 5px; 
                      margin-right: 5px; }	
	
#sponsordiv { margin-left:150px; }
	
.strike-through {text-decoration:line-through; }

.competition-update { background-color: #800000;
					  color: white; }
					  
.competition-update2 { background-color: purple;
					  color: white; }
.competition-update3 { background-color: blue;
					  color: white; }                      
					  
.competition-update3 a:link, .competition-update5 a:link { color: yellow; }
.competition-update3 a:visited, .competition-update5 a:visited { color: #FF9900; }

.competition-update4 { background-color:  #008000;
					  color: white; }                      

.competition-update5 { background-color:  #408080;
					  color: white; }                      

.competition-update6 { background-color:  #FF0080;
					  color: white; }     

#kangas-nav { float:left;
              background-color: black; 
              width: 100%; }
#kangas-nav h1 { color: white;
                 font-weight: bold;
                 position: absolute; } 
                                      
div#kangas-nav div { float:left; 
                     height:380px;
                     position:relative; }    
div#kangas-nav div div { position: absolute; 
                         float: none;
                         top: 0;
                         left: 0;}

#kangas-nav ul { position: absolute; 
                 list-style-type:none;
                 margin:0 0;
                 }
                 
#kangas-nav ul a { line-height: 2em; 
                   color: inherit;}
#kangas-nav h1 { color: inherit; }
#kangas-nav ul a:visited { font-weight: normal; }

div#kangas-nav div:hover { background-position: center -380px;
                           z-index: 500; }

#demo-roo { background: url(images/RooRightCyan.gif) no-repeat center top;
            color: #80FFFF;
            z-index: 400; } 
#demo-roo:hover { color: #007F7F; } 
#demo-roo, #fun-roo, 
#demo-roo-cont, #fun-roo-cont { width:340px; }  
#demo-roo ul, #fun-roo ul { top: 180px;
                            left: 140px; }               
#demo-roo h1, #fun-roo h1 { top: 85px;
                            left: 185px; }
               
#tutor-roo { background: url(images/roofacinggreen2.gif) no-repeat center top;
             color: #80FF80; 
             z-index: 401; }
#tutor-roo:hover { color: #007F00; }
#tutor-roo, #supporter-roo, #icon-roo,
#tutor-roo-cont, #supporter-roo-cont, #icon-roo-cont { width: 250px;  } 
#tutor-roo ul, #supporter-roo ul { top: 180px;
                                   left: 75px; } 
#tutor-roo h1, #supporter-roo h1, #icon-roo h1 { top: 80px;
                                                 left: 90px; }     
                
#user-roo { background: url(images/RooLeftBlue.gif) no-repeat center top;
            color: #8080FF;
            z-index: 402; }
#user-roo:hover { color: #00007F; }
#user-roo, #history-roo,
#user-roo-cont, #history-roo-cont { width: 340px; }
#user-roo ul { top: 180px; 
               left: 60px; }               
#user-roo h1, #history-roo h1 { top: 90px;
                                left: 70px; }

#fun-roo { background: url(images/RooRightPurple.gif) no-repeat center top;
           color: #FF80FF; 
           z-index: 403; } 
#fun-roo:hover { color: #7F007F; }  

#supporter-roo { background: url(images/roofacingpink2.gif) no-repeat center top;
                 color: #FF8080; 
                 z-index: 404; } 
#supporter-roo:hover { color: #7F0000; }        

#history-roo { background: url(images/RooLeftYellow.gif) no-repeat center top;
               color: #FFFF80; 
               z-index: 405; }
#history-roo:hover { color: #7F7F00; }
#history-roo ul { top: 185px;
                  left: 40px; }
                  
#icon-roo { background: url(images/roofacingwhite2.gif) no-repeat center top;
            color: #FFFFFF; 
            z-index: 406; }
#icon-roo:hover { color: #7F7F7F; } 
#icon-roo li { text-align: center; } 
#icon-roo ul { top: 190px;
               left: 60px; } 
#icon-roo img { border: 0px; }                
               
#above-top-gradient { float: left;
                      clear: both;
                      width: 100px;
                      height: 10px;
                      background-color: #7FFFFF; }   
                      
div#extra-sky div.sky { width:100%;
                        height: 1000px;
                        background-color: #7FFFFF; 
                        float: left;
                        clear: both; }
           
#top-gradient { float: left;
                clear: both;
                background: url(images/cyantoblack3.jpg) repeat-x left top;
                width: 100%;
                height: 100px; }  
                
#bottom-gradient { float: left;
                   clear: both;
                   background: url(images/blacktocyan.jpg) repeat-x left top; 
                   width: 100%;
                   height: 100px; } 
                    
div#roo-controls { float: left;
                   clear: both;
                   text-align: center;
                   font-family: "Marker Felt", "Comic Sans MS", fantasy;
                   font-size:medium;
                   position:relative;
                   height:1px;
                   width: 100%; }  
                     
div#roo-controls h1 { font-size: medium;
                      color: white; 
                      z-index: 1000;
                      position: relative;
                      width: 8em;
                      margin-left:auto;
                      margin-right:auto;
                    }  
                     
div#roo-controls p { color: black;
                     position: relative; }
                      
div#roo-controls a.button 
                 { 
                   text-decoration: none;
                   margin: 0 10px;
                   padding: 0 4px;
                   border-width: 4px;
                   border-style: solid;
                   color: #FFF;
                   background-color: #000;
                   font-weight:normal;
                   outline:none;
                   z-index: 1000;
                   position: relative;
                 }  
                 
div#roo-controls a.button,
div#allcontent div#roo-controls a.disabled
                 {
                   border-top-color: #DFDFDF;
                   border-right-color: #666;
                   border-bottom-color: #333;
                   border-left-color: #858585;
                 }
                 
div#roo-controls a.button:hover,
div#roo-controls a.button:focus
                 { 
                   border-bottom-color: #DFDFDF;
                   border-left-color: #666;
                   border-top-color: #333;
                   border-right-color: #858585;
                   color: #000;
                   background-color: #A4A4D2;
                 }    
                            
div#roo-controls a.button:hover
                 { background-color: #FFF; }
                 
div#roo-controls a.button:active
                 { background-color: yellow; 
                   color: #000; }
                   
div#allcontent div#roo-controls a.disabled 
                 { color: #808080;
                   background-color: #C0C0C0;
                 }