/*
--------------------------------------------------------------------------------------------------------------------------
= ACKNOWLEDGEMENT
--------------------------------------------------------------------------------------------------------------------------
*/

/*
Author:		Christopher Taylor, Stephen Dupree, Tim Parmee, Diva Creative
Date:		Copyright January 2009
Version:	1.0
*/

/* 
-----------------------------------------------------------------------------------------------------------
RESET
-----------------------------------------------------------------------------------------------------------
*/

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: 1.5em; font-family: Helvetica, Arial, sans-serif; }

/* 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 { outline:none; }

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

/* Colors
#ffffff
*/

html { background:url(../images/bg.jpg) top repeat;  }	
body { margin:0px auto; text-align:center; }

/* 
-----------------------------------------------------------------------------------------------------------
MAIN LAYOUT ELEMENTS
-----------------------------------------------------------------------------------------------------------
*/

.container { margin: 0 auto; width:740px; }

div#wrapperOuter 	{ margin: 0 auto; width:800px; background:url(../images/bg_wrapper.jpg) repeat-y; text-align:left; }
div#wrapper 		{ margin: 0 auto; width:788px; background:url(../images/bg_container.png) no-repeat center top; }
div#wrapperFooter 	{ margin: 0 auto; width:800px; background:url(../images/bg_footer.jpg) no-repeat center top; height:200px; }

div#top 		{ margin: 0 auto; width:800px; height:95px; background:url(../images/bg_top.jpg) no-repeat top center; }
div#header 		{ position:relative; height:355px; background:url(../images/header_bg.jpg) no-repeat top center;  }
div#content 	{ position:relative;width:788px; background: #FFFFFF url(../images/bg_content.jpg) no-repeat top center; }
h1#logo 		{ width:100px; height:100px;text-indent:-9999px; display:block;}
div#footer		{ position:relative; height:200px; }

.clear { clear: both; display: block; overflow: hidden; width: 0; height: 0; }

/* Sets up basic grid/column floating and margin. */
div.col-1, div.col-2 { float: left; margin-right: 35px; display: inline; }
* html div.col-1, * html div.col-2 { overflow-x: hidden; }
div.col-1 { margin-left:35px; }

/* Use these classes to set the width of a column. */
.col-1 { width: 465px; } /* main content */
.col-2 { width: 218px; } /* side bar */

/* The last column in a row needs this class. */
.last, div.last { margin-right: 0; }

.lastElement { margin-bottom:0px; }

/* 
-----------------------------------------------------------------------------------------------------------
HEADER ELEMENTS
-----------------------------------------------------------------------------------------------------------
*/

h2#titleWelcome	{ position:absolute; top:26px; left:455px; width:308px; height:79px; background:url(../images/title_welcome.png) no-repeat; text-indent:-9999px; display:block; }
#intro { position:absolute; top:91px; left:482px; width:308px; height:91px; background:url(../images/title_statement.png) no-repeat; text-indent:-9999px; display:block; }
#introList { position:absolute; top:170px; left:482px; width:280px; }

#introList p { color:#FFFFFF; font-weight:bold; line-height:1.2em; }

/* 
-----------------------------------------------------------------------------------------------------------
MAIN CONTENT ELEMENTS
-----------------------------------------------------------------------------------------------------------
*/

.box 		{ margin: 0em 2em 2em 4em; padding-top:2em; }

h3#titleCom 		{ width:308px; height:79px; background: url(../images/title_community.png) no-repeat; text-indent:-9999px; display:block; margin-top:50px; }
h3#titleContact 	{ width:197px; height:73px; background: url(../images/title_contact.png) no-repeat; text-indent:-9999px; display:block; margin-top:50px; }

/* Col 2 */
.col-2 ul { list-style: none; padding:0; margin:0; font-weight:bold; }
.col-2 ul li { border-bottom:#999999 dotted 1px; padding:1em 0 1em 0; }
.col-2 ul li.first { padding-top:0; }

/* Col 1 */
.col-1 ul 	{ margin-left:200px; margin-right:0; font-weight:bold; }
.col-1 ul.norm 	{ margin-left:50px; margin-right:0; font-weight:bold; }

.boldCopy { font-size:14px; color:#000000; font-weight:bold; margin-bottom:1em; }

/* 
-----------------------------------------------------------------------------------------------------------
FOOTER ELEMENTS
-----------------------------------------------------------------------------------------------------------
*/

div#divaLogo 	{ position:absolute; top:150px; left:682px; height:26px; width:88px; clear:both; background:url(../images/logo_diva.png) no-repeat; text-indent: -9999px; margin:0; padding:0; }
div#divaLogo a 	{ height:26px; width:88px; background:  no-repeat; display:block; }

/* 
-----------------------------------------------------------------------------------------------------------
TYPOGRAPHY
-----------------------------------------------------------------------------------------------------------
*/

h1, h2, h3, h4, h5, h6, p, ul, label { font-family: Helvetica, Arial, sans-serif; }

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

h1,h2,h3,h4,h5,h6 { font-weight: bold; color: #401e6c; }

h1 { font-size: 3em; line-height: 1; margin-bottom: 0.5em; }
h2 { font-size: 2em; margin-bottom: 0.75em; }
h3 { font-size: 1.5em; line-height: 1; margin-bottom: 1em; }
h4 { font-size: 1.2em; line-height: 1.25; margin-bottom: 1.25em; }
h5 { font-size: 1em; font-weight: bold; margin-bottom: 1.5em; }
h6 { font-size: 1em; font-weight: bold; }

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

/* 
-----------------------------------------------------------------------------------------------------------
TEXT ELEMENTS
-----------------------------------------------------------------------------------------------------------
*/

p { font-size: 1em; margin-bottom:1.5em; color: #000; }
p img.left { float: left; margin: 0 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a { color:#000; text-decoration: underline; font-weight:bold; }
a:focus, a:hover { color: #000; }

/* 
-----------------------------------------------------------------------------------------------------------
LISTS
-----------------------------------------------------------------------------------------------------------
*/

li ul, li ol { margin:0 1.5em; }
ul, ol { margin: 0 1.5em 1.5em 1.5em; font-size:1em;  color:#72b84c; }

ul { list-style-type: disc; }
ol { list-style-type: decimal; }

/* 
-----------------------------------------------------------------------------------------------------------
MISC ELEMENTS
-----------------------------------------------------------------------------------------------------------
*/

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right {	text-align: right; }
.align-center { display: block; margin-left: auto; margin-right: auto; }


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

.last-bottom { margin-bottom:0; }

/* Use this to create a horizontal ruler across a column. */
hr { background: #999; color: #999; clear: both; float: none; width: 100%; height: .1em; margin: 0 0 1.5em; border: none; }
hr.space { background: #fff; color: #fff; }