/* ...............................................................................

   structure.css
   
   Written by Steve Henson: www.sensiblemonkey.com
   Last Edited On: 06-11-07


   This file establishes the corner-stones for all page elements presentation and 
   cross-browser compatibility. If you wish to make changes to the look and feel
   of the site, it's best to edit the files 'flora.css' and 'idx.css'. 
   
   Making changes to this file affects everything globally and can cause drastic 
   and unpredictable results.
   
   .............................................................................*/
   
   
   

/* ###############################################################################
  
			     Basic Document Structure 
  
   #############################################################################*/

/* ...............................................................................
   Root-level setup for the entire page
   .............................................................................*/
body {
	text-align: center;		/* center all content for Windows Internet Explorer */
	font-size: 62.5%;		/* Make all medium-sized text roughly 10 pixels high at 1em */
	font-family: Georgia, FreeSerif, verdana, arial, helvetica, sans-serif;
	background: white url( '../art/white.gif' ) repeat-x; /* set background for browsers without Javascript */
	}
	
/* ...............................................................................
   Links : Establish color and text decoration for all anchor links
   .............................................................................*/
   a:link {
      color: #885;
   } 
   a:visited {
      color: #885;
   } 
   a:active {
      color: #fc0;
   }  
   a:hover {
      border-bottom: 0px;		/* remove underline, to be put back in where necessary */
      color: #000;
   }

/* ...............................................................................
   wrapper for all content
   .............................................................................*/
#container {
	position: relative;
	top: 15px;
	width: 555px;
	margin: 0px auto; /* center the container in css compliant browsers */
	text-align: left; /* re-left-justify since we had to center the container for Win IE in the body tag */
	}
	
*	{                 /* zero-out all margins and padding */
    margin: 0px 0px 0px 0px; 
	padding: 0px 0px 0px 0px;
	}


/* ###############################################################################
  
			     Header div 
  
   #############################################################################*/
#header {
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: #000;
	width: 555px; height: 83px;
	background: url( '../art/base_header.gif' ) 0px no-repeat;
	}
	
div.branding {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 374px; height: 54px;
	background: url( '../art/branding.gif' ) 0px no-repeat;
	}

#bg_change_header_r {
	position: absolute;
	top: 0px;
	left: 493px;
	width: 62px; height: 83px;
	background: url( '../art/bg_change_header_r_w.gif' ) 0px no-repeat;
	}

/* ...............................................................................
   Navigation Bar Rollovers
   .............................................................................*/
div.portfolio {
	position: absolute;
	top: 54px;
	left: 115px;
	width: 94px; height: 18px;
	background: url( '../art/portfolio.gif' ) 0px -18px no-repeat;
	}
	div.portfolio a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/portfolio.gif' ) top left no-repeat;
	}
	div.portfolio a:hover {
	background-image: none;
	}

div.services {
	position: absolute;
	top: 54px;
	left: 209px;
	width: 87px; height: 18px;
	background: url( '../art/services.gif' ) 0px -18px no-repeat;
	}
	div.services a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/services.gif' ) top left no-repeat;
	}
	div.services a:hover {
	background-image: none;
	}

div.contact {
	position: absolute;
	top: 54px;
	left: 296px;
	width: 87px; height: 18px;
	background: url( '../art/contact.gif' ) 0px -18px no-repeat;
	}
	div.contact a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/contact.gif' ) top left no-repeat;
	}
	div.contact a:hover {
	background-image: none;
	}

div.about {
	position: absolute;
	top: 54px;
	left: 383px;
	width: 79px; height: 18px;
	background: url( '../art/about.gif' ) 0px -18px no-repeat;
	}
	div.about a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/about.gif' ) top left no-repeat;
	}
	div.about a:hover {
	background-image: none;
	}

/* ###############################################################################
  
			     Content div 
  
   #############################################################################*/	
/* ...............................................................................
   wrapper for page articles and main body copy
   .............................................................................*/
#content {
	position: absolute;
	top: 83px;
	left: 131px;
	background-color: #fff;
	width: 340px; 
	border-right: 1px solid #cc9;
	}
	
div.content_top {
	font-size: 1px;
	line-height: .1%;
	position: absolute;
	width: 340px;
	height: 9px;
	top: 0px;
	right: -2px;
	background-color: #fff;
	}
	
div.main_content_image {
	position: absolute;
	top: 24px;
	left: 0px;
	margin: 9px 32px 0px 26px ; padding:0px;
	border: 1px solid #cc9;
	width: 281px;
	}

div.project_head {
	position: absolute;
	top: 258px;
	left: 26px;
	padding: 3px 0px 3px 0px;
	border-top: 1px solid #cc9;
	border-bottom: 1px solid #cc9;
	width: 281px;
	}

/* previous and next buttons */
div.prev_bottom {
	position: absolute;
	bottom: 60px;
	right: 0px;
	width: 96px; height: 16px;
	background: url( '../art/prev_bottom.gif' ) -96px  no-repeat;
	} 
    div.prev_bottom a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/prev_bottom.gif' ) top left no-repeat;
	}
    div.prev_bottom a:hover {
	background-image: none;
	}
div.prev_middle {
	position: relative;
	float: right;
	margin: 24px 0 24px 0; padding:0px;
	width: 96px; height: 16px;
	background: url( '../art/prev_bottom.gif' ) -96px  no-repeat;
	} 
    div.prev_middle a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/prev_bottom.gif' ) top left no-repeat;
	}
    div.prev_middle a:hover {
	background-image: none;
	}
	
div.next_middle {
	position: relative;
	float: right;
	margin: 24px 0 24px 0; padding:0px;
	width: 96px; height: 16px;
	background: url( '../art/next_bottom.gif' ) -96px  no-repeat;
	} 
    div.next_middle a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/next_bottom.gif' ) top left no-repeat;
	}
    div.next_middle a:hover {
	background-image: none;
	}
	
div.next_bottom {
	position: absolute;
	bottom: 39px;
	right: 0px;
	width: 96px; height: 16px;
	background: url( '../art/next_bottom.gif' ) -96px  no-repeat;
	}
    div.next_bottom a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/next_bottom.gif' ) top left no-repeat;
	}
    div.next_bottom a:hover {
	background-image: none;
	}
/* end previous and next buttons */
	
div.content_bottom {
	position: absolute;
	bottom: 0px;  
	right: -1px;
	width: 340px; height: 50px;
	background: url( '../art/content_bottom.gif' ) bottom right  no-repeat;
	}
	
div.body_copy {
	margin: 331px 0 100px 0; padding:0px;
	}
	

/* ...............................................................................
   imagebar
   .............................................................................*/
#imagebar {
	position: absolute;
	top: 83px;
	left: 471px;
	background-color: #fff;
	width: 84px; height: 378px;
	background: url( '../art/imagebar.gif' ) 0px no-repeat;
	}
	
	
/* ...............................................................................
   Image Bar and article-specific hover box templates
   .............................................................................*/
div.one {
	margin: 20px 4px 0px 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../art/imbb_one.gif' ) -70px no-repeat;
	}
    div.one a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/imbb_one.gif' ) top left no-repeat;
	}
    div.one a:hover {
	background-image: none;
	}

div.two {
	margin: 0 4px 0px 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../art/imbb_two.gif' ) -70px no-repeat;
	}
    div.two a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/imbb_two.gif' ) top left no-repeat;
	}
    div.two a:hover {
	background-image: none;
	}

div.three {
	margin: 0 4px 0 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../art/imbb_three.gif' ) -70px no-repeat;
	}
    div.three a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/imbb_three.gif' ) top left no-repeat;
	}
    div.three a:hover {
	background-image: none;
	}
	
div.four {
	margin: 0px 4px 0 10px; padding:0px;
	width: 70px; height: 53px;
	background: url( '../art/imbb_four.gif' ) -70px no-repeat;
	}
    div.four a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/imbb_four.gif' ) top left no-repeat;
	}
    div.four a:hover {
	background-image: none;
	}

#imgbar_one_hover {
	position: absolute;
	top: 92px;
	left: 158px;
	width: 317px; height: 296px;
	background: url( '../art/imgbar_one_hover.gif' ) 0px no-repeat;
	visibility: hidden;
	}
  #imgbar_one_hover_box {
	margin: 12px 20px 20px 16px;
	width: 281px; height: 264px;
	background: white;
	font-size: 1.2em;
	font-family: Georgia, FreeSerif, verdana, helvetica, arial, sans-serif;
	font-weight: bold;
	color: #777;
	background-color: #eee;
	text-align: center;
	}
  #imgbar_one_hover_box p {
	font-weight: bold;
	padding: 6px 6px 0px 6px;
	}

#imgbar_two_hover {
	position: absolute;
	top: 92px;
	left: 158px;
	width: 317px; height: 296px;
	background: url( '../art/imgbar_two_hover.gif' ) 0px no-repeat;
	visibility: hidden;
	}
  #imgbar_two_hover_box {
	margin: 12px 20px 20px 16px;
	width: 281px; height: 264px;
	background: white;
	font-size: 1.2em;
	font-weight: bold;
	color: #777;
	background-color: #eee;
	text-align: center;
	}
  #imgbar_two_hover_box p {
	padding: 6px 6px 0px 6px;
	}
	
#imgbar_three_hover {
	position: absolute;
	top: 92px;
	left: 158px;
	width: 317px; height: 296px;
	background: url( '../art/imgbar_three_hover.gif' ) 0px no-repeat;
	visibility: hidden;
	}
  #imgbar_three_hover_box {
	margin: 12px 20px 20px 16px;
	width: 281px; height: 264px;
	background: white;
	font-size: 1.2em;
	font-weight: bold;
	color: #777;
	background-color: #eee;
	text-align: center;
	}
  #imgbar_three_hover_box p {
	padding: 6px 6px 0px 6px;
	}

#imgbar_four_hover {
	position: absolute;
	top: 92px;
	left: 158px;
	width: 317px; height: 296px;
	background: url( '../art/imgbar_four_hover.gif' ) 0px no-repeat;
	visibility: hidden;
	}
  #imgbar_four_hover_box {
	margin: 12px 20px 20px 16px;
	width: 281px; height: 264px;
	background: white;
	font-size: 1.2em;
	font-weight: bold;
	color: #777;
	background-color: #eee;
	text-align: center;
	}
  #imgbar_four_hover_box p {
	padding: 6px 6px 0px 6px;
	}
	
	
/* view site button */
div.viewsite {
	margin: 14px 0px 0px 5px;
	width: 78px; height: 59px;
	background: url( '../art/viewsite.gif' ) -78px  no-repeat;
	} 
    div.viewsite a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/viewsite.gif' ) top left no-repeat;
	}
    div.viewsite a:hover {
	background-image: none;
	}
	
/* ...............................................................................
   Sidebar
   .............................................................................*/
#sidebar {
	position: absolute;
	font-size: 1.2em; 	/* set the size of suckerfish menu fonts here */
	top: 72px;
	left: 0px;
	width: 140px; height: 316px;
	background: transparent url( '../art/sidebar.gif' ) 0px no-repeat;
	}
	
div.prev_sidebar {
	position: absolute;
	bottom: 89px;
	right: 9px;
	width: 96px; height: 16px;
	background: url( '../art/prev_sidebar.gif' ) -96px  no-repeat;
	} 
    div.prev_sidebar a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/prev_sidebar.gif' ) top left no-repeat;
	}
    div.prev_sidebar a:hover {
	background-image: none;
	}
	
div.next_sidebar {
	position: absolute;
	bottom: 66px;
	right: 9px;
	width: 96px; height: 16px;
	background: url( '../art/next_sidebar.gif' ) -96px  no-repeat;
	}
    div.next_sidebar a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/next_sidebar.gif' ) top left no-repeat;
	}
    div.next_sidebar a:hover {
	background-image: none;
	}
	
/* begin suckerfish menu structure */
	#nav, #nav ul { /* all lists */
	position: absolute;
	top: 16px;
	left: 24px;
	letter-spacing: 1px;
	margin: 0px 0px 0px 0px; padding:0px;
	list-style: none;
	float : left;
	width : 86px; 
	background: black;
	
	}
	
	#nav li { /* all list items */
	position : relative;
	float : left;
	line-height : 22px;
	margin: 0px 0px -1px 0; padding:0px;
	width: 86px;
	border-top : 1px solid #363602;
	border-bottom : 1px solid #363602;
	
	}
	
	#nav li ul { /* second-level lists */
	position : absolute;
	left: -9999px;
	margin: -14px 0px 0px 96px; 
	padding: 0px 8px 0px 8px;
	width: 102px;
	border-right: 1px solid #363602;
	border-top : 1px solid #363602;
	border-bottom : 1px solid #363602;
	
	}
	#nav li ul li { 
	width: 96px;
	padding: 0px 0px 0px 0px;
	}
	
	#nav li ul ul { /* third-and-above-level lists */
	left: -9999px;
	padding: 0px 8px 0px 8px;
	border-right: 1px solid #363602;
	border-top : 1px solid #363602;
	border-bottom : 1px solid #363602;
	width: 106px;

	}
	#nav li ul ul li { 
	width: 106px;
	padding: 0px 0px 0px 0px;
	}
	#nav li ul ul li a { 
	width: 106px; 
	padding: 0px 0px 0px 0px;
	}
	
	#nav li a {
	width: 96px;
	w\idth : 96px;
	display : block;
	color : #cbcb98;
	font-weight : bold;
	text-decoration : none;
	margin: 0px 0px 0px 0px; 
	padding: 0px -4px 0px 4px;
	}
	
	#nav li a:hover {
	color : white;
	background-color : #996;
	padding: 0px -4px 0px 4px;
	}
	
	#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -9999px;
	}
	
	#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
	left: auto;
	padding: 0px 0px 0px 12px;
	}
	
	#nav li.firstnav {
	border-top : 1px solid black;
	}
	
	#nav li#lastnav {
	border-bottom : 1px solid black;
	}
/* end suckerfish menu structure */

/* ...............................................................................
   miscelaneous
   .............................................................................*/
   
/* background-switcher button div and rollover */
#divbg {	
	visibility: hidden;  /* hide this button from non-javascript browsers */
	}
	
div.bg_change {
	position: absolute;
	top: 362px;
	left: 0px;
	width: 67px; height: 16px;
	background: url( '../art/bg_change.gif' ) -67px  no-repeat;
	}
	div.bg_change a {
	display: block;
	width:100%; height:100%;
	background: url( '../art/bg_change.gif' ) top left no-repeat;
	}
	div.bg_change a:hover {
	background-image: none;
	}
/* end background-switcher button div and rollover */
	
hr {
	height: 1px;
	width: 280px;
	margin: 0px 0px 0px 20px;
	background-color: #cc9;
	}
	
div.rule {
	height: 3px;
	width: 336px;
	margin: 18px 0px 0px 24px;
	border-top: 1px solid #cc9;
	}
	
/* ...............................................................................
   text presentation
   .............................................................................*/
	
.copy_head {
	font-size: 1.5em;
	line-height: 130%;
	margin: 0px 28px 0px 0px;
	color: #333333;
	}
	
.list_head {
	font-weight: bold;
	font-style: normal;
	color: #666600;
	} 

.list_head_emph {
	font-size: 1.7em;
	line-height: 180%;
	font-style: normal;
	font-weight: normal;
	color: #885;}
	
.init {
	font-size: 1.8em;
	line-height: 100%;
	font-weight: bold;
	color: #663;
	background-color: #cc9;
	margin: 0px 2px 0px -10px;
	padding: 0px 3px 0px 9px;}
	
.copy {
	font-size: 1.4em;
	line-height: 150%;
	margin: 12px 28px 0px 24px;
	color: #333333;
	}

.linkage {
	letter-spacing: 1px;
	color: #663300;
	}
	
.footnote {
	font-size: .9em;
	line-height: 120%;
	font-family: verdana, helvetica, arial, sans-serif;
	margin: 0px 9px 0px 24px;
	font-style: italic;
	color: #333333;
	}
	
p.hover_text {
	/* font-size: 1.2em; */
	line-height: 150%;
	margin: 3px 12px 0px 9px;
	color: #444;
	font-weight: normal;
	text-align: left;
	}

pre {
	margin: 0px 0px 0px 20px;
	font-size: 1.4em;
	line-height: 150%;
	color: #555;
	}

/* ...............................................................................
   Section 508 Accessibility
   .............................................................................*/  
/* skip navigation for text readers */
.no {
    display: none;
	}
	
/* hide navigation text for graphic rollovers */
.outie {
	margin:0px 0px 0px -9999px
	}