@import url(reset.css);

body { background: #fff; overflow-y: scroll; }

a:link, a:visited, a:active { color: #006699; text-decoration: none; }
a:hover { color: #33ccff; text-decoration: none; }

#header-wrapper { width: 100%; background: #005995; }
#header { background: url(../img/unhcr-header.png) no-repeat; width: 990px; height: 122px; margin-left: auto; margin-right: auto; }
#header #navigation { padding-top: 89px; }
#header #navigation #unhcr { background: url(../img/home.png) no-repeat; width: 36px; height: 33px; float: left; }
#header #navigation #home { background: url(../img/livefeed.png) no-repeat; width:142px; height: 33px; float:left; margin-left:1px;}
#header #navigation #donate { background: url(../img/donate.png) no-repeat; width: 142px; height: 33px; float: left; margin-left: 1px; }
#header #navigation #participate { background: url(../img/participate.png) no-repeat; width: 142px; height: 33px; float: left; margin-left: 1px; }
#header #navigation p:hover { opacity: 0.8; filter: alpha(opacity=80); }

#main-wrapper { width: 100%; min-height: 352px; background: url(../img/body-bg.png) center top repeat-x; }
#main { width: 990px; margin-left: auto; margin-right: auto; background: #fff; }
#main #learn-about { width: 948px; padding: 10px 20px; text-align: center; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; }
#main #learn-about p { font: 16px Arial, Verdana, "Lucida Grande", sans-serif; letter-spacing: 0px; }
#main #left { width: 650px; float: left; }
#main #right { width: 340px; float: left; }
#main #live { width: 650px; height: 440px; background: #fff; border-bottom: 1px solid #acacac; }
#main #live .menu { width: 178px; height: 440px; float: left; border-left: 1px solid #ccc; border-right: 1px solid #dfdfdf; color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif;}
#main #live select {width:175px;}
#main #live .menu p { margin: 5px; margin-bottom:0px;}
#main #live .video { width: 467px; height: 440px; margin-top: 2px; float: left; }
#main #twitter-feed { width: 338px; height: 440px; background: #fff; border-left: 1px solid #dfdfdf; border-right: 1px solid #ccc; border-bottom: 1px solid #acacac;}
#main #about { width: 305px; padding-right: 20px; margin-top: 0px; float: left; }
#main #about p { color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif; line-height: 1.4; margin-left: 8px; margin-top: 3px; text-align: justify; }
#main #schedule { width: 315px; padding-right: 10px; margin-top: 0px; float: left; }
#main #schedule p { color:  #464646;font: small Arial, Verdana, "Lucida Grande", sans-serif; line-height: 1.4; margin-left: 3px; margin-top: 3px; text-align: justify; }
#main #schedule table {width: 300px; margin-left:3px; }
#main #schedule table td.odd {color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif; padding: 2px; background-color:#e8e8e8;}
#main #schedule table td { color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif; padding: 2px;}
#main #schedule h1 { color:  #464646;  font: bold 16px Arial, Verdana, "Lucida Grande", sans-serif; margin-top: 5px; margin-left: 3px; } 
#main #badge { width: 338px; margin-top: 0px; text-align: center; }
#main #badge p { color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif; margin-top: 10px; }

#main #share { width: 988px; min-height: 450px; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; }
#main #share .badge { width: 410px; padding: 20px 40px; text-align: center; float: left; }
#main #share .badge p { width: 400px; color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif; margin-top: 10px; }
#main #share textarea { width: 400px; height: 30px; color:  #464646; font: 12px Arial, Verdana, "Lucida Grande", sans-serif; text-align: left; }

#main #participate { width: 988px; min-height: 450px; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif; }
#main #participate p.subtitle { margin-left: 15px; }
#main #participate h1 { color:  #464646;  font: bold 16px Arial, Verdana, "Lucida Grande", sans-serif; margin-top: 5px; margin-left: 15px; } 
#main #participate #ways { width: 900px; padding: 10px 40px 20px 15px; text-align: justify; float: left; }
#main #participate #ways p { width: 900px; color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif; margin-top: 10px; line-height: 1.4; }
#main #participate #ways p.sub {color:  #464646; font: 11px Arial, Verdana, "Lucida Grande", sans-serif; margin-top: 3px; line-height: 1.4; }
#main #participate #ways img {float:left; margin-right: 10px;}

#main #donate { width: 988px; min-height: 294px; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif; }
#main #donate p.subtitle { margin-left: 15px; }
#main #donate #ways { width: 800px; padding: 20px 40px 20px 15px; float: left; }
#main #donate #ways p { color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif; margin-top: 10px; line-height: 1.4; margin-left: 8px; }
#main #donate #ways select { color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif;}
#main #donate #gift { float:left; width: 280px; padding: 0px 0px 10px 20px; }
#main #donate #gift img {width: 280px; float:left; margin-bottom:8px;}
#main #donate #gift p { color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif; line-height: 1.4; text-align:justify;}

#main #makingof  { width: 988px; min-height: 450px; border-left: 1px solid #dfdfdf; border-right: 1px solid #dfdfdf; border-bottom: 1px solid #dfdfdf; }
#main #makingof h4 { color:  #464646; font: bold 16px Arial, Verdana, "Lucida Grande", sans-serif; margin-top: 10px; margin-left: 8px; }
#main #makingof p { color:  #464646; font: small Arial, Verdana, "Lucida Grande", sans-serif; margin-top: 10px; line-height: 1.4; margin-left: 8px; }
#main #makingof #left { width: 627px; padding: 10px 20px; text-align: justify; float: left; margin-top: 10px; }
#main #makingof #left .background { width: 300px; padding: 20px 0px; text-align: justify; float: left; }
#main #makingof #left .technology { width: 300px; padding: 20px 0px; text-align: justify; float: right; }
#main #makingof #right { width: 300px; padding: 10px 10px; text-align: justify; float: left; margin-top: 10px; }
#main #makingof #right .partners {text-align: center; }
#main #makingof #right .reaction {text-align: justify; }

#countdown { width: 204px; text-align: center; }
#countdown  #timer { font: 38px helvetica; letter-spacing: -2px; height: 40px; }
#countdown #countdown-msg { font: 18px georgia; letter-spacing: -1px; margin-top: 5px; color: #3a3a3a; }
#countdown #countdown-url { font: bold 11px Arial, Verdana, "Lucida Grande", sans-serif; margin-top: 10px; }

#footer { width: 990px; height: 30px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; text-align: center; border-top: 1px solid #efefef; padding-top: 10px; font: small Arial, Verdana, "Lucida Grande", sans-serif;}
#footer table td { vertical-align: middle; padding: 5px; }
#footer img { height: 30px; }