/**************************************************/
/**                     By                       **/
/**	                Aaron Miller                 **/
/**                                              **/
/**           ---  CSS DIRECTORY  ---            **/
/**                                              **/
/**************************************************/
/**    1. GLOBAL STYLES                          **/
/**    		 - Headings                          **/
/**    		 - Lists                             **/
/**    		 - Other                             **/
/**    2. HEADER                                 **/
/**          - Left                              **/
/**          - Middle                            **/
/**          - Right                             **/
/**    3. RIGHT NAVIGATION                       **/
/**    4. POLL                                   **/
/**    5. LIGHTBOX                               **/
/**    6. CONTENT                                **/
/**    		 - News module                       **/
/**    		 - Project details                   **/
/**    		 - Two column layout                 **/
/**    7. FORM STYLES                            **/
/**    		 - Form validation                   **/
/**    8. FOOTER                                 **/
/**************************************************/

/**************************************************/
/**********        GLOBAL STYLES         **********/
/**************************************************/

* { margin: 0; padding: 0; border: 0; }
body { font: 12px Arial, Helvetica, sans-serif; color: #777; line-height: 20px; background-color: #888; }
a { color: #69F; text-decoration: none; outline: none; }

.sideContainer a:hover, .mainContent a:hover, .footer a:hover  { text-decoration: underline; }

/********** Headings *********/

h2.intro { padding-bottom: 9px; color: #333; font: 24px Georgia, "Times New Roman", Times, serif; line-height: normal; }
h2.section { padding-bottom: 8px; color: #444; font: bold 16px Georgia, "Times New Roman", Times, serif; }
h2 { color: #C00; font: 18px Georgia, "Times New Roman", Times, serif; }
h3 { font: 14px Arial, Helvetica, sans-serif; color: #333; }

.textalign { vertical-align: middle; }

/********** Lists **********/

ul.list { padding-bottom: 21px; }
ul.list li { padding-left: 49px; list-style-type: none; background: url('../images/list.gif') no-repeat 37px 7px; }
ul.noList { margin: 0; padding: 0 0 19px 0; }
ul.noList li { list-style-type: none; }
ul.noStyle { margin: 5px 0 0 0; padding: 0; }
ul.noStyle li { font-size: 12px; padding: 4px 0 4px 0; list-style-type: none; }
ul.noStyle li.rss { padding-left: 25px; background: url('../images/icon_rss.gif') no-repeat 0 3px; }
ul.noStyle li.facebook { padding-left: 25px; background: url('../images/icon_facebook.gif') no-repeat 0 3px; }
ul.noStyle li.twitter { padding-left: 25px; background: url('../images/icon_twitter.gif') no-repeat 0 3px; }
ul.noStyle li.delicious { padding-left: 25px; background: url('../images/icon_delicious.gif') no-repeat 0 3px; }
ul.noStyle li.stumbleupon { padding-left: 25px; background: url('../images/icon_stumbleupon.gif') no-repeat 0 3px; }
ul.noStyle li.google { padding-left: 25px; background: url('../images/icon_google.gif') no-repeat 0 3px; }
ul.pdf li { padding-left: 21px; list-style-type: none; background: url('../images/icon_pdf.gif') no-repeat 0 2px; }
ul.icons { list-style-type: none; background: url('../images/.gif') no-repeat 37px 7px; }
ul.icons li { float: left; padding-left: 15px; }
ul.icons li.site { background: url('../images/icon_site.gif') no-repeat 0 5px; }
ul.icons li.screen { margin-left: 18px; background: url('../images/icon_screenshot.gif') no-repeat 0 5px; }
ul.icons li.nomargin { margin: 0; }

/********** Other **********/

p { padding-bottom: 21px; }

span.dateNews { font-size: 10px; color: #888; text-transform: uppercase; }
.recentDate { float: right; font-size: 10px; color: #888; text-transform: uppercase; }

h1.error { padding-bottom: 34px; font: 72px Georgia, "Times New Roman", Times, serif; color: #CCC; line-height: 34px; }
h1.feedback { padding-bottom: 30px; font: 143px Georgia, "Times New Roman", Times, serif; color: #CCC; line-height: 102px; }

.spacing { margin-top: 14px; }
.divider { margin: 5px 0 6px 0; height: 1px; border-top: solid 1px #F8F8F8; border-bottom: solid 1px #F8F8F8; background-color: #DDD; }
.clear { margin: 0; padding: 0; height: 0; clear: both; }

/**************************************************/
/**********            HEADER            **********/
/**************************************************/

.tag { min-width: 825px; height: 30px; border-bottom: solid 8px #B00; background: url('../images/bg_header.gif') repeat-x #CCC; }
.tag .alignment { margin: 0 auto; padding: 5px 0 0 8px; width: 817px; font-size: 11px; }

.header { min-width: 825px; background-color: #FFF; border-bottom: solid 1px #DDD; }

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

/********** Left *********/

.logo { float: left; width: 299px; height: 95px; border-right: solid 1px #DDD; background: url('../images/logo_awmcreative.gif') left no-repeat; }
.logo a { display: block; width: 225px; height: 56px; }
.logo h1 { visibility: hidden; }

/********** Middle **********/

.nav { float: left; width: 396px; line-height: normal; } 
.nav li { float: left; list-style-type: none; border-right: solid 1px #DDD; }
.nav li a { display: block; width: 80px; min-height: 70px; height: auto; padding: 23px 8px 0 8px; font: 11px Arial, Helvetica, sans-serif; color: #555; border: solid 1px #FFF; text-decoration: none; background: url(../images/bg_nav.gif) no-repeat; }
.nav li a:hover { background: #f4f4f4; }
.nav li a strong { display: block; padding-bottom: 6px; font: 14px Arial, Helvetica, sans-serif; color: #555; font-weight: bold; }
.nav li a:hover strong { color: #C00; }
.nav .select { color: #C00; }

/********** Right **********/

.photo { float: left; width: 129px; height: 95px; background: url('../images/aaron_miller.gif') no-repeat; }

/**************************************************/
/**********       RIGHT NAVIGATION       **********/
/**************************************************/

#navigation ul { width: 213px; }
#navigation a.head { display: block; padding: 7px 0 10px 0; cursor: pointer; font: bold 14px Arial, Helvetica, sans-serif; color: #444; text-decoration: none; background: url('../images/bg_div_expand.gif') no-repeat bottom; }
#navigation a.nopadding { padding-top: 0; }
#navigation a.head:hover { color: #C00; }
#navigation a.selected { font: 18px Georgia, "Times New Roman", Times, serif; color: #C00; background: none; background: url('../images/bg_divider.gif') bottom no-repeat; }
#navigation a.current { background-color: #EDEDED; }
#navigation li { list-style: none outside none; display: inline; }
#navigation li li a { display: block; padding: 9px 0 11px 0; font: bold 12px Arial, Helvetica, sans-serif; color: #69F; text-decoration: none; background: url('../images/bg_divider.gif') bottom no-repeat; }
#navigation li li a:hover { background-color: #EEE; text-decoration: underline; }

/**************************************************/
/**********            POLL              **********/
/**************************************************/

/* Bar Graphs */
.graph { width: 250px; position: relative; right: 30px; }
.bar-title { position: relative; float: left; width: 104px; line-height: 20px; margin-right: 17px; font-weight: bold; text-align: right; }
.bar-container { position: relative; float: left; width: 110px; height: 10px; margin: 0px 0px 15px; }
.bar-container div { background-color: #cc4400; height: 20px; }
.bar-container strong { position: absolute; right: -32px; top: 0px; overflow: hidden; }
#poll-results p { text-align: center; }

/**************************************************/
/**********           LIGHTBOX           **********/
/**************************************************/

#lightbox {	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#lightbox img { width: auto; height: auto; }
#lightbox a img { border: none;}

#outerImageContainer { position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer { padding: 10px; }
#loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav { left: 0; }
#hoverNav a { outline: none; }
	
#prevLink, #nextLink { width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
	
#imageDataContainer { font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%; }
#imageData { padding:0 10px; color: #666; }
#imageData #imageDetails { width: 70%; float: left; text-align: left; }	
#imageData #caption { font-weight: bold; }
#imageData #numberDisplay { display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose { width: 66px; float: right; padding-bottom: 0.7em; outline: none; }	 	
	
#overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

.hide {	visibility: hidden; }

/**************************************************/
/**********           CONTENT            **********/
/**************************************************/

.contentWrp { min-width: 825px; background: url('../images/bg_content.png') #F4F4F4 top repeat-x; }
.contentWrp .sideBar { margin: 0 auto; width: 825px; min-height: 500px; background: url('../images/bg_sidebar.png') top right repeat-y; }

.mainContent { float: left; width: 572px; padding: 42px 16px 49px 8px; }

.sideContainer { float: left; padding-bottom: 47px; width: 229px; }
.sideGradient { height: 42px; background: url('../images/bg_top_sidebar.png') top no-repeat; }
.sideContent { padding-left: 16px; }

.leftColumn { float: left; width: 273px; padding: 13px 13px 0 0; }
.rightColumn { float: left; width: 273px; padding: 13px 0 0 13px; }

a.noUnderline { font: 14px Arial, Helvetica, sans-serif; color: #333; font-weight: bold; }
a.noUnderline:hover { color: #C00; text-decoration: none; }
a.imgwrp { display: block; border: solid 1px #777; }
a.imgwrp:hover { border: solid 1px #AAA; } 

a.borderwrp { display: block; padding: 10px; background: #fff; border: solid 1px #AAA; }
a.borderwrp:hover { border: solid 1px #777; }

/********** Twitter **********/

#twitter { padding: 10px 12px 8px 12px; font-size: 11px; line-height: 16px; background-color: #FFF; border: solid 1px #DDD; }
ul#twitter_update_list li { padding-left: 30px; background: url(../images/tweet.gif) no-repeat 0 5px; list-style: none; margin-bottom: 10px; }
ul#twitter_update_list li a { color: #C00; }
ul#twitter_update_list li span { display: block; }

/********** News module **********/

.newsContainter { width: 212px; }
.newsContainer .date span { font-size: 14px; }
.date { float: left; padding: 4px 0 3px 0; width: 29px; color: #AAA; line-height: normal; font-size: 10px; text-transform: uppercase; text-align: center; }
.newsBlurb { float: left; width: 183px; }

/********** Project details **********/

.projectContainer { width: 572px; padding-top: 13px; }
.projectName { float: left; width: 400px; }
.projectDate { float: left; padding-top: 4px; width: 172px; color: #AAA; font: 14px Georgia, "Times New Roman", Times, serif; text-align: right; }

/********** Two column layout **********/

.leftBar { float: left; padding-right: 8px; width: 132px; }
.middleContent { float: left; padding-left: 8px; width: 423px; }

/**************************************************/
/**********         FORM STYLES          **********/
/**************************************************/

.txtField { margin: 5px 0 5px 0; padding: 5px 5px 2px 5px; width: 263px; height: 18px; color: #777; font: 14px Arial, Helvetia, sans-serif; border-top: solid 1px #BBB; border-right: solid 1px #BBB; border-bottom: solid 1px #BBB; border-left: solid 5px #BBB; background: url('../images/bg_form.gif') repeat-x; }
.formLabel { padding: 3px 25px 1px 0; }
.formLabel2 { padding: 8px 25px 0 0; }
.optional { padding: 3px 0 1px 0; color: #AAA; }
.space { padding: 6px 0 6px 0; }
.button { margin: 7px 0 7px 0; }
textarea { margin: 5px 0 5px 0; padding: 5px 5px 2px 5px; width: 263px; height: 111px; color: #777; font: 14px Arial, Helvetia, sans-serif; border-top: solid 1px #BBB; border-right: solid 1px #BBB; border-bottom: solid 1px #BBB; border-left: solid 5px #BBB; background: url('../images/bg_textarea.gif') repeat-x; }

/********** Form Validation **********/

#formValidation .red { border-top: 1px solid #555; border-right: 1px solid #555; border-bottom: 1px solid #555; border-left: 5px solid #555; background: url('../images/bg_required.gif') repeat-x; }
#formValidation .errorMessage { margin-left: 22px; color: #555; font-size: 12px; vertical-align: top; line-height: 37px; }

/* phpTests */

.noRecords { padding: 5px 8px 5px 8px; font-weight: bold; color: #222; background-color: #EEE; border: solid 1px #DDD; }
.formBtn { padding: 2px; font-weight: bold; color: #333; border: solid 1px #777; }
table.results thead { background-color: #EEE; border-bottom: solid 1px #777; }
table.results td { padding: 2px 10px 2px 10px; }

/**************************************************/
/**********            FOOTER            **********/
/**************************************************/

.footer { color: #EEE; min-width: 825px; border-top: solid 1px #000; background-color: #666; }
.footerBorder { min-width: 825px; border-top: solid 2px #555; }
.footer h3 { color: #FFF; font-size: 14px; font-weight: bold; }
.footer .container { margin: 0 auto; padding: 17px 0 17px 8px; width: 817px; min-width: 817px; font-size: 11px; line-height: normal; background-color: #666; }
.footer .content { float: left; width: 196px; }
.footer .social { float: left; width: 229px; }
.footer .social .left { float: left; width: 114px; }
.footer .social .right { float: left; width: 114px; }
.legal { min-width: 825px; border-top: solid 1px #555; background-color: #888; }
.legal .bottomContainer { margin: 0 auto; padding-left: 8px; width: 817px; font-size: 11px; color: #EEE; }
.legal .bottomContainer .legalContainer { float: left; padding: 17px 0 17px 0; width: 400px; }
.legal .bottomContainer .validationContainer { float: left; padding: 17px 0 17px 0; width: 417px; text-align: right; }
.footer a, .legal a { color: #EEE; }
.footer a:hover, .legal a:hover { color: #333; background-color: #EEE; text-decoration: none; }