/*============================================================================
[Screen Stylesheet]
==============================================================================
Project: Veteran Assistance Association
Version: 1.0
Last Modified: 03/18/2009
Created by:   Meili Chen at Inner Circle Media 
Primary use:   Page Layouts -one & two colum layouts 
==============================================================================*/

/*=============================================================================
[Table of Contents]
===============================================================================

A. Global Reset

B. Global Formatting

C. Layout
    1. Body 
        1.1. Skip to content / a#skip
    2. Layout wrapper / div#wrapper
        2.1. Header / div#header
               2.1.1 Logo / h1
	       2.1.2  contact phone div#contactInfo			
               2.1.3 Utility navigation / ul#utility
	       2.1.3 Search / div#search			
	       2.1.4 Global navigation / div#globalNav
	 2.2. Banner section / div#banners  (home page only)
	 2.3. page title section / div#pageTitle 
	 2.4. Content section / div#content   			
	        2.4.1 Primary column / div#primeCol 
			 2.4.1.1 Main content div#mainContact
		2.4.2 Second (Left) column / div#secondCol 
			 2.4.2.1. video frame div.videoFrame
			 2.4.2.2 contact button  div.contactBtn
	 2.5 Footer / div#footer 
		2.5.1 copyright /div.copyright
		2.5.2 foo nav / div#footNav 

===============================================================================*/

/*==============================================================================
[Color codes]
================================================================================
#ffffff  	white: (main content background, global nav text link, page title text color)
#000000	black (body text)
#857b6f	brown (body background)
#bf1e2e		red (utility link hover, footer nav text hover, content red text, contact info phone number, learn  in banner background)
#ad0415	dark red (learn hover in banner)
#336699	blue (default link color)
#003a7a	dark blue (foot text)
#90aade	light blue (state name color in contact info bar)
#ead07f	yellow (global nav text hover)
#c8c5c1	light grey (h line color)
==================================================================================*/

/*=================================================================================
A. GLOBAL RESET
===================================================================================*/

body {font: 62.5%/1.4 Arial,verdana,Helvetica,Jamrul,sans-serif;  background: #fff; color: #000; margin: 0; padding: 0;}
p, h1, h2, h3, h4, h5, h6, fieldset, form, label, input, textarea, legend, dl, dt, dd, table, caption, th, td, blockquote, cite {
 margin: 0; padding: 0; font-size: 1em;}
ul, ol, li, ul *, ol *  {font-size: 1em;}

input, textarea {font-family: Arial,Verdana,Helvetica,Jamrul,sans-serif;}
textarea {overflow: auto;}
table {border-collapse: collapse;	margin-bottom: 1em;}
td, th {padding: 0.1em 1em;}

img {border: 0;}
acronym, abbr {border-bottom: 1px dotted; cursor: help;}
cite {font-style: normal;}
:focus {outline: 0;}

/*====================================================================================
B. GLOBAL FORMATTING  
=====================================================================================*/
.clear {clear: both; height: .001em; font-size: .001em;}
.left {float: left; display: inline;}
.right {float: right; display: inline;}
.right img {margin: 0 0 10px 10px;}
.left img {margin: 0 10px 10px 0px;}
.center {text-align: center;}
.block {display: block;}
.bld {font-weight: bold;}
.biggerTxt {font-size: 1.1em;}
.smallerTxt {font-size: .90em;}
.redTxt {color: #bf1e2e;}
.current {font-weight: bold;}

a {color: #336699; text-decoration: none; font-weight: bold;}
a:hover {color: #bf1e2e;}

h1 {font-size: 1.3em;line-height: 120%;}
h2 {font-size: 1.2em;line-height: 120%;}
h3 {font-size: 1.15em;line-height: 120%;}
h4 {font-size: 1.1em;line-height: 120%;}
h5 {font-size: 1em;}
h6 {font-size: .95em;}
h1, h2, h3, h4, h5, h6 {margin-bottom: 1em;}

hr {border: none; margin: 15px 0; background: #c8c5c1; padding: 0; height: 1px;}


/*======================================================================================
C. LAYOUT 																		             *
=======================================================================================*/

/*--------------------------------------------------------------------------------------------
 1. Body / body                                                                                                                                                             
----------------------------------------------------------------------------------------------*/
body {background: #857b6f url(../images/body_bg.jpg) repeat-x 0 0; }

	/* 1.1. Skip to content / a#skip */
   #skip {position: absolute; top: -1000px;} 
	 
/*------------------------------------------------------------------------------------------
2. Layout Wrapper                                                                                                                                                     
---------------------------------------------------------------------------------------------*/
#wrapper {color: #231f20; font-size: 1.4em; margin: 10px auto; padding: 15px 20px 20px 20px; width: 915px; background: #fff; overflow: hidden;}
#wrapper p {margin-bottom: 1em;}
      
	/*.........................................................................
	 2.1. Header / div#header 
	...........................................................................*/
   #header {background: #fff; width:100%; margin: 0 0 8px 0;  overflow: hidden;  }
      
		/* 2.1.1 logo / h1 */
      #header h1 {height: 50px; width: 245px; margin: 3px 0 0 0; padding: 0; background: #fff url(../images/vaa_logo.jpg) no-repeat 0 0;  text-indent: -9000px; float: left; }
      #header h1 a {display: block; height: 50px; width: 245px; background: #fff url(../images/vaa_logo.jpg) no-repeat 0 0;}
      
		/*2.1.2  contact phone div#contactInfo */
		#contactInfo {line-height: 110%; float: right; width: 560px; text-align: right; margin: 0 0 17px 0; color: #bf1e2e; font-size: 1.05em; font-weight: bold;}
		#contactInfo .state {float: right; color: #90aade; padding: 2px 10px;}
		#contactInfo .phone {float: right; text-align: left; background: url(../images/phone_icon.gif) no-repeat 0 50%; padding: 2px 0px 2px 35px; }
		
		/*2.1.3 utility / #utility */
      #utility {font-size: 1.em; line-height: 110%; width: 660px; padding: 0px; margin: 0px 0px 5px 0;float:right; text-align: right; overflow: hidden;}
    	#utility ul {padding: 0; margin: 0px; float: right; border-left: 2px solid #d05a66;}
		#utility ul li {display: inline; margin: 0; padding: 0px;}
		#utility ul li a {color: #003a7a; font-weight: bold; padding: 5px 18px; border-right: 2px solid #d05a66; }
      #utility ul li a:hover, #utility ul li.current a {color: #bf1e2e; text-decoration: none;}
	
	  /* 2.1.4. Global navigation / div#globalNav */
	  	#globalNav {font-size: 1.1em; background: #003a7a; border-bottom: 4px solid #bf1e2e; width: 100%; margin: 10px 0 0px 0px; display: block; float: right; overflow: hidden;}
      #globalNav ul {float: right;  padding: 5px 0 0 0; margin: 0px;}
     	#globalNav  ul a {display: block;}
      #globalNav  ul li {float: left; display: inline; padding: 0px;  margin: 0;}
      #globalNav  ul li a{display: block;  border-right: 2px solid #bf1e2e;vertical-align: middle; padding:  3px 16px 5px 16px; font-weight: bold; color: #fff; text-align: center;}
		#globalNav ul li a:hover, #globalNav ul li.current a {text-decoration: none; color: #ead07f;}
	
		#globalNav ul li.last a {border-right: none;}
		#globalNav ul li.last a:hover, #globalNav ul li.last .current a  {border-right: none;}
			
	/*............................................................................
	   2.2. Banner section / div#banners 
	 ................................................................................. */	
	#banner {width: 100%; height: 232px;display: block; background: #fff url(../images/banner.jpg) no-repeat 0 0; padding: 0px; margin: 0 0 15px 0; overflow: hidden;}
	#banner .tagline {width: 100%;  height: 150px; margin: 0; padding: 0; display: block;cursor: default; text-indent: -9000px;}
	#banner #learn {position: relative; bottom: -20px; width: 630px; float: right; background: #bf1e2e url(../images/learn_arrow.gif) no-repeat 10px 10px; padding: 8px 15px 8px 30px; font-size: 1.1em; font-weight: bold; color: #fff; line-height: 110%;}
	#banner #learn a {color: #fff; }
	#banner #learn:hover {background: #ad0415 url(../images/learn_arrow.gif) no-repeat 10px 10px;  }
	
	/*............................................................................
	   2.3. page title section / div#pageTitle 
	 ................................................................................. */	
	#pageTitle {background: #c3202a url(../images/page_title_bg.jpg) no-repeat 0 0; width: 100%; height: 83px; margin: 0 0 20px 0;}
	#pageTitle h1 {color: #fff; margin: 0; padding: 35px 10px 5px 15px; line-height: 110%; font-size: 1.8em;}
	
	/*............................................................................
	   2.4. content section / div#content 
	 ................................................................................. */
   #content {background: #fff;  width: 100%; margin: 0 0 25px 0; padding: 0; clear: both; overflow: hidden;}
   
		/* 2.4.1 Primary column / div#primeCol */
		#primeCol { float: left; width: 565px; margin: 0px; padding: 0; border-top:3px solid #003a7a; overflow: hidden; }
		#home #primeCol {border-top: none;}
		.oneCol #primeCol {width: 100%;}
      .twoCol #primeCol{width: 565px;}
     	
			/* 2.4.1.1 Main content div#mainContact */
         #mainContent {padding: 30px 20px 20px 20px;}
		   #home #mainContent {padding: 10px 15px; }
		   .oneCol #mainContent {}
         .twoCol #mainContent {}
			
			h2.greeting {border-bottom: 2px solid #adc0d4; font-size: 1.22em; color: #003a7a; margin: 0 0 1em 0; padding: 0 5px 5px 5px;}
			.contactLink {background: #ffe9b9 url(../images/contact_arrow.gif) no-repeat 10px 8px; border: 1px solid #b2c4d7; color: #0066cc; font-weight: bold; padding: 5px 10px 5px 30px; line-height: 120%;  width: 270px; margin: 15px 0;}
			.contactLink a{color: #0066cc; display: block;}
			.contactLink a:hover {color: #d00039;}
			
			ul.redDot {list-style: none; margin: 0 0 15px 0; padding: 0 0 0 10px;}
			ul.redDot li {list-style: none; background: url(../images/red_dot.gif) no-repeat 0px 7px; padding: 0 5px 5px 15px; margin:0;}
			
		/* 2.4.2 Second (Left) column / div#secondCol */
   	#secondCol {float: right; display: block; width: 325px;  margin: 0 0 0 15px; border-top: 3px solid #852630; overflow: hidden;}
		#home #secondCol {margin-top: 15px; border-top: none;}
		.oneCol #secondCol{display: none;}
	  
  	   #home #secondCol .content {margin-top: 0px;}	
		#secondCol .content {line-height: 120%; overflow: hidden; margin-top: 30px;}	
		#secondCol img {max-width: 300px;}
			
			/* 2.4.2.1. video frame div.videoFrame*/
			.videoFrame {background: url(../images/video_frame_top.jpg) no-repeat 0 0; overflow: hidden; margin: 0; margin-bottom: 20px;}
			.video {text-align: center; margin: auto; padding: 22px 22px; display: block; background:  url(../images/video_frame_bottom.jpg) no-repeat 0 100%;}
			.video img {text-align: center; margin: auto; display: block; max-width: 295px;}
			
			/* 2.4.2.2 contact button  div.contactBtn*/
			.contactBtn {background: url(../images/contact_btn.gif) no-repeat 0 0; height: 137px; width: 309px; margin: 0 auto 10px auto;}
			.contactBtn .go {background: url(../images/contact_btn.gif) no-repeat 0 0; display: block; height: 137px; width: 309px; text-indent: -9000px;  width: 100%;}
			.contactBtn .go a{background: url(../images/contact_btn.gif) no-repeat 0 0; display: block; height: 137px; width: 309px;}
			.contactBtn .go a:hover{background: url(../images/contact_btn_over.gif) no-repeat 0 0; display: block; height: 137px; width: 309px;}
			.contactBtn .phone {position: relative; bottom: 40px; left: 50px; font-size: 1.1em;  padding: 5px; color: #003a7a; font-weight: bold;}
		   html>body .contactBtn .phone {background: url(../images/contact_phone_bg.png) no-repeat 0 50%;}
	/*..................................................................................
	  2.5 Footer / div#footer  
	  .................................................................................*/
   #footer {font-size: .95em; color: #003a7a; overflow: hidden; margin: 5px 0; padding: 20px 10px 5px 10px; background: #fff; border-top: 3px solid #b2c4d7;}
		
		/*2.5.1 copyright /div.copyright */
		#footer .copyright {float: left; width: 270px;}
		
		/* 2.5.2 foo nav / div#footNav */
		#footNav {overflow: hidden; width: 580px; float: right;}
      #footNav ul {float: right; margin: 0; padding:0;}
      #footNav ul li {display: inline; padding: 0px 10px; border-right: 1px solid #003a7a;}
      #footNav ul li a {font-weight: normal; color: #003a7a; margin: 0;}
      #footNav ul li a:hover, #footNav ul li.current a {color: #bf1e2e;text-decoration: underline;}