/*****************************\
  Pagewide styles
\*****************************/

body {
    margin: 0;
    color: #CC0022;
    background-color: #FFFFBB;
    text-align: center;
}

.black_text {
    color: #000000;
}

.bg-image-world {
    background-image:url('earth.png')
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.page-big-title {
    font: 48px "Cooper Black", "Times-Roman Bold"
}

.page-title {
    font: 24px "Cooper Black", "Times-Roman Bold"
}

.page-subtitle {
    font: 16px "Cooper Black", "Times-Roman Bold"
}

.page-normal {
    font: 12px "Cooper Black", "Times-Roman Bold"
}

.bgcolor-purple {
    background-color: #FFFFBB;
}

.title_frame {
    border-style: groove;
    border-width: 10px;
    border-color: #006600;
    padding: 16px;
    text-align: center;
}

.inset_frame {
    border-style: inset;
    border-width: 10px;
    border-color: #006600;
    padding: 16px;
    text-align: center;
}

.outset_frame {
    border-style: outset;
    border-width: 5px;
    border-color: #006600;
    padding: 0px;
    text-align: center;
    background-color: #FFFFBB;
}

.solid_frame {
    border-style: solid;
    border-width: 5px;
    border-color: #006600;
    padding: 16px;
    text-align: center;
}

.groove_frame {
    border-style: groove;
    border-width: 10px;
    border-color: #006600;
    padding: 0px;
    text-align: center;
}

.sm_groove_frame {
    border-style: groove;
    border-width: 5px;
    border-color: #006600;
    padding: 0px;
    text-align: center;
}

.ridge_frame {
    border-style: ridge;
    border-width: 10px;
    border-color: #006600;
    padding: 16px;
    text-align: center;
}

.running_text {
    color: black;
    background-color: transparent;
    text-align: center;
}

.text_on_purple {
    color: black;
    background-color: #F0B6FF;
    text-align: justify;
}

.dropheading {
    background-color: transparent;
    color: #CC0022;
    padding: 5px 10px;
    font-size: 16px;
    border: none;
    width: 100%;
}


/*****************************\
  Dropdown Menu
\*****************************/
/* Style The Dropdown Button */
.dropbtn {
    background-color: transparent;
    color: #CC0022;
    padding: 5px 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
}

.ug_dropbtn {
    background-color: transparent;
    color: #550088;
    padding: 5px 10px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    font: 16px "Cooper Black", "Times-Roman Bold"
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

#ug_dropdown {
    text-align: center;
    color: #550088;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    opacity:1.0;
    background-color: transparent;
    position:absolute;
    top:0px;
    left:0px;
    font: 16px "Cooper Black", "Times-Roman Bold"
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #FFFFBB;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    border-style: solid;
    border-color: #CC0022;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #CC0022;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}


/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #CC0022;
    color: #FFFFBB;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #CC0022;
    color: #FFFFBB;
}

/*****************************\
  Image rotations
\*****************************/

.rotateimg15 {
  -webkit-transform:rotate(15deg);
  -moz-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  -o-transform: rotate(15deg);
  transform: rotate(15deg);
}

.rotateimg345 {
  -webkit-transform:rotate(345deg);
  -moz-transform: rotate(345deg);
  -ms-transform: rotate(345deg);
  -o-transform: rotate(345deg);
  transform: rotate(345deg);
}
.rotateimg30 {
  -webkit-transform:rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
.rotateimg45 {
  -webkit-transform:rotate(30deg);
  -moz-transform: rotate(30deg);
  -ms-transform: rotate(30deg);
  -o-transform: rotate(30deg);
  transform: rotate(30deg);
}
.rotateimg330 {
  -webkit-transform:rotate(330deg);
  -moz-transform: rotate(330deg);
  -ms-transform: rotate(330deg);
  -o-transform: rotate(330deg);
  transform: rotate(330deg);
}

/***************************\
  Show on Hover
\***************************/

.hide_for_now { 
  display: none;
  position: absolute;
    background-color: #FFFFBB;
    border-style: solid;
    border-color: #CC0022;
}

.show_on_hover:hover .hide_for_now {
    position: relative;
    top:0;
    left:0;
    display: inline-block;
}

/***************************\
  Image Mapping
\***************************/
.container {
  position: relative;
  width: 50%;
}

/*    color: #AA00FF;
*/
.words_over_transparency {
    text-align: center;
    color: #550088;
    text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
    opacity:1.0;
    background-color: transparent;
    position:absolute;
    top:0px;
    left:0px;
    font: 16px "Cooper Black", "Times-Roman Bold"
}

.area {
    background:#fff;
    display:block;
    opacity:0;
    position:absolute;
    width:100px;
    height:100px;
}
#area1words {
    top:0px;
    left:0px;
    text-align: center;
    opacity:1.0;
    background-color: transparent;
}
#area2words {
    top:0px;
    left:242px
    text-align: center;
    opacity:1.0;
    background-color: transparent;
}
#area3words {
    top:101px;
    left:0px
    text-align: center;
    opacity:1.0;
    background-color: transparent;
}
#area4words {
    top:101px;
    left:242px
    text-align: center;
    opacity:1.0;
    background-color: transparent;
}
#area1 {
    top:0px;
    left:0px;
}
#area2 {
    top:0px;
    left:242px
}
#area3 {
    top:380px;
    left:0px
}
#area4 {
    top:380px;
    left:242px
}
#area1:hover, #area2:hover, #area3:hover, #area4:hover {
    opacity:0.2;
}

.uganda_container {
  position: relative;
  width: 100%;
}

.ug_area {
    background:#fff;
    display:block;
    opacity:0;
    position:absolute;
    width:120px;
    height:100px;
}

#ug_peace_proj_area1 {
    top:0px;
    left:0px;
}

#ug_peace_proj_area2 {
    top:140px;
    left:0px
}

#ug_peace_proj_area1:hover, #ug_peace_proj_area2:hover {
    opacity:0.2;
}

.ug_schools_area {
    background:#fff;
    display:block;
    opacity:0;
    position:absolute;
    width:320px;
    height:100px;
}

#ug_schools_area1 {
    top:0px;
    left:0px;
}

#ug_schools_area2 {
    top:140px;
    left:0px
}

#ug_schools_area1:hover, #ug_schools_area2:hover {
    opacity:0.2;
}

.res_res_area {
    background:#fff;
    display:block;
    opacity:0;
    position:absolute;
    width:320px;
    height:100px;
}

#res_res_area1 {
    top:0px;
    left:0px;
}

#res_res_area2 {
    top:100px;
    left:0px
}

#res_res_area3 {
    top:200px;
    left:0px
}

#res_res_area1:hover, #res_res_area2:hover, #res_res_area3:hover {
    opacity:0.2;
}

.sirnimrod_area {
    background:#fff;
    display:block;
    opacity:0;
    position:absolute;
    width:320px;
    height:70px;
}

#sirnimrod_area1 {
    top:0px;
    left:0px;
}

#sirnimrod_area2 {
    top:70px;
    left:0px
}

#sirnimrod_area3 {
    top:140px;
    left:0px
}

#sirnimrod_area1:hover, #sirnimrod_area2:hover, #sirnimrod_area3:hover {
    opacity:0.2;
}



/*****************************\
  Rainbow
\*****************************/
div.rainbow {
  position: relative;
  width: 95vw;
  height: 45vw;
  overflow: hidden;
  background: transparent;
  transform: translate(-50vw, -16.666vw);
  top: 8vw;
  left: 50vw;
}
div.rainbow:after {
  position: absolute;
  content: '';
  width: 50%;
  height: 100%;
  top: 25vw;
  left: 25vw;
  border-radius: 50%;
  box-shadow: 0 0 0 2vw #4200AB, 0 0 0 4vw #000095, 0 0 0 6vw #00ABFF, 0 0 0 8vw #00C800, 0 0 0 10vw #FFF800, 0 0 0 12vw #FF7642, 0 0 0 14vw #E40000;
}