/*
Franklin Street Stories stylesheet
Kelly Marks
www.kellyink.com
Updated: April 2008
*/



/* ---( universal )------------------------------- */


html * {
     padding: 0;
     margin: 0;
     }

a img, :link img, :visited img {
     border: 0;
     }

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

ol, ul {
     list-style: none;
     }

p {
     line-height: 20px;
     padding: 0 0 5px 0;
     }
     

body {
     background: #fff url(../images/bkgd2.gif) repeat-x;
     color: #333;
     margin: 0;
     padding: 0;
     font-family: "Trebuchet MS", Verdana, Helvetica, sans-serif;
     font-size: 12px;
     text-align: center;/*this is in place to center in older browsers*/
     }

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

a:link {/* unvisited link */
     color:#69c;
     }     
 
a:hover { /* mouse over link */
     color:#69c;
     text-decoration: underline;
     }  

a:active {/* selected link */
     color:#69c;
     }



/* ---( layout )------------------------------- */


#wrapper {
     width: 844px;
     margin: 0 auto;
     text-align: left;
     border-bottom: 2px solid #aaa;
     }

#header {
     width: 800px;
     margin-top: 50px;
     padding: 20px 22px 25px 22px;
     height: 325px;
     background: #fff;
     position: relative;
     }
     
#secheader {
     width: 800px;
     margin-top: 50px;
     padding: 20px 22px 25px 22px;
     height: 125px;
     background: #fff;
     position: relative;
     }     

#header h1 {
     position: absolute;
     top:20px;
     left: 22px;
     width: 350px;
     height: 23px;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 30px;
     color:#ccc;
     font-weight: bold;
     }

#content {
     float: left;
     width: 844px;
     background: #fff;
     }

#col_left {
     float: left;
     width: 551px;
     padding: 30px 22px;
     }

#col_right {
     float: right;
     width: 185px;
     padding: 5px 38px 30px 22px;
     margin-top: 25px;
     border-left: 1px solid #efefef;     
     }   
 
 #col_span {
     width: 800px;
     padding: 30px 22px;
     }
     
 #col_span p {
     padding: 8px 55px 8px 0px;
     line-height:16px;
     }     
     
.speaker {
     font-weight: bold;
     text-transform: uppercase;
     }     
     
.timestamp {
     color:#666;
     text-transform: uppercase;
     font-size: 10px;
     } 
     
.interviewer {
     margin: 10px 25px;
     }         


/* ---( map )------------------------------- */


#map {
     position: absolute;
     top:70px;
     border-top: 6px solid #777;
     }
     
#pano {
     position: absolute;
     top:70px;
     border-top: 6px solid #777;
     }     

#window {
     width: 325px;
     padding: 0; 
     margin: 0; 
     }

#window h4 {
     color:#69c; 
     font-size:14px;
     margin: 0 0 2px 0;
     font-family: "Trebuchet MS", verdana, helvetica, sans-serif;
     }
     
.segAddress {
     font-size:10px;  
     color:#ccc; 
     clear:both; 
     }
     
#window p {
     font-size: 10px; 
     margin: 5px 5px 0 0px;  
     line-height:14px;
     color:#444;
     font-family: verdana, helvetica, sans-serif;
     }
     
#window img {
     margin: 7px 5px 5px 10px;
     border: 1px solid #dfdfdf;
     padding: 3px;
     float: right;
     }   

.controls {
     float: right;
     font-size: 9px;
     color:#ccc;
     }  



/* ---( navigation )------------------------------- */


#navigation {
     position: absolute;
     top: 25px;
     right: 21px;
     }

#navigation li {
     float: left;
     }

#navigation a {
     display: inline-block;
     font-size: 11px;
     text-transform: uppercase;
     text-decoration:none;
     padding:10px 15px 35px 15px;;
     color:#ccc;
     margin-right: 1px;
     font-weight: normal;
     text-transform: uppercase     
     }

#navigation a:hover {
     background-color: #eeefef;
     color:#69c;
     }

#navigation li.selected a {
     color:#69c;
     }
     
     

/* ---( sidebar )------------------------------- */


#sidebar {
     padding-bottom: 20px;
     }
     
#sidebar p {
     font-size: 11px;
     }    
     
#sidebar h3 {
     font-size: 14px;
     }       

#sidebar p.date {
     color: #95ca05;
     font-weight: bold;
     }

#sidebar p.transcript {
     padding-left: 20px;
     margin: 10px 0 0 0;
     font-size: 12px;
     border-bottom: 1px solid #dfdfdf;
     background: url(../images/transcript.gif) no-repeat 0 2px;
     }
     
#sidebar p.audio {
     padding-left: 20px;
     margin: 10px 0 0 0;
     font-size: 12px;
     border-bottom: 1px solid #dfdfdf;
     background: url(../images/ipod.gif) no-repeat 0 2px;
     }     

#sidebar ul {
     margin-top: 10px;
     }

#sidebar li { 
     padding: 8px 15px 8px 30px;
     border-bottom: 1px solid #F0F0F0;
     }
     
#sidebar li a:link, #sidebar li a:visited { 
     font-size:11px;
     color: #333;
     text-decoration: none;
     }     
     
#sidebar li a:hover { 
     color: #69c;
     text-decoration: underline;
     }        

#sidebar li.location {
     background: url(../images/map.gif) no-repeat 5px 6px;    
     }

#sidebar li.audio {
     background: url(../images/ipod.gif) no-repeat 5px 6px;    
     }
     
#sidebar li.transcript {
     background: url(../images/transcript.gif) no-repeat 5px 6px;    
     }   
       
h3.supplemental {
     margin-top: 10px;
     border-top: 1px solid #dfdfdf;
     padding: 20px 0 0 0;
     }

.green {
     color: #95ca05; 
     }



/* ---( content styling )------------------------------- */


h2 {
     font-size: 17px;
     font-weight: normal;
     margin-bottom: 10px;
     color: #666;
     text-transform: uppercase
     }

h3 {
     padding: 20px 0 5px 0;
     font-size: 15px;
     font-weight: normal;
     }

#intro {
     padding-bottom: 25px;
     border-bottom: 1px solid #dfdfdf;
     }

#center {
     float:left;
     padding-bottom: 35px;
     padding-right: 10px;
     font-size: 11px;
     border-bottom: 1px solid #dfdfdf;
     line-height: 13px;
     }

#resources {
     margin: 10px 25px 0 25px;
     }  
     
#resources h2 {
     padding-top: 10px;
     }     
     
#resources p {
     margin-bottom: 10px;
     }             

.reslink {
     padding: 10px 0 0 20px;
     background: url(../images/reslink.gif) no-repeat 0px 11px;     
     font-size: 14px;
     }
     
.resdescrip {
     padding-left: 20px;
     font-size: 11px;
     }            
     
.transcriptlink {
     float: right;
     padding-left: 20px;
     padding-right: 15px;
     background: url(../images/transcript.gif) no-repeat 0 50%;
     }       
     
#quote {
     float:left;
     padding: 35px 0;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 17px;
     font-style: italic;
     letter-spacing: 1px;
     color: #8b8b8c;
     }

#quote p {
     line-height: 22px;
     }

#quote p.testimonial {
     font-size: 12px;
     font-family: Arial, Helvetica, sans-serif;
     font-style: normal;
     color: #fff;
     }

#quote .quote {
     font-size: 22px;
     }     

#about_us {
     float: left;
     width: 184px;
     margin-right: 27px;
     display: inline;
     }

#services {
     float: left;
     width: 150px;
     margin-right: 42px;
     display: inline;     
     }

#clients {
     float: left;
     width: 140px;
     display: inline;
     }

#services ul li {
     padding: 0 0 14px 18px;
     background: url(../images/bullet.jpg) no-repeat top left;
     }

#clients ul li {
     padding:0 0 14px 20px;
     background: url(../images/arrow.jpg) no-repeat top left;
     }

     


/* ---( images )------------------------------- */


#picturebox {
     float:left;
     margin: 5px 15px 15px 0;
     }
     
#pictureright {
     float:right;
     margin: 5px 0 15px 15px;
     }
     

#pictureboximage{
	float: left;
	margin: 5px 0 0 5px;
	padding: 0 4px 5px 0;
	/* hide from IE/Mac */
	background: url(../images/shdw-big.gif) no-repeat right bottom;
	/* end hide */
     }
     
#pictureboximage img {     
    position:relative;
	padding: 5px;
	margin: -4px 0 0 -4px;
	border: 1px solid #ccc;
	background: #fff;
	}
	
#imageleft {
     float:left;
     margin: 0px 10px 5px 10px;
     }	
     
#imageright {
     float:right;
     margin: 5px 10px 5px 10px;
     }     


     
/* ---( individual story pages )------------------------------- */     
     
     
#storyinfo {
     padding-bottom: 10px;
     border-bottom: 1px solid #dfdfdf;
     }     


#storyquote {
     float:left;
     background: url(../images/quote.gif) no-repeat top left;     
     padding: 15px 0px 15px 35px;      
     margin: 15px 0px 15px 0;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 17px;
     font-style: italic;
     color: #8b8b8c;
     border-top: 1px solid #dfdfdf;
     border-bottom: 1px solid #dfdfdf;
     width:500px;
     }
     
#storyquote2 {
     float:left;
     background: url(../images/quote.gif) no-repeat top left;     
     padding: 15px 5px 15px 35px;      
     margin: 15px 25px 15px 0;
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: 16px;
     font-style: italic;
     color: #8b8b8c;
     }     
     
#storyquote p {
     line-height: 22px;
     }     

#story {
     float:left;
     padding: 15px 15px 35px 0;
     }    
     
#storytop {
     float:left;
     padding: 15px 5px 15px 0;
     border-bottom: 1px solid #dfdfdf;     
     }        

.byline {
     font-size: 11px;
     color: #555;
     padding: 0 0 20px 0;
     }        
     
    
     
     
/* ---( footer )------------------------------- */     
     

#footer {
     width: 844px;
     margin: 20px auto 30px auto;
     }   
     
#footer p {
     text-align: center;
     font-size: 10px;
     line-height: 15px;
     color: #999;
     }
     
#footer a:link, #footer a:visited {
     color:#666;
     }     
     
#footer a:hover {
     color:#69c;
     }