/*
Theme Name: Sunnyside Foundation
Theme URI: http://sunnysidefoundation.org/
Description: The default Sunnyside Foundation theme developed by Fezlab.
Version: 1.0
Author: Dennis Fesenmeyr and Ian Johnson
Author URI: http://fezlab.com/

@import url("css/debugging.css");

/* ---------------------------------------------------
=Reset
Takes browser-specific styling and resets it to a
common behavioural standard. Based heavily upon the
Yahoo! User Interface Library Reset:
http://developer.yahoo.com/yui/reset/
--------------------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
   }

table {
	border-collapse:collapse;
	border-spacing:0;
   }

fieldset,
img { 
	border:0;
   }

address,caption,cite,code,dfn,th,var,strong{
	font-style:normal;
	font-weight:normal;
   }

ol,ul {
	list-style:none;
   }

caption,th {
	text-align:left;
   }

h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
	margin: 0px;
	padding: 0px;
   }

q:before,q:after {
	content:'';
   }

abbr,acronym {
   border:0;
   }

html {
   font-size: 100.01%; /* Corrects default font sizing in IE/WIN, and font resizing in Opera. */
   }
   

/* Universal - 
styles on basic XHTML elements
-------------------------------------------------------- */

a  {
   color: #00679c;
   text-decoration: none;
   }

a:hover,
 a:visited {
   color: #00679c;
   text-decoration: underline;
   }

p {
   margin: 0 0 1em 0;
   }

strong {
   font-weight: bold;
   }

em, i {
   font-style: italic;
   }

img {
   display: block;
   }

hr {
   border: 0; border-top: 1px dotted #ccc;
   display: block;
   height: 1px;
	width: 100%;
	margin: 1.6em 0 0 0;
   }
      
h1 {
   margin: 0 0 10px 0;
   padding: 0;
   font: normal 2.4em/1em Georgia, serif; color: #333;
   }
   
h2 {
   margin: 1.5em 0 .2em 0;
   padding: 0;
   font: bold 1.3em/1.2em arial, helvetica, sans-serif; color: #666;
   }
   
h3 {
   margin: 1.5em 0 .9em 0;
   padding: 0;
   font: normal 1.3em/1em Georgia, serif; color: #666;
   }
  
   
h4 {
   margin: 1.5em 0 .4em 0;
   padding: 0;
   font: bold 1.1em/1.3em arial, helvetica, sans-serif; color: #369;
   }
   
h5 {
   margin: 1.5em 0 0em 0;
   padding: 0;
   font: bold 1.1em/1.3em arial, helvetica, sans-serif; color: #333;
   }
   
h6 {
   margin: .5 0 0em 0;
   padding: 0;
   font: bold 1.1em/1.3em arial, helvetica, sans-serif; color: #333;
   }
   

/* Clearfix - 
fixes floats
-------------------------------------------------------- */

.clearfix:after {
   content: ".";
   clear: both;
   display: block;
   height: 0;
   visibility: hidden;
   }


/* Body - 
structure of the containers and body classes
-------------------------------------------------------- */


body {
   background: #fff url(images/susdf-bg.gif) top left repeat-x;
   font: normal 12px/15px arial, helvetica, sans-serif; color: #666;    
   margin: 0; padding: 0;
   text-align: center;
   width: 100%;
   }
  


#container {
   margin: 0 auto;
   padding: 0;
   text-align: left;
   width: 960px;
   }
         
   
/* Header - 
styles of the Header
-------------------------------------------------------- */   

#header {
   display: block;
   margin: 0; padding: 0;
   width: 960px;
   height: 350px;
   text-align: left;
   }
   
#logo {
   float: left;
   font-size: 1em;
   border: none;
   height: 314px;
   margin: 0;
   padding: 0;
   width: 170px;
   }

#logo a {
   background: url(images/susdf-logo.gif) top left no-repeat;
   color: #333;
   display: block;
   height: 314px;
   outline: none;
   text-decoration: none;
   text-indent: -9999px;
   width: 170px;
   }

   #logo a:hover {
      text-decoration: none;
      }
      
#header-right {
   float: right;
   width: 790px;
   padding: 0;
   margin: 0;
   }
   
   #head-collage {   
      display: block;
      width: 790px;
      height: 234px;
      }
   
 
      
/* Homepage styles
-------------------------------------------------------- */     

 #tagline {
      background: #fff url(images/tagline.gif) top left no-repeat;
      float: left;
      font-size: 1em;
      height: 46px;
      text-indent: -9999px;
      margin: 0;
      padding: 0;
      width: 790px;
      }
  
.home-col {
   float: left;
   width: 480px;
   }
   
   .home-intro-text  {
      font: normal 1.2em/1.3em georgia, serif; color: #666;
      padding: 10px 10px 10px 10px;
      margin: 0;
      }
         
/* News Flash Style */

#newsflash {
   display: block;
   border-top: 1px dotted #999;
   margin: 0 10px 0 10px;
   padding: 10px 10px 15px 10px;
   background-color: #ffe4c7;
   width: 460px;
   width: +;
   width/**/:/**/ 440px;
   }
   
   #newsflash img.alignright {
   	padding: none; 
   	border: none;
   	background-color: transparent;
   	}
   
   #newsflash h1 {
      margin:0; padding: 0;
      font: normal 1.8em/1.8em georgia, serif;
      }
      
   #newsflash h1 a, 
   #newsflash h1 a:visited {
   text-decoration: none;
      }
   
   #newsflash h1 a:hover, 
   #newsflash h1 a:visited:hover {
      text-decoration: none;
      color: #666;
      }
   
   #newsflash p {
   margin-bottom: 0px;
      }
         

.video {
   background: #bed5e3 url(images/lt-blue-stripes.gif) top left;
   padding: 20px 20px 30px 20px;
   width: 480px;
   width/**/:/**/ 440px;
   }
      
      
#home-content { 
   border-top: 1px solid #ccc;
   display: block;
   padding: 0; 
   width: 960px;
   padding-top: 1px;
   }

#hp-modules { 
   border-top: 1px solid #999;
   margin: 0 10px 20px 10px;
   display: block;
   width: 460px;
   }

.hp-mod h1 {
   font: normal 1.8em/1.8em georgia, serif; color: #cc6633; 
   border-bottom: 1px solid #ccc;
   margin-bottom: 10px;
   display: block;
   width: 100%;
   padding: 0;
   }
   
   .hp-mod h1 a{
      color: #cc6633; 
      display: block;
      width: 100%;
      text-decoration: none;
      }
      
   .hp-mod h1 a:hover{
      color: #666; 
      display: block;
      width: 100%;
      text-decoration: none;
      }
   

.hp-mod {
   width: 220px;
   margin: 0;
   padding: 0;
   }
   
   .left {
      float: left;
      }
   
   .right {
      float: right;
      }
      

/* Interior Body Content structure - 
styles of the main body area including column structure
-------------------------------------------------------- */     

#content { 
   display: block;
   padding: 0; 
   width: 960px;
   }
   
#left-content {
   float: left;
   border-top: 1px solid #333;
   width: 170px;
   padding: 0;
   margin: 0;
   }
   
#right-content {
   float: right;
   padding: 0;
   margin: 0 0 30px 0;
   width: 750px;
   }
   
 #mid-content {
   float: left;
   padding-left: 20px;
   margin: 0 0 30px 20px;
   width: 520px;
   width/**/:/**/ 500px;
   }
   
.int-cols {
   float: left;
   padding-right: 30px;
   width: 250px;
   width/**/:/**/ 210px;
   }
   
   
      
#rt-rail {
   float: right;
   border-top: 1px solid #333;
   border-left: 1px solid #ccc;
   background: #fff url(images/rail-bg.gif) top left repeat-y;
   margin: 0 0 50px 20px;
   padding: 20px;
   width: 200px;
   width/**/:/**/ 160px;
   }
      
/* Interior Body Content styles - 
styles of the main body area including type, lists, etc
-------------------------------------------------------- */     

#right-content blockquote {
   border-left: 1px solid #ccc;
   padding: 10px 20px;
   font-family: georgia, serif !important;
   font-size: 1.7em;
   line-height: normal;
   font-style: italic;
   color: #999;
   margin-bottom: 25px;
   }
   
.credit {
   margin-top: .5em;
   display: block;
   font: bold .5em/1.3em arial, helvetica, sans-serif; color: #333;
   text-transform: uppercase;
   }
   
.smallcredit {
   margin-top: 1em;
   display: block;
   font: normal 10px/1.3em arial, helvetica, sans-serif; color: #666;
   }
   
            
 #right-content p.storyaccent {
   border-left: 1px solid #ccc;
   padding: 5px 20px;
   font: normal 1.1em/1.3em arial, sans-serif;
   font-style: italic;
   }
      
p.grantintro {
   margin: 0;
   }
        
 #right-content p,
 #mid-content p,
 #rt-rail,
 ul.content-list,
 ol.content-list2 {
   font-size: 1.1em;
   font-weight: normal;
   line-height: 1.3em;
   }
         
.address {  
   display: block;
   margin: 10px 0;
   font: normal 1.1em/1.3em arial, helvetica, sans-serif; color: #999;
   }

.date {  
   display: block;
   margin: 0 0 10px 0;
   font: italic 1.1em/1.3em georgia, serif; color: #999;
   }
      
ul.content-list { 
   padding: 0;
   margin: 1em 0;
   }
         
ul.content-list li {
   padding-bottom: 8px;
   margin-left: 15px;
   padding-right: 100px;
   list-style: disc;
   }
   
ol.content-list2 { 
   padding: 0;
   margin: 1em 0 0 0;
   list-style-type: decimal;
   }
         
ol.content-list2 li {
   padding-bottom: 1.5em;
   margin-left: 20px;
   padding-right: 100px;
   } 
   
   
ul.archive { 
   padding: 0;
   margin: .5em 0;
   }
   
ul.archive li { 
   padding: 0 0 8px 10px;
   background: #fff url(images/arrow.gif) 0 5px no-repeat;
   }
   
   ul.toggle-list { 
   padding: 0;
   margin: .2em 0;
   }
   
   ul.toggle-list li { 
      padding: 0 0 8px 10px;
      background: #fff url(images/arrow.gif) 0 5px no-repeat;
      }
      
      ul.toggle-list li ul li{ 
      padding: 0;
      background: none;
      }

.taghead {
   border-top: 1px solid #efefef;
   border-bottom: 1px solid #efefef;
   margin: .5em 0 1em 0;
   padding: .5em 0;
   text-align: center;
   font: normal 1.9em georgia, serif; color: #00679c;
   }
      
.lite {
   font-style: italic;
   color: #69C;
   }
         
#breadcrumb {
   display: block;
   height: 45px;
   color: #666;
   font-size: 1em; 
   margin: 0;
   padding: 0;
   }
   
   #breadcrumb a,
   #breadcrumb a:visited {
      color: #F90;
      text-decoration: none;
      }
            
   #breadcrumb a:hover {
      text-decoration: underline;
      }
                  
.inset-pic {
   background-color: #fff;
   border: 1px solid #ccc;
   float: right;
   margin: 0 0 20px 20px;
   padding: 5px;
   
   }
   
   .inset-pic span { 
      display: block; 
      margin: 5px 5px 0 5px;
      font-size: .8em; color: #999;
      }
   

.story {
   width: 100%;
   clear: both;
   display: block;
   border-bottom: 1px dotted #ccc;
   padding-bottom: 10px;
   }
   
   div#board01,
   div#board02,
   div#board03,
   div#board04,
   div#board05,
   div#board06 {
        margin: 0 0 5px 0;
        border-bottom: 1px solid #ccc;
        padding: 0 0 10 0px;
        display: none;
         }
   
            
/* Form
styles of the main forms
-------------------------------------------------------- */

#right-content .required {
   color: #F00;
   }
			
dl { 
	padding: 20px 0 0 0; 
	margin: 0;
	border-top: 1px solid #ccc;
	width: 100%;
   }
    
dt { 
	width: 250px;
	text-align: left;
	float: left; 
	padding: 0px; margin: 0px;
	font-weight: bold;
   }
   			
dd { 
   float: left;
	text-align:left;
	margin: 0px;
	padding: 0 0 10px 0;
   }
   
dd input.text, dd textarea {
   padding: 5px; 
	text-align:left;
   vertical-align:top;
	width: 500px;
	width/**/:/**/ 484px;
	background: #fff url(/images/form-bg.gif) top left repeat-x;
	border: 3px double #ccc;
	font: bold 14px/16px arial, helvetica, sans-serif; color:  #333; 
   }
   
dd input.image {
	float: left;
   vertical-align:top;
   }

p.thankyoupad {
   padding-bottom: 200px;
   }
   
dl.grant-app { 
	padding: 20px 0; 
	margin: 0;
	border-top: 1px solid #ccc;
	width: 100%;
   }  
  
dl.grant-app dt {
	clear: both;
	float: left; 
	display: block;
	text-align: left;
	padding-right: 25px; margin: 0px;
	font-weight: normal;
	width: 250px;
	width/**/:/**/ 225px;
	}  
	
	dl.grant-app dt label {
		font-weight: bold;
		}
		
	.number {
		font-weight: bold;
		color: #00679c; 
		}
		
	dl.grant-app dt.rule {
		margin-top: 15px;
		border-top: 1px dotted #666;
		padding-bottom: 5px;
		width: 95%;
		}
   
dl.grant-app dd {
	float: left; 
	display: block;
	width: 500px;
	text-align: left;
	margin: 0px;
	padding: 0 0 20px 0;
	}
	
	dl.grant-app dd span {
		display: inline !important;
		}
		
	.breakdown-header {
		display: block;
		border: 1px solid red;
		}	
			
	dl.grant-app dd .dollar {
		font-size: 14px;
		color: #333;
		padding: 2px;
		line-height: 28px;
		}
		
	dl.grant-app dd .preface{
		padding: 3px;
		line-height: 28px;
		}
		
dl.grant-app dd input.text {
		padding: 5px; 
		text-align:left;
		vertical-align:top;
		width: 500px;
		margin: 0;
		width/**/:/**/ 448px;
		background: #fff url(/images/form-bg.gif) top left repeat-x;
		border: 1px solid #ccc;
		font: normal 14px/16px arial, helvetica, sans-serif; color:  #333; 
		}
		
dl.grant-app dd input.text-250,
dl.grant-app dd select.text-250 {
		padding: 5px; 
		text-align:left;
		vertical-align:top;
		margin: 0;
		width: 250px;
		width/**/:/**/ 236px;
		background: transparent url(/images/form-bg.gif) top left repeat-x;
		border: 1px solid #ccc;
		font: normal 14px/16px arial, helvetica, sans-serif; color:  #333; 
		}
		
dl.grant-app dd input.text-80{
		padding: 5px; 
		text-align:left;
		vertical-align:top;
		width: 80px;
		margin: 0;
		width/**/:/**/ 68px;
		background: transparent url(/images/form-bg.gif) top left repeat-x;
		border: 1px solid #ccc;
		font: normal 14px/16px arial, helvetica, sans-serif; color:  #333; 
		}
   
dl.grant-app dd textarea {
		padding: 5px; 
		text-align:left;
		vertical-align:top;
		width: 500px;
		margin: 0;
		width/**/:/**/ 448px;
		background: #fff url(/images/form-bg.gif) top left repeat-x;
		border: 1px solid #ccc;
		font: normal 14px/16px arial, helvetica, sans-serif; color:  #333; 
		}      

input.button {
		padding: 5px; 
		text-align:center;
		vertical-align:top;
		width: 120px;
		width/**/:/**/ 110px;
		background-color: #c43527 ;
		border: none;
		font: bold 14px/16px arial, helvetica, sans-serif; color:  #fff; 
		}
		
input.reset {
		padding: 5px; 
		text-align:center;
		vertical-align:top;
		width: 120px;
		width/**/:/**/ 110px;
		background-color: #fff ;
		border: none;
		font: bold 14px/16px arial, helvetica, sans-serif; color:  #c43527; 
		}
       

/* Footer - 
styles of the footer
-------------------------------------------------------- */

#footer {
   border-top: 3px double #ccc;
   clear: both;
   font: normal 1em/40px arial, helvetica, sans-serif; color: #666;
   height: 40px;
   margin: 5px 0 10px 0;
   padding: 0;
   text-align: right;
   width: 960px;
   }


#footer a {
   font-weight: bold;
   color: #00679c;
   text-decoration: none;
   }

#footer a:hover {
   text-decoration: underline; color: #00679c;
   }

#footer .lefttext {
   float: left;
   }