/* Style Sheet for VolunteerUganda.org                */
/* Copyright Mark Rogers 2012                         */
/* Colours:                                           */
/*      Border brown:         #d96f00                 */
/*      Darker background:    #ffda87                 */
/*      Lighter background:   #ffeec9                 */
/*      Darker blue:          #006bb2                 */                                                           
/*      Lighter blue:         #039aff                 */
/*      Lightest blue text:   #90c6ff                 */
/*      New lightest background: #fefefc              */

section, article, header, footer, aside, nav
 {
 display: block;
 }
 
 
body {
	padding: 0;
	margin: 0 auto;
	font-size: 13px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    background-image:url('widgets/bg.gif');
	text-align: left;
    }
    
div.container {
	width: 990px; 
	padding: 0;
    margin: 0 auto 0 auto;
    background-color: #ffffff;
	border: solid 1px rgb(197,226,241);
    -moz-box-shadow: 0 0 4px 1px rgb(197,226,241);
    -webkit-box-shadow: 0 0 4px 1px  rgb(197,226,241);
    box-shadow: 0 0 4px 1px rgb(197,226,241);
}
	

div.header {
	background: transparent; 
	padding: 0;
	margin: 0;
    clear: both;
}
    
div.top {
	padding: 0;
	margin: 0 auto;
	width: 990px;
    overflow: hidden;
}
 
div.footrr { color: black; background-color: #dddddd; }
div.footercell {float: left; padding: 3px; border-left: 1px solid white; width: 13%; height: 100%; }
div.legal { clear: both; padding-top: 7px; }
div.footrr h1 {font-size: 15px; }
div.footrr p {font-style: italic; min-height: 4em; }
div.footrr ul {margin: 0; padding: 0; }
div.footrr li { list-style: none; margin: 0; padding: 0;}
div.foootrr a { color: white; text-decoration: none; margin: 0; padding: 0;}
div.footrr a:hover { text-decoration: underline;}


#slideshow { width: 990px; height: 150px; position: absolute;  z-index: 3; }

div.transbox { position: absolute; top: 5px; right: 5px; z-index: 5; width: 300px; height: 70px; border: none;
   background-color: white; opacity: 0.6; filter:alpha(opacity=60); /* For IE8 and earlier */ }	
div.transtext { position: absolute; top: 5px; right: 5px; z-index: 6;   width: 300px; height: 70px; border: none; display: none; }	
div.transtext p { font-size: 11pt; text-align: right; margin: 3px; }
div.transtext h3  { font-size: 25pt; font-weight: bold; color: #006bb2; text-align: right; margin: 3px }
 

a:link, a:active, a:visited { text-decoration: none; }

a:link, a:active { color: #039aff; }

a:visited { color: #039aff; }

a img { 
    border: none;
    padding: 0;
    margin: 0; 
}
 
div.gap {
	clear: both;
	margin: 0;
    padding: 0;
    height: 10px;
    background-color: transparent;
}

div.whitegap {
	clear: both;
	margin: 0;
    padding: 0;
    height: 10px;
    background-color: white;
}

span.highlight {
    color: #90c6ff;
}

p { margin-top: 0.3em; margin-bottom: 1em; } 



em { color: #039aff; font-style: normal; font-weight: bold; }

.left { text-align: left; }

.right { text-align: right; }

.center { text-align: center; }

.red {     color: red; }

a.action {
    width: 125px;
    margin: 3px 5px 3px 5px;
    padding: 2px 0 2px 50px;
    border: none;
    background-image: url('widgets/bjright2.png');
    background-repeat: no-repeat;
    -moz-border-radius: 10px;
    border-radius: 10px;
    display: block;
    color: black;
    font-style: italic;   
}

a.orange {
    background-color: #ffcc66;
}

a.green {
    background-color: #99ff99;
}

a.purple {
    background-color: #9999ff;
}
    
a.action em {
    font-size: 120%;
    font-weight: bold;
    color: #006bb2;
    }
    
a.action:hover, a.action:active {
    display: block;
    color: black;
    background-color: #ffffff;   
}

p.caption {
	color: #039aff;
    font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic; 
}

div.quote {
    float: right;
    width: 200px;
    background-image: url('widgets/OpenQuote75.png');
    background-repeat: no-repeat;
    background-color: #F5F0c4;
    margin: 2px -8px 2px 5px;
    border: solid 1px #ffda87;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

div.quote p {
    color: #039aff;
    font-size: 105%;
    font-family: Georgia, serif;
    font-weight: bold;
    font-style: italic;
    padding: 60px 3px 0 7px;
}

div.panel {
	float: right;
    margin: 15px 0 0 0;
	width: 190px;
    background-color: transparent;    
}

div.whole {
	float: left;
    width: 750px;
	margin: 0 4px 0 4px;
	padding: 0 0 0 8px;
	line-height: 130%;
}

div.most {
	float: left;
	width: 700px;
	margin: 0 25px 0 25px;
	padding: 0;
    border: none;
	line-height: 130%;
    background-color: #ffffff;
}

div.rest {
    width: 274px;
    float: left;
    line-height: 120%;
    padding: 8px 0 0 4px;
}

div.half {
	float: left;
	width: 380px;
	margin: 0 5px 0 10px;
	padding: 0;
	line-height: 130%;
}

div.third1 {
	float: left;
	width: 315px;
	margin: 0 4px 0 4px;
	padding: 0 0 0 8px;
	line-height: 130%;
}

div.third {
	float: left;
	width: 315px;
	margin: 0 4px 0 4px;
	padding: 0 0 0 8px;
	border-left: 1px solid #ffda87;
	line-height: 130%;
}

div.copyright {
	float: left;
    width: 180px;
	color: #222222;
	font-size: x-small;
	padding: 5px;
	margin: 0;
}

div.footer {
	float: left;
    width: 790px;
	color: #222222;
	font-size: x-small;
	padding: 5px;
	margin: 0;
}

div.footer2 {
    font-size: 77%;
    clear: both;
    color: #222222;
	padding: 15px;
}

div.myBox {
	margin: 0;
	height: auto;
	padding: 20px 4px 25px 4px;
	text-align: left;
    border-top: 18px solid white;
    background-color: transparent;
}

.myBox .panel_header {
	font: normal normal bold 100% Verdana, Arial, Helvetica, sans-serif;
    background-color: transparent;
	color: white;
	margin: 0;
	padding: 5px 0 5px 6px ;
    background-image: url('images/ButtonBackground2.gif');
	background-repeat: repeat;
	background-position: top left;
}
	
.myBox .panel_content {
	font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: transparent;
	margin: 0;
	color: black;
	padding: 2px 0 0 0; 
    border: none;
}

div.panel_content p {  
    padding: 0 2px 0 6px;
}

ddh1 {
	color: #eeeeee;
	font-family: tahoma, sans-serif;
	font-weight: normal;
	font-size: 200%;
	padding-left: 200px;
	padding-top: 30px;
	line-height: 110%;
}

h1 {
	color: #006bb2;
	background-color: transparent;
	font-size: 210%;
	font-weight: bold;
	font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
 	padding: 15px 0 10px 0;
	margin: 0;
	line-height: 120%;
}

h2 {
	color: #039aff;
	font-size: 160%;
	font-weight: bold;
	font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
  	padding: 15px 0 4px 0;
	margin: 0;
	line-height: 120%;   
}

h3 {
	color: #039aff;
	font-weight: bold;
	font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 140%;
    line-height: 120%;
}

h4 {
	color: #039aff;
	font-size: 120%;
	font-weight: bold;
    font-style: italic;
	font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
    padding: 0;
}

h5 {
	color: #006bb2;
	background-color: transparent;
	font-size: 150%;
	font-weight: bold;
	font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
 	padding: 0 0 5px 0;
	margin: 0;
	line-height: 120%;
}

h6 {
	color: #039aff;
	font-weight: bold;
	font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 125%;
    line-height: 100%;
    margin: 3px 0 2px 0;
    padding: 0 0 0 0;
    }

ol, ul { padding: 0 0 0 .5em; margin: 0 0 0 1em; }


ul	{ list-style-image: url('/images/Bullet.gif') }

li  { margin-bottom: .3em; }

table.uganda {
    font-size: 100%;
   	letter-spacing: 0;  
    background-color: #e1eaff;
   	border-collapse: collapse;
    border-bottom: 2px solid rgb(196,196,196);
    border-top: 2px solid rgb(196,196,196);
}

table.uganda td {
    font-size: 90%;
    border-top: 1px solid rgb(196,196,196);
    border-right: none;
    border-bottom: 1px solid rgb(196,196,196);
    border-left: none;
    padding: 0.3em 0.5em 0.3em 0;
 }
 
table.uganda li {
    margin: 5px 0 5px 0;
    }
 
tr.row1 {
    background-color: #e0f3ff;
 }
 
div.top img {
   position: absolute;
}
 
img.right {
    float: right;
    border: 1px solid gray;
    margin: 0 0 1px 1px;
    padding: 0;
}

img.left {
    float: left;
    border: 1px solid gray;
    margin: 1px;
    padding: 1px;
}

img.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid gray;
    padding: 0;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    box-shadow: 5px 5px 5px gray;
}

img.opaque {
    opacity: 0.40;
    filter: alpha(opacity=40);
    -ms-filter: alpha(opacity=33);
}

a img.logo {
    margin: 0;
    padding: 0;
    border: 1px solid #039aff;
    }
    
div.box {
    float: right;
    border: 1px solid #039aff;
    margin: 1px 1px 20px 1px;
    padding: 1px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

div.image {
    float: right;
    z-order: 2;
    border: 1px solid gray;
    margin: 4px;
    padding: 0;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    box-shadow: 5px 5px 5px gray;
}

div.imageleft {
    float: left;
    z-order: 2;
    border: 1px solid gray;
    margin: 4px;
    padding: 0;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    box-shadow: 5px 5px 5px gray;
}


div.imagecenter {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid gray;
    padding: 0;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    box-shadow: 5px 5px 5px gray;
}




div.image img {
    padding: 0;
    margin: 0;
}

div.image p {
	color: #039aff;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 85%;
	font-style: italic;
    margin: 0 2px 2px 4px;
}

a.menu:link, a.menu:visited {
    display: block;
    font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: bold;
  	color: #222222; 
    line-height: 120%;
   	padding: 0 0 10px 0;
    margin: 5px 15px 8px 15px;
} 

a.menu:hover, a.menu:active, a.menu2 {
    display: block;
   	font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 100%;
    font-weight: bold;
	color: #000000;
    line-height: 120%;
   	padding: 0px 0 10px 0;
    margin: 5px 15px 8px 15px;
    border-bottom: solid 4px #0066cc;
    }

div.bar em {
    font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 120%;
    font-weight: bold;
    color: #ff6600;
}

a.frame em {
    font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 160%;
    font-weight: bold;
}
   
a.col1 {
     border-bottom: solid 4px #900000;
     }
a.col2 {
     border-bottom: solid 4px #ffcc66;
     }    
a.col3 {
     border-bottom: solid 4px #9999ff;
     }   
a.col4 {
     border-bottom: solid 4px #99ff99;
     }
a.col5 {
     border-bottom: solid 4px #b64926;
     }    
a.col6 {
     border-bottom: solid 4px #cc6699;
     }     

a.menu3 {
    font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    display: block;
    width: auto;
	color: black;
    background-color: #e1eaff; 
   	padding: 1px 0 1px 6px;
    margin: 0;
    }

a.menu4, a.menu3:hover {
    font-family: "trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 1em;
    display: block;
    width: auto;
	color: white;
    font-weight: bold;
    background-color: #006bb2;
   	padding: 1px 0 1px 6px;
    margin: 0;
    }
 
    
a.frame {
    color: black;
    font-weight: normal;
    display: block;
	float: left;
	width: 250px;
	height: 400px;
	margin: 0 0 0 22px;
	padding: 23px 20px 0 30px;
	line-height: 125%;
}

a.col11 {
		background-image: url('widgets/Frame1.png');
		background-repeat:no-repeat;
} 
  
a.col12 {
		background-image: url('widgets/Frame2.png');
		background-repeat:no-repeat;
} 

a.col13 {
		background-image: url('widgets/Frame3.png');
		background-repeat:no-repeat;
} 
 
a.frame:hover, a.frame:active {
		background-image: url('widgets/Frame4.png');
		background-repeat:no-repeat;
}
 
 
 
/* Form stuff */
    
div.shadow {
    margin-left: 4px;
	margin-top: 4px;
    background-color: #aaaaaa;
    }
    
fieldset.login  {
	color: #666;
	background-color: #e4efff;
	padding: 20px 2px 10px 2px;
    margin-left: 20px;
	border: solid 1px #d3d3d3;
	width: 340px;
	}
    
fieldset  {
	color: #333;
  	background-color: #e4efff;
	padding: 20px 10px 10px 10px;
    margin: 40px 0 0 60px;
	border: solid 1px #d3d3d3;
	width: 600px;
	}


div.formbox {
	padding: 5px;
	margin: 50px 15px 20px 15px;
    border: solid 1px #039aff;
}

	
legend  {
	color: #666;
	font-weight: bold;
	font-variant: small-caps;
	background-color: #d3d3d3;
	padding: 2px 6px;
	margin-bottom: 8px;
	}

label   {
	font-weight: bold;
    font-size: 90%;
    color: #666666;
	line-height: normal;
	text-align: right;
	margin: 3px 10px 0 0;
	position: relative;
	display: block;
	width: 180px;
    float: left; 
	}
    
div.formbox span   {
	font-weight: bold;
    font-size: 90%;
    color: #888888;
	line-height: normal;
	text-align: right;
	margin: 0 10px 0 0;
	position: relative;
	display: block;
	float: left;
	width: 150px;
	}
    
code   {
	font-weight: normal;
    font-size: 100%;
    color: black;
	line-height: normal;
	text-align: left;
	margin: 6px 10px 0 0;
	position: relative;
	display: block;
	}

label.fieldLabel	{
	display: inline;
	float: none;
	}
    
input.tiny  {
	font-size: 100%;
	background-color: #fdfddd;
    width: 60px;
	padding: 2px;
	border: solid 1px #ffda87;
	margin-right: 5px;
	margin-bottom: 8px;
	height: 15px;
	}
	
input.small  {
	font-size: 100%;
	background-color: #fdfddd;
    width: 130px;
	padding: 2px;
	border: solid 1px #ffda87;
	margin-right: 5px;
	margin-bottom: 8px;
	height: 15px;
	}
    
input.medium  {
	font-size: 100%;
	background-color: #fdfddd;
    width: 200px;
	padding: 2px;
	border: solid 1px #ffda87;
	margin-right: 5px;
	margin-bottom: 8px;
	height: 15px;
	}
        
input.large  {
	font-size: 100%;
	background-color: #fdfddd;
    width: 320px;
	padding: 2px;
	border: solid 1px #ffda87;
	margin-right: 5px;
	margin-bottom: 8px;
	height: 15px;
	}  

select.select  {
	font-size: 100%;
	background-color: #fdfddd;
    width: 210px;
	padding: 0;
	border: solid 1px #ffda87;
	margin-right: 5px;
	margin-bottom: 8px;
	height: 20px;
	}   
    
textarea   {
	font-size: 100%;
	background-color: #fdfddd;
    width: 375px;
    height: 75px;
	padding: 2px;
	border: solid 1px #ffda87;
	margin-right: 5px;
	margin-bottom: 8px;
	}
    
textarea.small   {
	font-size: 100%;
	background-color: #fdfddd;
    width: 200px;
    height: 75px;
	padding: 2px;
	border: solid 1px #ffda87;
	margin-right: 5px;
	margin-bottom: 8px;
	}

select.formSelect  {
	font-size: .8em;
	color: #666;
	background-color: #fee;
	padding: 2px;
	border: solid 1px #f66;
	margin-right: 5px;
	margin-bottom: 8px;
	cursor: pointer;
	}

input.formInputButton   {
	font-size: 100%;
	vertical-align: middle;
	font-weight: bold;
	text-align: center;
	color: #300;
	padding: 1px;
    margin: 10px 30px 0 0;
	border: solid 1px #039aff;
	cursor: pointer;
	float: right;
	}
    
    
    
    /* Google youtube stuff */
    
#videoBar {
  width : 160px;
  margin-right: 5px;
  margin-left: 5px;
  padding-top : 4px;
  padding-right : 4px;
  padding-left : 4px;
  padding-bottom : 0px;
}

    
    
.playerInnerBox_gsvb .player_gsvb {
  width : 480px;
  height : 380px;
}


/* New 2011 Menubar */

.Navigation { height: 84px; background: url(widgets/Navigation.png)  repeat-x; border-bottom: 1px solid #919191; }

#NavigationInside { padding-left: 15px; width: 945px; margin: 0 auto; }

.Navigation ul li { float: left; position: relative; list-style: none; padding: 17px 10px; }

.Navigation ul li a { font-size: 14px; font-weight: bold; color: white; text-decoration: none; text-shadow: 0 1px 2px black; }

.Navigation ul li:hover { background: url(widgets/hover.png) repeat-x; height: 43px; -webkit-box-shadow: 0 0px 2px black inset; padding: 20px 9px; border-left: 1px solid #a4a4a4; border-right: 1px solid #a4a4a4; }

.Navigation ul li ul li:hover { background: none; -webkit-box-shadow: none; -moz-box-shadow: none; height: auto; border: none; }

.Navigation ul li .horizontal li { padding: 14px 10px 14px 10px;  }

.Navigation ul li .horizontal li:first-child { margin-left: -10px; }

.Navigation ul li .horizontal li a { font-size: 12px; font-weight: normal; color: #c7c7c7; }

.arrow-up { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #6a6a63; position: absolute; left: 20px; top: -15px; }

.Navigation ul li ul li .extended { position: absolute; top: 45px; left: 0; width: 220px; background: url(widgets/dropdownback.png); z-index: 1000; -moz-box-shadow: 0 0px 8px rgba(0,0,0,0.8); -webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.8); box-shadow: 0 0 8px black; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid white; display: none; color: white; }

.Navigation ul li ul li .extended img { display: block; margin: 5px auto 15px auto; -webkit-box-reflect:below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255,255,255,0.5))); }

.Navigation ul li ul li .extended p { padding: 10px; font-size: 12px; line-height: 17px; text-shadow: 0 1px 1px black; }

.Navigation ul li ul li .extended h2, .Navigation ul li .ultraNav h2 { padding-top: 10px; padding-left: 10px; font-size: 16px; text-shadow: 0 1px 2px black; color: white; background: url(widgets/headerback.png) repeat-x; height: 20px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;  }

.Navigation ul li ul li .extended span { padding-left: 10px; font-size: 11px; }

.Navigation ul li ul li .extended ul.smallNav { border-top: 1px solid rgba(141,141,141,0.50);  padding: 10px; height: 100px;  }

.Navigation ul li ul li .extended ul.smallNav li { width: 200px; padding: 0; line-height: 22px; font-weight: bold; background: url(widgets/linkback.png) no-repeat; }

.Navigation ul li ul li .extended ul.smallNav li a { color: #c7c7c7; text-shadow: none; }

.Navigation ul li ul li .extended ul.smallNav li a:hover { color: white; }

.Navigation ul li ul li .extended ul.smallNav li:first-child { margin: 0; }

.Navigation ul li ul li .extended ul.smallNav li:last-child { margin-bottom: 10px; }

.Navigation ul li ul li:hover .extended { display: block; }

.Navigation ul li ul li:hover a { color: white; }

.Navigation ul li .ultraNav { position: absolute; top: 55px; left: -100px; width: 294px;  background: url(widgets/dropdownback.png); border: 1px solid white; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; z-index: 500; -moz-box-shadow: 0 3px 8px rgba(0,0,0,0.6); -webkit-box-shadow: 0 3px 8px rgba(0,0,0,0.6); box-shadow: 0 3px 8px black;
display: none; }

.ultraNav h2 { text-align: center; }

.Navigation ul li .ultra { width: 130px; float: left; margin: 10px 0 10px 10px; -moz-box-shadow: 0 -1px 3px rgba(0,0,0,0.6); -webkit-box-shadow: 0 -1px 3px rgba(0,0,0,0.6); -moz-border-radius: 5px; -webkit-border-radius: 5px;  border-bottom: none; }

.Navigation ul li .ultra:first-child { margin: 0; }

.Navigation ul li .ultraNav .arrow-up { left: 130px; }

.Navigation ul li .ultra a { font-weight: normal; font-size: 12px; color: #c7c7c7; text-shadow: 0 1px 2px black; }

.Navigation ul li .ultra li { width: 120px; line-height: 20px; padding: 3px 5px; background: url(widgets/linkback.png) no-repeat;  }

.Navigation ul li:hover .ultraNav { display: block; }