/* 
    Document   : upgrade
    Created on : Aug 25, 2010, 7:35:02 AM
    Author     : Frank Rutaihwa
    Description:
        Purpose of the stylesheet follows.
To work on the home page and subsequent pages, of the ssg site.
*/

/* 
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

root { 
    display: block;
        
}

body{
    background-color: #F1F1F1;
}

#workarea {
    width: 920px;
    height: auto;
    background-color: #ffffff;
    margin-top: 10px;
    margin-left: 14%;
    font-family: "Lucida Grande","Verdana","Bitstream Vera Sans","Arial,sans-serif";
    font-size:80%;
    overflow: hidden;
    
    }

    #head {
     width: 100%;
     height: 150px;
     background-color: #000;
     border-bottom: 5px solid #fff;
}

#top {
    height: 25px;
    width: 180px;
}

#down {
    height: 25px;
    width: 180px;
}

#logo {
    width: 180px;
    height: 150px;
    background-color: #000;
    float: left;
}

#costant{
    float: right;
    margin-top: 25px;
    margin-right: 20px;
}

#costant a:link, #costant a:visited {
background-color:#000000;
color:#FEBD27;
text-decoration: none;}

#costant a:hover {
color: #ffffff;
text-decoration:underline;}

#move{
    width: 590px;
    height: 50px;
    background-color:#FEBF00;
    float: right;
    margin-top: 5px;
}



#move li {
margin-left:12.5px;
display:block;
float:left;
height:15px;
line-height: 50px;
list-style:none outside none;
background-color:#FEBF00;
}

#move a:link, #move a:visited {
background-color:inherit;
color:#fff;
text-decoration: none;}

#move li a:hover {
color: #fff;
background-color:#0070C0;
font-weight: inherit;
margin: auto;
display: block;
height:auto;
text-decoration: underline;
}

#menuselected
{
  display: block;
  height: auto;
  text-decoration: none;
  color: #ffffff;
  text-align: center;
background-color:#0070C0;
}

#content {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    
}

#left {
    width: 300px;
    height: auto;
    float: left;
    font-size: 15px;
    text-indent:1px;
    background-color: #fff;
    
}

#karibu {
    width: 290px;
    height: auto;
    background-color: #27A5FF;
    float: left;
    border-bottom: 5px solid #fff;
    font-size: 14px;
    font-family: arial;
    text-align: left;
}

#karibu a:link, #karibu a:visited {
background-color:#27A5FF;
color: #2D4672;
text-decoration: none;}

#karibu a:hover {
background-color:#27A5FF;
color: #fff;
font-weight: inherit;
}



#karibu h3 {
text-align: left;
margin-left:15px;
font-weight: bold;
font-family: Arial;
color: #fff;
border-bottom: 2px dotted #2740FF;
}

#karibu h4 {
text-align: left;
padding-left:12px;
font-weight: bold;
font-family: Arial;
color: #fff;
border-bottom: 1px  dashed #2740FF;}

#ndani {
    width: 290px;
    height: auto;
    background-color: #27A5FF;
    float: left;
    border-bottom: 5px solid #fff;
    font-size: 13px;
    font-family: arial;
    text-align: left;
    padding-left: 10px;
    color: #fff;
}

#ndani a:link, #ndani a:visited {
background-color:#27A5FF;
color: #FEBF00;
text-decoration: none;}

#ndani a:hover {
background-color:#27A5FF;
color: #fff;
font-weight: inherit;}



#ndani h4 {
text-align: left;
padding-left:12px;
font-weight: bold;
font-family: Arial;
color: #fff;
border-bottom: 1px  dashed #2740FF;}

#too {
    width: 300px;
    background-color:#8DD0FF;
    margin-top: 0px;
    border-right: 10px solid #fff;
    
}

#too h3 {
text-align: center;
font-weight: bold;
font-family: Arial;
color: #000;
border-bottom: 2px dashed #FEBF00;
}


#too a:link, #too a:visited {
background-color:#000;
display: block;
line-height: 25px;
color:#fff;
text-decoration: none;}

#too a:hover {
color: #818181;
background-color:#fff;
font-weight: inherit;
text-decoration: underline;
}

#active
{
  display: block;
  height: auto;
  line-height: 25px;
  text-decoration: underline;
  color: #818181;
  text-align: center;
  background-color:#fff;
}


#right {
width: 620px;
height: auto;
float: right;
background-color: #ffffff;
}

#land {
width: 600px;
height: auto;
text-align: justify;
line-height: 14px;
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
text-indent: 0px;}

#land a:link, #land a:visited {
color: #008EF3;
text-decoration: none;}

#land a:hover {
color: #000;
font-weight: inherit;
margin: auto;
height:auto;
}

#bye {
    width: 100%;
    background-color: #B4B4B4;
    padding-left: 10px;
    height: auto;
}

#slideshow{
    width: 260px;
    height: 200px;
    margin-top: 5px;
    margin-left: 10px;
    margin-right: 10px;
    background-image: url(./images/highlights/ssg_one.gif);
    float:left;}

#news {
    width: 320px;
    height: auto;
    background-color: #B4B4B4;
    float: right;
    margin-top: 5px;
    padding-left:10px;
    padding-right:10px;
font-family: monospace;
font-size: 12px;}

#headline{
    width: 100%;
    height: 25px;
    line-height: 25px;
    display: block;
    background-color: #000;
    font-weight: bolder;
    color: #fff;
}

#news a:link, #news a:visited {
background-color:#B4B4B4;
color: #2D4672;
text-decoration: none;}

#news a:hover {
background-color:#B4B4B4;
color: #fff;
font-weight: inherit;
margin: auto;
height:auto;
}



#foot {
    border-top: 1px solid #FEBF00;
    width: 100%;
    height: 30px;
    background-color: #DCDCDC;
    float: left;
    margin-top: 10px;
    color: #333333;
    font-family: Times, "Times New Roman", serif;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
	}
	
#foot a:link, #foot a:visited {
background-color:#DCDCDC;
color:#333333;
text-decoration: none;}

#foot a:hover {
color: #FEBD27;
text-decoration:none;}