/* Spectrum Media CSS file
   Created by Robin Berghaus, 25 July 2007 */

body,
html
{
  padding: 0px;
  background: white;
  color: black;
  background-image: url(../images/bkgd-gradient.jpg);
  background-repeat: repeat-x;
}


SPAN  {  font-weight: bold;       }
.green  { color: #007306; } 
.orange  { color: #FE8012; }
.blue  { color: #000096; }

/* This SPAN effects the copy on the index.htm page */


a {text-decoration:underline;}		   
a:link {color:#333399;}
a:visited {color:#333399;}
a:hover {color:#666666; text-decoration:underline;}

a.copyright-nav:link {text-decoration:underline;}
a.copyright-nav:hover {color:#333333;}

a.sidebar-nav {text-decoration:none;}
a.sidebar-nav:link {color:#333399;}
a.sidebar-nav:visited {color:#333399;}
a.sidebar-nav:hover {color:#666666;}

a.main-nav1 {text-decoration:none;}
a.main-nav1:link {color:#666666;}
a.main-nav1:visited {color:#666666;}
a.main-nav1:hover {color:#CC3333;}

a.main-nav2 {text-decoration:none;}
a.main-nav2:link {color:#666666;}
a.main-nav2:visited {color:#666666;}
a.main-nav2:hover {color:#CC6633;}

a.main-nav3 {text-decoration:none;}
a.main-nav3:link {color:#666666;}
a.main-nav3:visited {color:#666666;}
a.main-nav3:hover {color:#FFCC33;}

a.main-nav4 {text-decoration:none;}
a.main-nav4:link {color:#666666;}
a.main-nav4:visited {color:#666666;}
a.main-nav4:hover {color:#006600;}

a.main-nav5 {text-decoration:none;}
a.main-nav5:link {color:#666666;}
a.main-nav5:visited {color:#666666;}
a.main-nav5:hover {color:#333399;}

a.main-nav6 {text-decoration:none;}
a.main-nav6:link {color:#666666;}
a.main-nav6:visited {color:#666666;}
a.main-nav6:hover {color:#993366;}


.h2 {	font-family: Arial, Helvetica, sans-serif;
  font-weight: bold; 
  font-size: 13pt;
  color:#333;
}

.emphasized {font-weight:bold;}
/* Body text Classes */

/* DIV that wraps around all of the elements below the nav on the index.htm page */

#IndexLeftMain
{
  background:transparent;
  padding: 0px;
}
/* DIV that wraps around the left elements (pictures/other media and company info) on the index.htm page */


/*.myinlineIMG { display: inline ; padding: 0px; } - I'm not sure this is necessary*/


.myLeftBarA { position: absolute;
  left: 0px; top: 0px;
  width: 29px;
}
.myRightBarA { position: absolute;
  left: 29px; top: 0px;
}

.myLeftBar { padding: 0px; float: left; }
.myRightBar { display: inline; padding: 0px; padding-left: 29px;}
#mainPhoto { float: right; }
/* These classes position the "Our Projects" and "Main Images," so they're inline */

/* Welcome to Hell */
/* info box ends up 2-3 pixels higher in IE because it ignores the height spec, but alignments
   still work out in both IE & FireFox */
#CompanyInfo
{ 
  height: 162px; /* vanilla height fudge for firefox because it doesn't stretch the box vertically, but IE does */
  border-top: 1px solid transparent; /* fudge because IE otherwise leaves a pixel of whitespace as the top border */
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-left: 1px solid black;
  background: white;
  font-size: 10pt;
  font-family: Verdana, Sans-Serif;
  padding-top: 0px;
  padding-bottom: 1px; /* this works mysteriously but harmoniously with the other fudges in this div style */
  padding-right: 15px;
  padding-left: 15px;
  color: #666;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-right: 1px; /* fudge because the border is painted one pixel to the RIGHT of the table */
  position: relative;
}

#CompanyInfo p { margin-top: 0px; margin-bottom: 0px; padding-top: 16px; padding-bottom: 0px; }

#IndexRightMain
{
  float: right;
  background:transparent;
  
  width: 162px;
  
  padding: 0px;

}
/* DIV that wraps around the right elements (thumbnails w/ links to media) on the index.htm page */

.containIndexRightMain
{
  margin-top: auto;
  margin-bottom: auto;
}

/* for IE: 
   padding-bottom: 32px;
   */
/* class that places space between thumbnails in IndexRightMain Div */


.RightImage { 
  display: block;
  border: none;
  padding-bottom: 29px;
}

.RightImageBottom { 
  border: none;
  display: block;
}

#Image1 {
}
#Image2 {
}

/* ID for the right elements (thumbnails w/ links to media) on the index.htm page */

#topwrap 
{
}

#contentwrap {
  margin-left: 1.5cm;
  width: 777px;
}

#wrap 
{
  background: white;
  margin-top: -4px; /* IE bug / quirk adds 4px unwanted padding */
  border-top: 1px solid white; /* firefox bug.:-( without this, a full 0.5 cm of vert. space. */
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

/*
   the auto margins on DIV#topwrap and DIV#wrap center the elements on the page
   */

#header 
{
  width: 777px;
  margin: 0px;
}

#BannerImage 
{ 
  margin: 0px;
}


#logo
{
  margin: 1em 0 1em 0;
}

#nav 
{
  background: white;
  text-align: center;
  font-family: Verdana;
  font-weight: Bold;
  color: #666;
  font-size: 13px;
  word-spacing:0.1em;
  margin: 0 0 1em 0;
}

#nav ul 
{
  margin: 0;
  padding: 0;
  list-style:none;
}

#nav li
{
  display:inline;
  margin: 0;
  padding: 0;
}


#nav li a.selected1 {
  color: #CC3333;
  text-decoration:none;
}

#nav li a.selected2 {
  color: #CC6633;
  text-decoration:none;
}

#nav li a.selected3 {
  color: #FFCC33;
  text-decoration:none;
}

#nav li a.selected4 {
  color: #006600;
  text-decoration:none;
}

#nav li a.selected5 {
  color: #333399;
  text-decoration:none;
}

#nav li a.selected6 {
  color: #993366;
  text-decoration:none;
}

/*
   The nav li a.selected# class controls the color of the nav elements to indicate when a section has been selected.
   */

#main 
{
  margin: 2.25em 1em 0em 4.75cm;
}

TEXTAREA { font-size: 10pt; }
INPUT {  font-size: 10pt;}

#main p {
  margin: 0em 1em 1em 1em;
  font-family: Arial, Helvetica, sans-serif;
  font-size:11pt;
  color:#333333;
}

#main p.blue-quote {
 	color:#333399;
	}
	
/* this makes the quotes blue that appear in the paragraph sections of the main part of the document */	

#main p.NoLeftMargin {
  margin:2em 3em 0 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size:11pt;
  color:#333333;
}

/*This controls the Baklava first paragraph - for some reason a generic <p> tag makes inherits a left margin beyond the normal paragraphs  */

.sectionP
{ 
  padding-top: 15px; 
}

/*This controls the spacing between sections, not all individual paragraphs  */

.sectionPImage
{ 
  padding-top: 40px; 
}

/*This controls the spacing between sections with images and captions, not all individual paragraphs  */


#main .captions {
  font-family: Arial, Helvetica, sans-serif;
  font-size:8pt;
  color:#333333
}

#main ul 
{
  list-style-type: circle;
}

#main li
{
  font-family: Arial, Helvetica, sans-serif;
  font-size:11pt;
  color:#333333;
  margin:0 0 0 1em;
}

#main div#content_clearer {	
  clear: both;
  height: 0.5cm;
}


#sidebar p {
  margin: 2em 1.5em 0 1.5em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  color: #333333;
}

#sidebar
{
  float: left;
  padding: 2em 1.5em 0em 1.5em;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  color: #333333;
  line-height: 1.5em;
}

#sidebar a.selected {
  color: #666666;
  text-decoration:none;
}

#sidebar .sidebar_purchase {
  font-size: 11pt;
}

a.sidebar-purchase { font-size:11pt; text-decoration:none;}
a.sidebar-purchase:link {color:#333399;}
a.sidebar-purchase:visited {color:#333399;}
a.sidebar-purchase:hover {color:#666666;}

#footer 
{
  background:transparent;
  clear: both;
  margin:0 auto;
  font-family: Myriad, Arial;
  color: #333;
  font-size: 8.5pt;
  word-spacing:0.2em;
  padding: 0.5em 0 2em 0;
  text-align: center;
}	

#footerMain {
  background: transparent;
  clear: both;
  margin:0 auto;
  font-family: Myriad, Arial;
  color: #333;
  font-size: 8.5pt;
  word-spacing:0.2em;
  padding: 1.5em 0 2em 0;
  text-align: center;
}

/*
   This CSS code formats the copyright and contact info at the bottom of the pages.
   */


table.helpT
{ text-align: center;
  font-family: Verdana;
  font-weight: normal;
  font-size: 11px;
  color: #404040;
  width: 450px;
  background-color: #fafafa;
  border: 1px #6699CC solid;
  border-collapse: collapse;
  border-spacing: 0px; }

/*
   This CSS code formats the Purchase DVD tables.
   */

td.helpHed
{ border-bottom: 2px solid #6699CC;
  border-left: 1px solid #6699CC;
  background-color: #BEC8D1;
  text-align: left;
  text-indent: 5px;
  font-family: Verdana;
  font-weight: bold;
  font-size: 11px;
  color: #404040; }

/*
   This CSS code formats the Purchase DVD tables.
   */

td.helpBod
{ border-bottom: 1px solid #9CF;
  border-top: 0px;
  border-left: 1px solid #9CF;
  border-right: 1px solid #9CF;
  text-align: left;
  text-indent: 10px;
  font-family: Verdana, sans-serif, Arial;
  font-weight: normal;
  font-size: 11px;
  color: #404040;
  background-color: #fafafa; }

/*
   This CSS code formats the Purchase DVD tables.
   */

table.sofT
{ text-align: left;
  text-indent: 8px;
  font-family: Verdana;
  font-weight: normal;
  font-size: 11px;
  color: #404040;
  width: 450px;
  background-color: #fafafa;
  border: 1px #6699CC solid;
  border-collapse:collapse;
  border-spacing: 0px; }

/*
   This formats the Purchase DVD tables.
   */

.form_field 

{
  margin-left: 50px;
  margin-top: 20px;
}
/*
   This formats the form field on the Contact page.
   */

label

{
  font-family: Arial, Helvetica, sans-serif;
  font-size:11pt;
  color:#333333;
}
/*
   This formats the labels within the form on the Contact page.
   */