/* SCREEN.CSS
   This is where all styles for on-screen media are declaired
   
   --------------------------------------------------------------------------------------------------------------------------
   FILE INFO
   Revision number:  1.0
   Last updated:     2007/08/18
   Last updated by:  Matt Wilcox
                     matt@karova.com
   ----------------------------------------------------------------------------------------------------------------------- */

/* =global_reset | based on http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
   ----------------------------------------------------------------------------------------------------------------------- */
   
   html, body, #container div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, font, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
	   margin: 0; padding: 0; border: 0;
	   outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; }

   /* remember to define focus styles! */
   :focus {
	   outline: 0; }
   body {
	   line-height: 1;
	   color: black; }
   ol, ul {
	   list-style: none; }

   /* tables still need 'cellspacing="0"' in the markup. */
   table {
	   border-collapse: separate; border-spacing: 0; }
   caption, th, td {
	   text-align: left; font-weight: normal; }

   /* remove possible quote marks (") from <q>, <blockquote>. */
   blockquote:before, blockquote:after, q:before, q:after {
	   content: ""; }
   blockquote, q {
     quotes: "" ""; }

/* =typography | based on http://alistapart.com/articles/settingtypeontheweb/
                          http://24ways.org/2006/compose-to-a-vertical-rhythm/
   ----------------------------------------------------------------------------------------------------------------------- */
   body {
     font : 100%/1.5em "AvantGarde BT", "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; }
   html > body {
     font-size : 16px; }
   div, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   address, img, dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td {
     margin-top : 1.5em; margin-bottom : 1.5em; }
   h1 { font-size : 1.5em; line-height: 1em; margin-top: 0; margin-bottom: 1em; font-weight : normal; }
   h2 { font-size:1.1667em; line-height: 1.286em; margin-top: 1.929em; margin-bottom: 0.643em; font-weight : normal; }
   h3, h4, h5, h6 {
     font-size : 1em; line-height: 1em; margin-top: 1.5em; margin-bottom: 0.5em;
     font-weight : bold; }
   
   
/* =design | now the browser reset and basic typographic layout is done, lets get designing
   ----------------------------------------------------------------------------------------------------------------------- */
   
/* =html =body */
   html {
   	background : #fff url(../images/html.gif) 0 0 repeat-y; }
   body {  }

/* =h1 */
   h1 {  }
   
/* =h2 */
   #content_main h2,
   #content_main h1 {
     margin : 0 0 1.5em 0; }
     
   #content h1,
   #content h2 {
     font-size : 1.5em; color : #8B1B2E; }
		 
	 #nav_main h2 {
	 	 display : none; }
     
   #site_info h2 {
     display : none; }
     
/* =h3 */
   #content_main h3 {
     margin-top : 3em;
     color : #8B1B2E; font-weight : normal; text-transform : uppercase; }
    
   .contact #content_main form h3 {
     margin-top : 0; }
     
/* =h4 */
   h4 {  }

/* =p */
   p.accessibility {
     position : absolute;
     margin : -3.5em 0 0 0;
     z-index : 2; }
     
   blockquote p:before {
     content : "\201c"; }
   blockquote p:after {
     content : "\201d"; }
   blockquote p.author {
     border-top : 1px dashed #8B1B2E; }
   blockquote p.author:before,
   blockquote p.author:after {
     content : ""; }
     
   #site_info p {
     padding-top : 3em; font-size : .75em; color : #8B1B2E; }
     
   p.download {
     margin-top : 1em; padding-top : 1em; border-top : 1px dotted #8B1B2E; }
     
/* =blockquote */
   blockquote {
     clear : both; }

/* =em =strong =del =ins =abbr =acronym =code */
   em          { font-style : italic; }
   strong      { font-weight : bold; }
   del         { text-decoration : line-through; }
   ins         { text-decoration : none; color : #006; }
   del[title],
   ins[title]  { cursor : help; }
   acronym,
   abbr        { text-decoration : none; border-bottom : none; font-style : italic; cursor : help; }
   code        { font-family : dialogue, 'Courier New', courier, serif; }
   sup         { vertical-align : super; font-size : .8333em; }
   sub         { vertical-align : sub; font-size : .8333em; }
   
/* =address */
   #site_info address {
     float : left;
     width : 200px; padding-right : 109px; margin : 0 20px 0 0;
     text-align : center; font-style : normal;
     color : #fff; background : url(../images/site-info_address.gif) 0 0 no-repeat; overflow : hidden; }

/* =dl =dt =dd */
   dl {  }
   dt { font-weight : bold; }
   dd { margin-left : 2em; }
   
/* =ul */
   #nav_main ul {
     text-transform : uppercase; font-size : .875em; }
   #nav_sub1 ul {
   	 margin-top : 0;
   	 text-align : right; text-transform : uppercase; font-size : .875em; }
     
   #nav_sub1 ul.pages li {
     margin : 0; }
   
/* =ol */
   #content_main ol {
     list-style : decimal outside; margin-left : 1.5em; }

/* =li */
   #nav_main li {
   	 display : inline; margin : 0 0 0 2em; }
   #nav_sub1 ul li.first {
   	 margin-top : 0; }
   #content_main ul li {
     padding-left : 1em; background : url(../images/li.gif) 0 7px no-repeat; }
      
/* =img */
   img,
   img a { border : none; }
   
/* =hr */
   hr { display : none; }

/* =a */
   a:link    { color : #EDB20E; text-decoration : none; }
   a:visited { color : #EDB20E; text-decoration : none; }
   a:hover   { text-decoration : underline; }
   a:focus   { background-color : #ff9; color : #333; }
   a:active  { background-color : #ff6; color : #000; outline : none; }
   
   p.accessibility a {
     margin : 0; padding : 0; line-height : 1em; }
   p.accessibility a:focus {
     position : absolute; left : 1em;
     margin-top : 2.5em;
     background-color : #ffff99; }
		 
	 #page_context a {
	 	 position : absolute; top : 0; left : 0;
		 display : block; width : 350px; height : 110px; }
		 
	 #nav_sub1 a {
	 	 color : #fff; background-color : #8B1B2E; }
	 #nav_main a {
	 	 color : #8B1B2E; }
   #nav_sub1 ul.pages li a {
     color : #cbb; }
   #nav_sub1 ul.pages li a:hover {
     color : #fff; }
     
/* =table */
   #content_main table {
     border-collapse : collapse; border : 2px solid #EDB20E;
     background: #F4F4EC; color : #000; font : 100%/1.5em Helvetica, Arial, Verdana, sans-serif; }

/* =caption */
   caption {  }

/* =thead */
   thead {  }

/* =tfoot */
   tfoot {  }
   
/* =tbody */
   tbody {  }
   
/* =tr */
   tr {  }
   
/* =th */
   #content_main th {
     padding : .5em; border : 1px dotted #fff;
     background : #EDB20E; color : #fff; font-weight : bold; vertical-align : top; }

/* =td*/
   #content_main td {
     padding : .25em .5em; border : 1px solid #fff;
     vertical-align : top; }
   #content_main tbody tr:hover td {
     background-color : #EFD695; }

/* =form */
   .contact form {
     margin-top : 0; }
   
/* =fieldset */
   .contact fieldset {
     margin-bottom : 0; }

/* =legend */
   legend {  }
   
/* =blockquote */
   blockquote {
     border-left : 5px solid #8B1B2E; padding-left : 5px; }

/* =label */
   .contact fieldset.details label {
     float : left;
     display : block; width : 40%; margin-right : 20px; }
   
/* =input */
   input[type="text"],
   input[type="password"],
   textarea {
     border : 1px solid #999; }
   input[type="text"]:focus,
   input[type="password"]:focus,
   textarea:focus {
     background-color : #ffd; }
     
   .contact fieldset input {
     width : 100%; }
   
/* =textarea */
    .contact textarea {
      width : 83%; height : 13em; }

/* =select */
   select:focus {
     background-color : #ff9; }
     
/* =div */
   #container {
     position : relative;
     margin : 0; padding : 110px 20px 0 220px; min-width : 520px; max-width : 720px; }
	 #container #page_context {
	 	 margin-top : 0; }
	 #container #content {
	 	 float : right; margin : 0 0 3em 0; width : 100%;
     font-size : .75em; line-height : 1.5em; }
   #container div.intro { /* fancy CSS3 niceness */
     column-count : 2; -moz-column-count : 2; -webkit-column-count : 2;
     column-gap : 40px; -moz-column-gap : 40px; -webkit-column-gap : 40px;
     padding-bottom : 1.5em;
     border-bottom : 1px solid #EDB20E; text-align : justify; }
	 #container #nav_main {
	 	 position : absolute; top : 28px; right : 20px;
     font-size : 1.333em; }
	 #container #nav_sub1 {
	 	 position : relative; float : left;
		 margin : -1.25em 0 0 -220px; width : 180px; padding : 0 10px; }
	 #site_info {
	 	 clear : both;
     font-size : .875em; background : url(../images/site-info.gif) 0 0 repeat-x; }
     
/* =span */
   #page_context a span {
   	 position : absolute; top : 0; left : 0;
		 display : block; width : 350px; height : 110px;
		 background : transparent url(../images/h1.gif) 0 0 no-repeat; }
     
/* =class */
   .left {
     float : left;
     margin-right : 2em; }
   .right {
     float : right;
     margin-left : 2em; }
   img.left,
   img.right {
     margin-top : 0; }