/*
Theme Name: World Aids Day 2009
Theme URI: http://www. 
Description: World Aids Day 2009
Version: 1.0
Author: diva creative, Christopher Taylor
Author URI: http://www.divacreative.com
Tags: four columns, fixed width, widgets, green
*/

/*
#################################################################################################################################
= CONTENT
#################################################################################################################################
*/

/*	
	Content:
	1. RESET AND BASE ELEMENTS
	2. MAIN STRUCTURE
	3. NAVIGATION
	4. HOME PAGE
	5. HEADER
	6. CONTENT
	7. FOOTER
	8. HEADINGS
	9. TYPOGRAPHY
	10. WORDPRESS CSS
	11. MISC
	12. TABLES
*/

/*
#################################################################################################################################
= RESET AND BASE ELEMENTS
#################################################################################################################################
*/

/* ------------ RESET ------------ */
* { margin: 0; padding: 0; }
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td 
{ margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }
body { font-size: 62.5%; line-height: 2em; }

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }
table, td, th { vertical-align: middle; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* Remove annoying border on linked images. */
a img { border: none; }
a, a:link { outline:none; border:none; }

/* ------------ COLORs ------------ */
/*
Green:		#77b800
Greys: 		#7a7a7a #6d6a6e #edefe7 #f8f8f8
Orange:		#ffa12d
Blue:		#6ad3ed
*/

/* ------------ BASE ELEMENTS ------------ */

html                { /* CSS3 = overflow-y: scroll; */ }
body				{ margin: 0 auto; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #e7e6e7 url(../images/bg-repeat.jpg) top repeat-x; }
a            		{ text-decoration: underline; outline: none; color: #777; font-weight: bold; }
a:hover				{ color: #000; }
a img				{ border: 0; background: none; }
img					{ vertical-align: middle; }
.clear 				{ clear: both; overflow:hidden; }
fieldset			{ border: 0; }

.clearfix:after { clear: both; content: '.'; display: block; visibility: hidden; height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

/*
#################################################################################################################################
= MAIN STRUCTURE
#################################################################################################################################
*/

div#wrapper 		{ position: relative; margin: 0 auto; width: 860px; background: #fafafa url(../images/bg-wrapper.gif) repeat-y;  }
div#header 			{ position: relative; top: 0; left: 0; width: 581px; border-bottom:#c7c7c7 solid 2px; z-index:10; height:96px; margin-bottom:10px; }
div#mainContent 	{ position: relative; float: left; width: 581px;  }
div#sideBar			{ position: relative; float: right; width: 262px; top: -38px;  }
div#footer			{ position: relative; clear: both; background: #ffcc0a; border-top:#c7c7c7 solid 2px; min-height: 81px; }
h1#logo				{ position:absolute; top:16px; left:16px; width:90px; height:60px; background: url(../images/logos/logo.jpg) no-repeat; text-indent:-9999px; margin:0; padding:0; } 
h1#logo a			{ display:block; width:90px; height:60px; }

.container 			{ }
.block 				{ }
.col 				{ }

/*
#################################################################################################################################
= NAVIGATION
#################################################################################################################################
*/

/* MAIN NAVIGATION ---------------------------------------- */
ul#mainNav 				{ float: right; margin: 60px 0 0 0; padding: 0; list-style: none; list-style-type: none; height:50px; }
ul#mainNav li 			{ float: left; padding: 0 0 0 2px; }
ul#mainNav li a 		{ display: block; font-size:1.2em; font-weight:bold; margin:0; padding:8px 10px 8px 10px; background: #ffcc0a; text-decoration: none; color: #000; }
ul#mainNav li a:hover 	{ background: #60cdfb; text-decoration: none; color: #FFF; }

/*
#################################################################################################################################
= HOMEPAGE
#################################################################################################################################
*/

.homeStatement 	{ text-indent: -9999px; height: 76px; width: 581px; background: url(../images/Headings/home-statement.png); margin-top: 1.5em; }

/*
#################################################################################################################################
= HEADER
#################################################################################################################################
*/

/*
#################################################################################################################################
= CONTENT
#################################################################################################################################
*/

/* MAIN CONTENT ---------------------------------------- */
.blockContent 	{ padding-left: 25px; padding-right: 10px;  }

.boxContent 			{ padding:15px 15px 15px 25px; margin-bottom: 1.5em; }
.boxContent p			{ padding:0; margin: 0; color: #FFF; font-weight: bold; font-size: 1.3em; line-height: 1.25em; }
.boxContent h3			{ padding:0; margin: 0 0 0.8em 0; color: #FFF; font-weight: bold; text-transform: uppercase; }
.boxSubTitle 			{ padding: 0; margin: 0; font-size: 15px; font-weight: bold; }
.boxTelephone 			{ font-size: 22px; }
.boxContent a 			{ color: #FFF; text-decoration: underline; }
.boxContent a:hover 	{ color: #ffcc0a; }

.color-maroon 	{ background-color: #8e6966; }

/* LISTS - ul set to position relative because of an IE bug which is caused by placing a list with a background (li background) set within a floated <div> that has been relatively positioned */
#mainContent ul { color:#8e6966; font-size:1.2em; margin-bottom:1.5em; list-style-type: none; list-style-image: none; position:relative; }
#mainContent li { background:transparent url(../images/li.gif) no-repeat scroll 0 8px; margin-bottom:5px; margin-left:27px; padding-left:13px; }

#mainContent ul.colList		{ float: left; width: 48%; color: #000; font-weight: bold; list-style-type: none; list-style-image: none; margin: 0; }
#mainContent ul.colList li 	{ background:transparent url(../images/li_blue.png) no-repeat scroll 0 8px; margin:0 1em 1em 0; padding-left:13px; }

#mainContent ul.colListBox		{ float: left; width: 48%; color: #FFF; font-weight: bold; list-style-type: none; list-style-image: none; margin: 0; }
#mainContent ul.colListBox li 	{ background:transparent url(../images/li_white.png) no-repeat scroll 0 8px; margin:0 1em 1em 0; padding-left:13px; }

/* THUMBNAILS */
.thumb 		{ float:left; text-align: center; margin-right: 15px; width: 116px; }
.thumb p 	{ line-height: 1.5em; font-size: 1em; }
.units		{
	 font-size: 18px; color: #ffcc0a; font-weight: bold; 
}

/* SIDEBAR ---------------------------------------- */

/* BUTTONS */
#btnAware			{ width:249px; height: 145px; background: url(../images/sidebar/naaw.jpg); text-indent: -9999px; padding: 0;	}
#btnAware a			{ width:249px; height: 145px; display: block;	}
#btnAware a:hover	{	}

#btnKnow1			{ width:249px; height: 268px; text-indent: -9999px; padding: 0; background: url(../images/sidebar/fact1.jpg); }
#btnKnow1 a			{ width:249px; height: 268px; display: block;	}
#btnKnow1 a:hover	{ }
#btnKnow2			{ width:249px; height: 268px; text-indent: -9999px; padding: 0; background: url(../images/sidebar/fact2.jpg); }
#btnKnow3			{ width:249px; height: 268px; text-indent: -9999px; padding: 0; background: url(../images/sidebar/fact3.jpg); }

#btnSurvey			{ width:249px; height: 145px; text-indent: -9999px; padding: 0; background: url(../images/sidebar/survey.jpg); }
#btnSurvey a		{ width:249px; height: 145px; display: block;	}
#btnSurvey a:hover	{ background: url(../images/sidebar/survey_over.jpg);	}

#btnDiary			{ width:249px; height: 145px; text-indent: -9999px; padding: 0; background: url(../images/sidebar/drinkingdiary.jpg); }
#btnDiary a			{ width:249px; height: 145px; display: block;	}
#btnDiary a:hover	{ background: url(../images/sidebar/drinkingdiary_over.jpg);	}

#btnDAAT			{ width:249px; height: 145px; text-indent: -9999px; padding: 0; background: url(../images/sidebar/daat_logo.jpg); }
#btnDAAT a			{ width:249px; height: 145px; display: block;	}
#btnDAAT a:hover	{ background: url(../images/sidebar/daat_logo.jpg);	}



/*
#################################################################################################################################
= FOOTER
#################################################################################################################################
*/

.copyright { font-size: 1em; clear: both; margin: 10px 0 0 10px; }

div#footer a, div#footer a:link 		{ color: #777;}
div#footer a:hover 						{ color: #8e6966;}

/* FOOTER NAVIGATION ---------------------------------------- */
ul#footerNav 				{  margin: 0; padding: 0; list-style: none; list-style-type: none; height:40px;  }
ul#footerNav li 			{ float: left; padding: 0 0 0 2px; }
ul#footerNav li a, ul#footerNav li a:link 			{ display: block; font-size:1.2em; font-weight:bold; margin:0; padding:8px 10px 8px 10px; background: #ffcc0a; text-decoration: none; color: #777; }
ul#footerNav li a:hover 	{ background: #60cdfb; text-decoration: none; color: #FFF; }

/*
#################################################################################################################################
= HEADINGS
#################################################################################################################################
*/

h1,h2,h3,h4,h5,h6 { }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.8em;  line-height: 1.5; margin-bottom: 1.2em; font-weight: bold; color: #8e6966; }
h4 { font-size: 1.4em; color:#000; line-height: 1.25; margin-bottom: 1.5em; font-weight: bold;  }
h5 { font-size: 1.2em; color:#8e6966; line-height: 1.25; margin-bottom: 0em; font-weight: bold; }
h6 {  }

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img { margin: 0; }

/* PAGE HEADINGS ---------------------------------------- */

h3#subHeading { margin-top: 75px; font-weight: bold; padding-left: 25px; font-size: 18px; margin-bottom: 1em; color: black;}
h4#subHeading2 { font-weight: bold; padding-left: 25px; font-size: 14px; margin-bottom: 1em; color: #777;}

h2#titleHome { position: absolute;	width: 255px; height: 48px; background: url(../images/Headings/title_home.png); text-indent: -9999px; margin-top: 10px; }
h2#titleHints { position: absolute;	width: 255px; height: 48px; background: url(../images/Headings/title_hintsAndTips.png); text-indent: -9999px; margin-top: 10px; }
h2#titleUnits { position: absolute;	width: 255px; height: 48px; background: url(../images/Headings/title_unitsAndYou.png); text-indent: -9999px; margin-top: 10px; }
h2#titleDownloads { position: absolute;	width: 255px; height: 48px; background: url(../images/Headings/title_downloads.png); text-indent: -9999px; margin-top: 10px; }
h2#titleLinks { position: absolute;	width: 255px; height: 48px; background: url(../images/Headings/title_links.png); text-indent: -9999px; margin-top: 10px; }
h2#titleSurvey { position: absolute;	width: 255px; height: 48px; background: url(../images/Headings/title_survey.png); text-indent: -9999px; margin-top: 10px; }


/*
#################################################################################################################################
= TYPOGRAPHY
#################################################################################################################################
*/

p { font-size: 1.2em; margin: 0 0 1.5em; }
p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

blockquote  { margin: 1.5em; color: #666; font-style: italic; }
strong      { font-weight: bold; }

.small { padding-left: 25px; padding-right: 10px; line-height: 1.25em; font-size: 1em; margin-bottom: 3em; }

/*
#################################################################################################################################
= WORDPRESS CSS
#################################################################################################################################
*/

/*
#################################################################################################################################
= MISC ELEMENTS
#################################################################################################################################
*/

/* Use a .box to create a padded box inside a column.  */ 
.box { padding: 1.5em; margin-bottom: 1.5em; background: #E5ECF9; }

/* In case you need to add a gutter above/below an element */
.prepend-top { margin-top:1.5em; }
.append-bottom { margin-bottom:1.5em; }

/* Use this to create a horizontal ruler across a column. */
hr.ruler {/* background:#c7c7c7; */ height:2px; margin-bottom:1.5em; padding:0; border-top:0; border-bottom:2px solid #c7c7c7; width:100%; }

/* Alignment */
.alignCenter		{ text-align: center; }
.floatLeft			{ float: left; }
.floatRight			{ float: right; }

/*
#################################################################################################################################
= TABLES
#################################################################################################################################
*/

table {  border:#CCC 1px solid; margin:0 auto 1.5em auto;  }

.head 	{ border-top:3px solid #8e6966; vertical-align:middle; background-color:#F3F4F1; padding:6px; text-align:center; font-weight:bold; font-size: 1.4em; }
.row 	{ border-top:1px solid #8e6966; vertical-align:middle; padding:6px; text-align:center; font-size: 1.2em; }

.tdBorderLeft 	{ border-left:1px solid #D5D8CE; padding:4px; width:90px; }
.tdFirst		{ padding:4px; width:170px; }
	
caption { }
		
tr { }

th, td { }
		
th { }
		
td { }