@charset "UTF-8";
/* CSS Document */

/* Mary's Attempt at following CSS-Tricks in making Helium wordpress website
February 2010 */


/* COLOURS

#F15D2F - dark orange
#FFAC0D - mid orange
#FFDD00 - yellow

*/


/* RESET from css-tricks screencast #26 */

*				{ margin: 0; }
html			{ overflow-y; scroll; }
html, body		{ height: 100%; }
body			{ font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#000; font-style:normal; background:#f0f0f0; }
ul				{ list-style:none; padding: 0px; margin: 0px; }
li				{ list-style: none; }
ol				{ list-style: none; }
a				{ outline: none; text-decoration: none; color:#F15D2F;}
a:hover, a:focus 	{ color:#FFAC0D; }
a img			{ border: none; }
img				{ vertical-align: middle; }
table 			{ border-collapse: collapse; }


p				{ margin: 0 0 10px 0; }
h2				{ font-style:normal; font-weight:lighter; text-align: left; font: Arial, Helvetica, sans-serif; font-size:24px; margin: 7px 0 10px 0; color:#F15D2F; }
h6				{ font: Arial, Helvetica, sans-serif; font-style:normal; font-weight:lighter; font-size:10px; line-height:13px ;color:#FFF; }
h3				{ font-style:normal; font-weight:lighter; font: Arial, Helvetica, sans-serif; font-size:15px; padding: 5px 5px 5px 0px; color:#F15D2F; }
h4				{ font-style:normal; font-weight:bolder; padding: 10px 0 0 0; font: Arial, Helvetica, sans-serif; color:#F15D2F; }



/* UTILITY from css-tricks screencast #26 */

.floatLeft		{ float:left; margin: 15px 40px 0 0; line-height:16px; }
.floatRight		{ float:right; }
.clear			{ clear:both; }
.button			{ border:1px solid #F33; background:#FC0; padding: 3px 8px; -moz-border-radius:5px; -webkit-border-radius:5px; color:#0C0; }
.button:hover	{ background: #00F; color:#FFF; }

.label			{ color:#F90; padding: 4px 0px 0px 5px; }

.sidebar-text	{ width: 155px; margin: 20px 0px 0px 0px; text-align:center; font:Arial, Helvetica, sans-serif; font-size:12px; }
.squiggle		{ width: 155px; height: 155px; margin: 20px 0px 0px 0px; background:url(images/squiggle-box.gif); float:left}
.man1sb			{ width: 155px; height: 155px; margin: 20px 0px 0px 0px; background:url(images/man1sb.gif); float:left; }
.man1sb-text	{ font: Arial, Helvetica, sans-serif; font-style:normal; font-size:15px; margin: 30px 15px 10px 15px; color:#F15D2F; }
.man2sb			{ width: 155px; height: 155px; margin: 20px 0px 0px 0px; background:url(images/man2sb.gif); float:left}


/* STRUCTURE from css-tricks screencast #26 */


#page-wrap 		{ min-height: 100%; height:auto !important; height:100%; margin: 0 auto -100px;  width: 960px; background:white ; }
#push			{ height: 100px; }
#socialsidebar	{ width: 160px; margin: 0px 25px 10px 13px; float: left; }
#main-content	{ width: 560px;	margin: 0px 10px 10px 0px ; float: left }
#sidebar		{ width: 160px; margin: 0px 15px 10px 15px; float: right; }
#flashpresentation	{ width: 930px; height:auto; margin: 0px 15px 10px 13px ; float:left;}


/* SOCIAL SIDEBAR */

#yellow-box		{ width: 155px; height: 155px; background:url(images/yellow-box.jpg) ; margin: 0 0 10px 0; text-align:left; }
#orange-box		{ width: 155px; height: 155px; background:url(images/orange-box.jpg) ; margin: 10px 0 10px 0; text-align:left; }
#support		{ width: 160px; height: 155px; background:url(images/support.gif) ; margin: 10px 0 10px 0; text-align:left; }
#newsletter		{ width: 160px; height: 55px; background:url(images/newsletter_alt.gif) ; margin: 0; text-align:left; }
#form			{ width: 150px; height: 150px; margin: 0 0 40px 0; text-align:left;}

#supportUs		{ display: block; width: 155px; height: 155px; background: url(images/support_block_RO.gif) no-repeat 0 0;}
#supportUs:hover	{ background-position: 0 -155px;}
#supportUs span 	{ position: absolute;top: -999em;}

#supportUsthanks		{ display: block; width: 155px; height: 155px; background: url(images/support_thanks.gif) no-repeat 0 0;}
#supportUsthanks:hover	{ background-position: 0 -155px;}
#supportUsthanks span 	{ position: absolute;top: -999em;}


/* TOP BAR AND NAVIGATION from css-tricks screencast #26 */

h1#logo 		{ width: 170px; height: 133px; background:url(images/helium.jpg) top left no-repeat; text-indent: -9999px; margin: 10px 0px 0px 0px ; float: left }
#top-bar		{ padding: 0 ; width:960px; height: 165px; margin: 0px auto 10px; background:white url(images/banner.jpg) no-repeat center top;}
#top-bar-flash	{ color:#fff; width:450px; height: 120px; float: right;}

/* MENU from css-tricks screencast #26 */

#menu-bar		{ padding-top:11px; margin: 0px 0px 20px 190px }
ul#main-nav		{ width: 700px; float:left; margin: 0; }
ul#main-nav li 	{ display:inline; }
ul#main-nav li a	{ color:#FFAC0D; font-size: 14px; padding: 3px 10px 15px 10px ; }
ul#main-nav li a:hover	{ background: #F60; background:url(images/main-nav.gif) no-repeat top left; color:#FFF; padding: 35px 10px 15px 10px ; }


/* CONTENT */
.welcometext	{ color:#000; text-align:justify; font:Arial, Helvetica, sans-serif; font-size:24px; padding-bottom: 10px; margin: 5px 0px 0px 0px;}

#newsbox		{ width: 255px; float: left; height:110px; background:#FFAC0D  ; padding: 0px 10px 10px 10px; margin: 0 0 12px 0; text-align:left; }
#newsbox a		{ color:#F15D2F; }
#newsbox a:hover, #newsbox a:focus	{ color:#FFF; }
#newsbox h3		{ font-weight:bolder; font-size:16px; }
#newsbox h2		{ color:#FFF; }

#outcomesbox	{ width: 255px; float: right; height:110px; background:#FFdd00 ; padding: 0px 10px 10px 10px; margin: 0 0 12px 0; text-align:left; }
#outcomesbox a	{ color:#F15D2F; }
#outcomesbox a:hover, #outcomesbox a:focus	{ color:#FFF; }
#outcomesbox h3		{ font-weight:bolder; font-size:16px; }
#outcomesbox h2		{ color:#FFF; }

#flickr			{ width:560px; height:300px; margin: 20px 0px 20px 0px; }
.image_banner	{ width:560px; margin: 0px 0px 8px 0px; padding :0px;  }
#gallery1		{ width:500px; margin: 0px; }



/* SIDEBAR */
#sidebar a		{ text-align:left; color:#F15D2F; padding: 3px 2px 0px 0px; margin: 0; }
.sidebar-links	{ width: 155px; text-align:left; color:#FFAC0D; margin: 0; line-height:1.5em; }
#sidebar a:hover, #sidebar a:focus	{ color:#FFAC0D }
#twitter		{ width:165px; float:right; margin: 5px 0px 20px 0px;}
.sidebar-title	{ width:160px; float:right; margin: 0px 0px 10px 0px; }

#sponsorImage1	{ display: block; width: 165px;height: 175px; background: url(images/support1.jpg) no-repeat 0 0; margin: 5px 0px 20px 0px; }
#sponsorImage1 span		{ position: absolute;top: -999em;}

#sponsorImage2	{ display: block; width: 165px;height: 175px; background: url(images/support50.jpg) no-repeat 0 0; margin: 5px 0px 20px 0px; }
#sponsorImage2 span		{ position: absolute;top: -999em;}

#sponsorImage3	{ display: block; width: 165px;height: 175px; background: url(images/support400.jpg) no-repeat 0 0; margin: 5px 0px 20px 0px; }
#sponsorImage3 span		{ position: absolute;top: -999em;}


/* FOOTER from css-tricks screencast #26 */
#footer			{ height: 100px; background-color:#F15D2F; }
#footer-inside	{ width: 960px; margin: 0 auto; }
#footer a		{color:#FF0; font-size:10px; }
#footer a:hover, #footer a:focus	{color:#FFF; font-size:10px; }

#selogo			{ width: 345px; height:60px; float: left; margin: 5px 0px 0px 0px; }

#copyright		{ width: 415px; float: left; margin: 8px 20px 0 0; text-align:right; }
ul#copyright	{ margin: 0 0 0 0; padding: 0 ; text-align:left; }
ul#copyright li	{ display:inline; }

#follow			{ width:  180px; float:left; text-align:left; margin: 8px 0 0 0;}

#site-design	{ width: 40px; float: left; margin: 10px 25px 0 0; text-align:right; }