/*
						:::::::::   :::::::::       squarehead design studio
						:::::::::   :::::::::
						:::::::::   :::::::::
						:::::::::   :::::::::
											 
						:::::::::   :::::::::       www.squarehead.com       
						:::::::::   :::::::::       sblissinc@me.com       
						:::::::::   :::::::::       845.389.8953
						:::::::::   :::::::::    
				
.............................................................................................................................

						PALETTE

						#345493 blue

:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

useful but hard to remember stuff:

-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px;
-moz-border-radius: 6px; -webkit-border-radius: 6px; 
-moz-box-shadow: 0 1px 3px #000000; -webkit-box-shadow: 0 1px 3px #000000;

*/

body#front { background: #345493 url("../img/bkgd.jpg") repeat-x 0 0; }
body { background: #345493; }
#frame { margin: 0 auto 0; width: 960px; }

/*	HEADER
-------------------------------------------------------------------------------------------------------------------*/
#header  { margin: 0 auto 0; width: 960px; position: relative; height: 8em; }
#header h1 { color: #FFFFFF; font-weight: bold; font-size: 2.4em; margin: 3em 0 0;}
#header h1 { 
	padding-top: 15px;
	background: url("../img/ARD_mark_reverse.png") no-repeat 0 0; color: #FFFFFF; padding-left: 50px; height: 38px; }
#header h2 { font-weight: bold; font-size: 1.8em; line-height: 1.2em; color: #444444; margin: 1em 0 0; }

/* ---> header on front page     */
body#front #header  { height: 10em; }
body#front #header h1 { background: url("../img/ARD_mark.png") no-repeat 0 0; color: #222222; }

/*	SECONDARY NAVIGATION
-------------------------------------------------------------------------------------------------------------------*/
#secondary { 
	position: fixed; background: #000000; top: 0; z-index: 20000;
	height: 2.8em; margin-left: 0; margin-right: -100%; width: 100%; overflow: hidden; }
#secondary ul { 
	margin: 0 auto 0; width: 960px; list-style: none;}
#secondary li { float: left; padding: 0; border-left: 1px solid #595959; height: 2.8em;}
#secondary li.last { border-right: 1px solid #595959;}
#secondary li a { 
	color: #AAAAAA; display: block; padding: .8em 1.5em;  letter-spacing: .05em; font-size: 1.2em;}
#secondary li a:hover { color: #FFFFFF; background: #345493;}

/*	CONTENT PANELS
-------------------------------------------------------------------------------------------------------------------*/
/* ---> main content panel     */
.content-panel { float: left; background: #FFFFFF; width: 100%; padding: 30px 0;}
.content { margin: 0 auto 0; width: 960px; clear: both;}

.content-row { width: 715px; float: right; }
.column { width: 245px; float: left; padding-bottom: 20px;}
.column.double { width: 490px;}

.lastsingle { width: 225px; }
.column.double.lastdouble { width: 470px; }

/* ---> front page overrides     */
body#front .content-panel { 
	color: #FFFFFF; background: #345493 url("../img/bkgd_blue_stripes.jpg") repeat-y 0 0; }
body#front .content-panel p { color: #D6DDE9;}
body#front .icon { float: left; margin: 0 60px 0 0;}
body#front .content-panel h3 { color: #FFFFFF;}


/*	FOOTER
-------------------------------------------------------------------------------------------------------------------*/
#footer { 
	font-size: 1.2em; line-height: 1.4em; float: left; background: #333333; color: #AAAAAA; width: 100%; padding: 30px 0; }
#footer h4 { font-size: 1.1em; font-weight: bold; margin-bottom: .2em; color: #CCCCCC;}
#footer a { color: #AAAAAA; display: block; padding: 0 0 0 8px; background: url("../img/link_arrow_gray.png") no-repeat 0 50%;  }
#footer a:hover { color: #DDDDDD;  background: url("../img/link_arrow_white.png") no-repeat 0 50%; }
#footer .rule { height: 2px; margin: 10px 0; border-bottom: 1px solid #666666;}

/*	GENERIC LIST MENU
-------------------------------------------------------------------------------------------------------------------*/
.menu { list-style: none; margin: 0 0 1em;}
.menu li { padding: 0;}

/*	QUOTES
-------------------------------------------------------------------------------------------------------------------*/
.content-panel blockquote { 
	background: url("../img/quotes.png") no-repeat 0 0; padding: 0 0 0 60px; margin-bottom: 30px; }
.content-panel blockquote p { color: #345493; margin: 0 0 .4em; line-height: 1.4em; font-size: 1.4em; }	
.content-panel blockquote p.author { color: #555555; font-size: 1.1em; font-style: normal;}	
	
/*	PROJECTS
-------------------------------------------------------------------------------------------------------------------*/
/* ---> individual project items     */
.project-item { 
	background: url("../img/bkgd_project_top_gray.jpg") no-repeat 0 0;
	width: 470px; margin-bottom: 0; float: left;}	
.project-item.selected { background: url("../img/bkgd_project_top.jpg") no-repeat 0 0;}	
.project-item.selected .project-item-content { background: url("../img/bkgd_project_bottom.jpg") no-repeat 0 100%;}
.project-item-content { 
	background: url("../img/bkgd_project_bottom_gray.jpg") no-repeat 0 100%;
	padding: 0px 15px 13px 20px; float: left; margin-top: 13px;  }
.project-item img { float: left; border: 1px solid #888888; background: #FFFFFF; padding: 4px; margin: 4px 0;}

.content-panel .project-item h3 { font-size: 1.6em; font-weight: normal; float: right; width: 315px; margin: 6px 10px 5px 0; padding: 0;}
.content-panel .project-item h3 a:hover { border-bottom: 0; margin: 0; padding: 0; }

.project-item a { color: #003EBB;}
.project-item a:hover { border-bottom: 1px dotted #003EBB;}

.project-item.selected h3 a { color: #000000;}
.project-item.selected h3 a:hover, .project-item.selected img a:hover { border: 0;}
.content-panel .project-item p { 
	color: #000000; font-size: 1.1em; line-height: 1.2em; float: right; width: 315px; padding: 0; margin: 0 10px 0 0; }

/*	LIST LINKS
-------------------------------------------------------------------------------------------------------------------*/
.content-panel .links { list-style: none; margin: 0; border-top: 1px solid #DDDDDD;}
.content-panel .links li a { 
	color: #345493; text-transform: uppercase; font-weight: bold; font-size: .8em; line-height: 1.5em;
	display: block; background: url("../img/arrow_link.png") no-repeat 4px 50%; padding: 4px 0 2px 16px; }
.content-panel .links li { border-bottom: 1px solid #DDDDDD; padding: 0;}
.content-panel .links li a:hover { border: 0; background-color: #DDDDDD;}

/*	NEWS STORIES
-------------------------------------------------------------------------------------------------------------------*/
.news-story { margin-bottom: 30px; padding-right: 20px;}
.news-story .date { 
	color: #888888; font-weight: bold;
	margin-bottom: 3px; font-size: 1.2em; text-transform: uppercase; border-bottom: 1px solid #CCCCCC;}
.content-panel .news-story h2 { 
	font-size: 2.2em; font-weight: normal; color: #000000; margin: 10px 0 10px; }

/*	EVENTS
-------------------------------------------------------------------------------------------------------------------*/
.event { margin-bottom: 30px; padding: 0 20px 10px 0; border-bottom: 1px solid #CCCCCC;}
.event .date { 
	margin-bottom: 3px; font-size: 2em; font-weight: normal; color: #000000;}
.content-panel .event h2 { 
	font-size: 1.6em; font-weight: bold; color: #000000; margin-bottom: 0; }


/*	TYPOGRAPHY
-------------------------------------------------------------------------------------------------------------------*/
.content-panel p, .content-panel li, .content-panel dt, .content-panel dl {
	 font-family: 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}
.content-panel p, .content-panel li { 
	padding-left: 3px; font-size: 1.3em; line-height: 1.5em; color: #666666; padding-right: 20px; }
.content-panel .column.last p, .content-panel .column.last li { padding-right: 0;}
.content-panel h2 { 
	padding-left: 3px; font-weight: bold; font-size: 2.3em; line-height: 1.2em; margin-bottom: 1em;}
.content-panel h3 { 
	padding-left: 3px; font-weight: bold; font-size: 1.7em; line-height: 1.2em; margin-bottom: .5em; color: #444444;}
.content-panel h4 { 
	padding-left: 3px; font-weight: bold; font-size: 1.5em; line-height: 1.2em; margin: .5em 0; color: #444444;}
.content-panel .caption { 
	font-size: 1.2em; line-height: 1.5em; text-align: right; color: #777777; font-style: italic; }
.content-panel a { color: #003EBB;}
.content-panel a:hover { border-bottom: 1px dotted #003EBB;}

.content-panel ul { margin-left: 30px;}

.content-panel strong { color: #333333;}

.column .right { text-align: right;}
.column .mouse { font-size: .8em;}

/*	AWARDS
-------------------------------------------------------------------------------------------------------------------*/
.awards dl { 
	-moz-border-radius: 6px; -webkit-border-radius: 6px; 
	-moz-box-shadow: 0 1px 4px #666666; -webkit-box-shadow: 0 1px 4px #666666; width: 185px;
	margin-right: 0; padding: 20px; }
.awards dt img { border: 2px solid #000000; }
.awards dt { padding: 0 0 5px; font-size: 1.3em; line-height: 1.3em; }
.awards dd { padding: 0 0 20px; font-size: 1.2em; line-height: 1.3em;}


/*	VCARD
-------------------------------------------------------------------------------------------------------------------*/
.content-panel .vcard { font-size: 1.3em; line-height: 1.5em; color: #666666; padding-right: 20px; }
.content-panel .vcard .org { font-weight: bold; color: #444444;}

/*OTHER CONTENT
-------------------------------------------------------------------------------------------------------------------*/
/* ---> 1 column photo 205px x 155px required     */
.column .photo { 
	width: 222px; height: 189px; padding: 13px 10px 0 13px;
	background: url("../img/bkgd_photo_single.png") no-repeat 0 0; }
.column .doublephoto { background: url("../img/bkgd_photo_double.png") no-repeat 0 0;
	padding: 13px 20px 26px 11px; float: left; width: 459px; height: 470px;}
.column .caption { font-size: 1.2em; font-style: italic; line-height: 1.3em; padding-top: 13px;}
.column .photo a:hover { border: 0;}
.enlarge_icon { background: url("../img/icon_enlarge.png") no-repeat 0 0; width: 16px; height: 16px; }


/*	PRIMARY NAVIGATION
	
	uses MenuMatic - MooTools based dropdown menu system
	the CSS below is modified for this site and may not work for other javascript settings for MenuMatic
	more information here: greengeckodesign.com/?q=menumatic
-------------------------------------------------------------------------------------------------------------------*/
#primary { margin: 0 auto 0; width: 960px; position: relative; top: 0; height: 35px; visibility: hidden; }
.dropdown { visibility: hidden; }

/*
Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish 
Dropdowns by Patrick Griffiths and Dan Webb. 
http://carroll.org.uk/sandbox/suckerfish/bones2.html
*/

/* ---> front page tab */
body#front #nav li.home a { background: #345493; color: #FFFFFF;}

/* ---> current page tabs for secondary pages */
body#about #nav li.about a,
body#services #nav li.services a,
body#projects #nav li.projects a { background: #FFFFFF; color: #000000;}


/* ---> all menu links */
#nav a, #subMenusContainer a {
	display: block; font-size: 1.2em;  padding: 1em 2em 1em 1em; color: #CCCCCC; background: #000000; border-bottom: 1px solid #333333; }

/* ---> Just main menu links --[for non-javascript users this applies to submenu links as well]*/
#nav a {
	margin: 0 2px 0; float: left; border: 0;
	-moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px;
	-moz-border-radius-topright: 8px; -webkit-border-top-right-radius: 8px;
	background: #ADBED6; display: block; font-size: 1.3em; font-weight: normal; color: #222222; padding: 1em; }

/* ---> Just sub menu links */
#subMenusContainer a, #nav li li a { text-align: left; }

/* ---> All menu links on hover or focus */
#nav a:hover, #nav a:focus, #subMenusContainer a:hover, #subMenusContainer a:focus, #nav a.mainMenuParentBtnFocused, #subMenusContainer a.subMenuParentBtnFocused {
	background: #000000; }

/* ---> sub menu links on hover or focus */
#subMenusContainer a:hover, 
#subMenusContainer a:focus,  
#subMenusContainer a.subMenuParentBtnFocused,
#nav li a:focus{
	color: #FFFFFF; background: #3C61AD;
}

#nav li a:hover, #nav a.mainMenuParentBtnFocused { color: #DDDDDD;}

/* ----[ OLs ULs, LIs, and DIVs ]----*/

/* ---> Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
.smOW { display: none; position: absolute; overflow: hidden; padding: 0; margin: 0; }

/* ---> All ULs and OLs */
#nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { 
	padding: 0; margin: 0; list-style: none; line-height: 1em; }

/* ---> All submenu OLs and ULs */
#nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {	
	background: #000000; left: 0; padding: 0 0 8px 0; margin: 0;
	-moz-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px; }

/* ---> List items in main menu --[for non-javascript users this applies to submenus as well]  */

#nav li { 
	display: block; list-style: none; position: relative; float: left; padding: 0;
	height: 35px; overflow: hidden;}

#subMenusContainer li { list-style: none; padding: 0;}

/* ---> main menu ul or ol elment */
#nav {
	display: block; position: absolute; list-style: none; margin: 0; padding: 0;
	z-index: 5; top: 0; left: 0; text-align: center; display: block; height: 35px; margin-left: 490px; }

#subMenusContainer {	
	display: block; position: absolute;	top: 0;	left: 0; width: 100%; height: 0; overflow: visible;	z-index: 1000000000; }