/*  Title:CSS for TROMP
		Author: Navin Parray
		Contact: navin@parray.net
		Date:16th July, 2009
*/
html{height:100%;}
body{width:auto;min-width:1280px;height:100%;margin:0;padding:0;}
body{font-size:62.5%;line-height:16px;}
p,span{color:#dddddd;font-size:1.0em;letter-spacing:0.1em;line-height:1.1em;}
a{text-decoration:none;}
h1{font-size:1.6em;color:#dbdca8;font-family:'Arial';font-weight:bold;}
h2{font-size:1.6em;color:#000000;font-family:'Arial';font-weight:bold;}

span a{color:#dddddd;text-decoration:underline;}

.wrapper{width:auto;height:auto;height:100%;margin: 0 auto 70px;border:1px none #000000;min-height: 100%;}
#header{width:100%;height:180px;}
#header-image{width:860px;height:180px;}
#menu{position:absolute;top:20px;right:0px;width:750px;height:100px;border:1px none #000000;text-align:right;}
#menu-bottom{position:absolute;top:115px;right:0px;width:200px;height:100px;border:1px none #000000;text-align:right;}
#content{width:auto;height:auto;margin:auto 30px;border:1px none #000000;}
#title{width:960px;height:auto;border:1px none #000000;margin-left:28px;line-height:7.0em;}
#footer,.push {height:70px;clear: both;}
#footer{width:100%;clear:both;border:1px none #000000;position:relative;bottom:0px;}
#dot{width:50px;height:30px;background:url(images/dot.png) no-repeat;border:1px none #000000;position:relative;left:40px;bottom:-10px;}
#arrow-horizontal{width:1150px;height:20px;margin-left:20px;border:1px none #000000;}
#body-text-section{width:1150px;height:auto;border:1px none #000000;border:1px none #000000;}
#arrow-vertical-section{width:50px;height:300px;float:left;border:1px none #000000;}
#arrow-vertical{width:50px;height:250px;border:1px none #000000;}
#arrow-head{width:50px;height:50px;border:1px none #000000;}
#body-text{width:650px;height:auto;float:left;border:1px none #000000;margin-top:20px;}
#title h1{font-size:6.0em;font-family:'Garamond';font-weight:bold;}
#body-text p{font-size:2.3em;font-family:'Garamond';font-weight:bold;margin-bottom:20px;margin-left:20px;}
#body-text .emphasis{color:#975910;font-size:1.2em;font-style:italic;font-family:'Garamond';font-weight:bold;}
#right-section{width:400px;height:300px;border:1px none #000000;float:left;margin-left:40px;}
#image-section{width:200px;height:270px;float:left;border:1px none #000000;margin-top:20px;}
#below-image-section{width:300px;height:20px;float:right;border:1px none #000000;position:relative; bottom:0px;}
#right-vertical-arrow{width:15px;height:320px;float:right;border:1px none #000000;margin-top:-20px;margin-right:-20px;}
#footer-text{margin-top:15px;margin-left:20px;;margin-right:auto;font-size:1.2em;;font-family:'Arial';}
#footer-text span{margin-left:20px;}


#mp3player {float:left; height:25px; width:100%;}


.outreach p{color:#1c403d;}
.mentoring{color:#1c403d;}
.project p{color:#1c403d;}

#main-nav{width:auto;height:30px;border:1px none #000000;position:absolute;top: 0px;right:0px;}
#main-nav a{font-size:1.2em;font-family:'Arial';color:#000000;text-decoration:none;margin-right:20px;border-bottom:1px dashed #666666;}
#main-nav a:hover{background-color:#000000;color:#ffffff;}

#logo{width:1100px;height:120px;margin-left:auto;margin-right:auto;position:absolute;top:160px;left:200px;}
#logo-subtext a{display:block;width:700px;height:24px;background:url(images/logo-subtext.jpg) no-repeat;margin-left:auto;margin-right:auto;clear:both;position:absolute;top:360px;left:300px;}
#track-t{width:0px;height:20px;background:url(images/track-t.png) repeat-x;}
#track-r{width:0px;height:20px;background:url(images/track-r.png) repeat-x;}
#track-o{width:0px;height:20px;background:url(images/track-o.png) repeat-x;}
#track-m{width:0px;height:20px;background:url(images/track-m.png) repeat-x;}
#track-p{width:0px;height:20px;background:url(images/track-p.png) repeat-x;}
.letter{float:left;}

#letter-t a{display:block;width:129px;height:251px;background:url(images/logo-t.jpg) no-repeat;}
#letter-t a:hover{display:block;width:129px;height:251px;background:url(images/logo-t-h.jpg) no-repeat;}
#letter-r a{display:block;width:162px;height:251px;background:url(images/logo-r.jpg) no-repeat;}
#letter-r a:hover{display:block;width:162px;height:251px;background:url(images/logo-r-h.jpg) no-repeat;}
#letter-o a{display:block;width:147px;height:259px;background:url(images/logo-o.jpg) no-repeat;}
#letter-o a:hover{display:block;width:147px;height:259px;background:url(images/logo-o-h.jpg) no-repeat;}
#letter-m a{display:block;width:235px;height:249px;background:url(images/logo-m.jpg) no-repeat;}
#letter-m a:hover{display:block;width:235px;height:249px;background:url(images/logo-m-h.jpg) no-repeat;}
#letter-p a{display:block;width:164px;height:249px;background:url(images/logo-p.jpg) no-repeat;}
#letter-p a:hover{display:block;width:164px;height:249px;background:url(images/logo-p-h.jpg) no-repeat;}

#menu span{font-size:1.5em;font-family:'Arial';font-weight:bold;margin-top: 0px;margin-right:15px;float:right;}
#menu a{text-decoration:none;color:#D4D7D8;text-transform:uppercase;}
#menu a:hover{text-decoration:none;color:#ffae00;text-transform:uppercase;}

#menu-back a{display:block;width:75px;height:100px;background:url(images/menu-back-h.png) no-repeat;}
#menu-back a:hover{display:block;background:url(images/menu-back-h1.png) no-repeat;}
#menu-home a{display:block;width:75px;height:100px;background:url(images/menu-home-h.png) no-repeat;}
#menu-home a:hover{display:block;background:url(images/menu-home-h1.png) no-repeat;}
#menu-next a{display:block;width:75px;height:100px;background:url(images/menu-next-h.png) no-repeat;}
#menu-next a:hover{display:block;background:url(images/menu-next-h1.png) no-repeat;}
#menu-donate a{display:none;width:100px;height:100px;background:url(images/menu-donate-h.png) no-repeat;}
#menu-donate a:hover{display:none;background:url/images/menu-donate-h1.png) no-repeat;}
#menu-fourphases a{display:block;width:75px;height:100px;background:url(images/menu-fourphases-h.png) no-repeat;}
#menu-fourphases a:hover{display:block;background:url(images/menu-fourphases-h1.png) no-repeat;}
#menu-mission a{display:block;width:75px;height:110px;background:url(images/menu-mission-h.png) no-repeat;}
#menu-mission a:hover{display:block;background:url(images/menu-mission-h1.png) no-repeat;}
#menu-contact a{display:block;width:75px;height:110px;background:url(images/menu-contact-h.png) no-repeat;}
#menu-contact a:hover{display:block;background:url(images/menu-contact-h1.png) no-repeat;}

#menu-news a{float:right;clear:none;display:block;width:100px;height:110px;background:url(images/menu-news-h.png) no-repeat;}
#menu-news a:hover{float:right;clear:none;display:block;background:url(images/menu-news-h1.png) no-repeat;}
#menu-sameside a{display:block;width:100px;height:110px;background:url(images/menu-sameside-h.png) no-repeat;}
#menu-sameside a:hover{display:block;background:url(images/menu-sameside-h1.png) no-repeat;}

#sub-menu{float:right;border:1px none #ffffff;margin:-25px 30px 0px 0px;}
.sub-menu-item{margin:0px 0px 0px 5px;background:url(images/sub-menu-item-bkgnd-hover.png) repeat;padding:5px 5px 5px 5px;}
.sub-menu-item a{text-decoration:none;font-size:1.2em;font-family:'Verdana';color:#033849;}
.sub-menu-item:hover{background:url(images/sub-menu-item-bkgnd.png) repeat;}
.sub-menu-item a:hover{color:#ffffff;}

.travel {background:url(images/content-background-t.jpg) repeat;}
.travel #header{background:url(images/header-background-t.jpg) repeat-x;}
.travel #header-image{background:url(images/header-travel.png) no-repeat 50px 2px;}
.travel #arrow-horizontal{background:url(images/arrow-horizontal-t.png) repeat-x;}
.travel #arrow-vertical{background:url(images/arrow-vertical-t.png) repeat-y 15px 10px;}
.travel #arrow-head{background:url(images/arrow-head-t.png) no-repeat;}
.travel #footer{background:url(images/footer-background-t.jpg) repeat-x;}
.travel #footer span {color:#ffffff;}
.travel #footer span a{color:#ffffff;}
.travel #title h1{color:#629090;}
.travel #body-text p{color:#1c403d;}
.travel #below-image-section{background:url(images/arrow-horizontal-t.png) repeat-x;}
.travel #right-vertical-arrow{background:url(images/arrow-vertical-t.png) repeat-y top right;}
.travel #menu-back {display:none;}

.responsibility {background:url(images/content-background-r.jpg) repeat;}
.responsibility #header{background:url(images/header-background-r.jpg) repeat-x;}
.responsibility #header-image{background:url(images/header-responsibility.png) no-repeat 50px 10px;}
.responsibility #arrow-horizontal{background:url(images/arrow-horizontal-r.png) repeat-x;}
.responsibility #arrow-vertical{background:url(images/arrow-vertical-r.png) repeat-y 20px 10px;}
.responsibility #arrow-head{background:url(images/arrow-head-r.png) no-repeat 7px -3px;}
.responsibility #footer{background:url(images/footer-background-r.jpg) repeat-x;}
.responsibility #title h1{color:#bf3d3d;}
.responsibility #body-text p{color:#7a1313;}
.responsibility #below-image-section{background:url(images/arrow-horizontal-r.png) repeat-x;}
.responsibility #right-vertical-arrow{background:url(images/arrow-vertical-r.png) repeat-y top right;}


.outreach {background:url(m/images/content-background-o.jpg) repeat;}
.outreach #header{background:url(images/header-background-o.jpg) repeat-x;}
.outreach #header-image{background:url(images/header-outreach.png) no-repeat 50px 2px;}
.outreach #arrow-horizontal{background:url(images/arrow-horizontal-o.png) repeat-x;}
.outreach #arrow-vertical{background:url( /images/arrow-vertical-o.png) repeat-y 13px 10px;}
.outreach #arrow-head{background:url(images/arrow-head-o.png) no-repeat;}
.outreach #footer{background:url(images/footer-background-o.jpg) repeat-x;}
.outreach #title h1{color:#e99636;}
.outreach #body-text p{color:#975910;}
.outreach #below-image-section{background:url(images/arrow-horizontal-o.png) repeat-x;}
.outreach #right-vertical-arrow{background:url(images/arrow-vertical-o.png) repeat-y top right;}

.mentoring {background:url(images/content-background-m.jpg) repeat;}
.mentoring #header{background:url(images/header-background-m.jpg) repeat-x;}
.mentoring #header-image{background:url(images/header-mentoring.png) no-repeat 50px 20px;}
.mentoring #arrow-horizontal{background:url(images/arrow-horizontal-m.png) repeat-x;}
.mentoring #arrow-vertical{background:url(images/arrow-vertical-m.png) repeat-y 13px 10px;}
.mentoring #arrow-head{background:url(images/arrow-head-m.png) no-repeat;}
.mentoring #footer{background:url(images/footer-background-m.jpg) repeat-x;}
.mentoring #title h1{color:#ca34c8;}
.mentoring #body-text p{color:#670166;}
.mentoring #below-image-section{background:url(images/arrow-horizontal-m.png) repeat-x;}
.mentoring #right-vertical-arrow{background:url(images/arrow-vertical-m.png) repeat-y top right;}


.project {background:url(images/content-background-p.jpg) repeat;}
.project #header{background:url(images/header-background-p.jpg) repeat-x;}
.project #header-image{background:url(images/header-project.png) no-repeat 50px 2px;}
.project #arrow-horizontal{background:url(images/arrow-horizontal-p.png) repeat-x;}
.project #arrow-vertical{background:url(images/arrow-vertical-p.png) repeat-y 13px 10px;}
.project #arrow-head{background:url(images/arrow-head-p.png) no-repeat;}
.project #footer{background:url(images/footer-background-p.jpg) repeat-x;}
.project #title h1{color:#6ca156;}
.project #body-text p{color:#4d6f3e;}
.project #below-image-section{background:url(images/arrow-horizontal-p.png) repeat-x;}
.project #right-vertical-arrow{background:url(images/arrow-vertical-p.png) repeat-y top right;}
.project #menu-next {display:none;}

.mission {background:url(images/content-background-mission.jpg) repeat;}
.mission #header{background:url(images/header-background-mission.jpg) repeat-x;}
.mission #header-image{background:url(images/header-tromp.png) no-repeat 50px 10px;}
.mission #arrow-horizontal{background:url(images/arrow-horizontal-mission.png) repeat-x;}
.mission #arrow-vertical{background:url(images/arrow-vertical-mission.png) repeat-y 13px 10px;}
.mission #arrow-head{background:url(images/arrow-head-mission.png) no-repeat;}
.mission #footer{background:url(images/footer-background-mission.jpg) repeat-x;}
.mission #title h1{color:#000000;}
.mission #body-text p{color:#6a6b69;}
.mission #below-image-section{background:url(images/arrow-horizontal-mission.png) repeat-x;}
.mission #right-vertical-arrow{background:url(images/arrow-vertical-mission.png) repeat-y top right;}

.contact {background:url(images/content-background-mission.jpg) repeat;}
.contact #header{background:url(images/header-background-mission.jpg) repeat-x;}
.contact #header-image{background:url(images/header-tromp.png) no-repeat 50px 10px;}
.contact #arrow-horizontal{background:url(images/arrow-horizontal-mission.png) repeat-x;}
.contact #arrow-vertical{background:url(images/arrow-vertical-mission.png) repeat-y 13px 10px;}
.contact #arrow-head{background:url(images/arrow-head-mission.png) no-repeat;}
.contact #footer{background:url(images/footer-background-mission.jpg) repeat-x;}
.contact #title h1{color:#000000;}
.contact #body-text p{color:#6a6b69;}
.contact #below-image-section{background:url(images/arrow-horizontal-mission.png) repeat-x;}
.contact #right-vertical-arrow{background:url(images/arrow-vertical-mission.png) repeat-y top right;}
.contact #donate-header{font-size:1.4em;font-weight:bold;margin:0px 0px 20px 0px;color:#c62c42;}
.contact #donate-info{font-size:1.4em;color:#000000;margin:40px 0px 0px 100px;letter-spacing:0.1em;line-height:1.5em;}
.contact #address{margin:20px 0px 20px 20px;}

.fourphases {background:url(images/content-background-mission.jpg) repeat;}
.fourphases #header{background:url(images/header-background-mission.jpg) repeat-x;}
.fourphases #header-image{background:url(images/header-tromp.png) no-repeat 50px 10px;}
.fourphases #arrow-horizontal{background:url(images/arrow-horizontal-mission.png) repeat-x;}
.fourphases #arrow-vertical{background:url(images/fourphases-vert-dashes.png) repeat-y}
.fourphases #arrow-head{background:url(images/arrow-head-mission.png) no-repeat;}
.fourphases #footer{background:url(images/footer-background-mission.jpg) repeat-x;}
.fourphases #title h1{color:#6a6b69;font-size:2.6em;line-height:1.0em;text-transform:uppercase;clear:both;padding:20px 0px 0px 200px;}
.fourphases #title-alt h1{color:#729bba;font-family:'Georgia';font-size:2.6em;line-height:1.0em;text-transform:uppercase;clear:both;padding:20px 0px 0px 200px;}
.fourphases #title-gray h1{color:#777575;font-family:'Georgia';font-size:2.6em;line-height:1.0em;text-transform:uppercase;clear:both;padding:20px 0px 0px 200px;}
.fourphases #body-text p{color:#6a6b69;}
.fourphases #below-image-section{background:url(images/arrow-horizontal-mission.png) repeat-x;}
.fourphases #right-vertical-arrow{background:url(images/arrow-vertical-mission.png) repeat-y top right;}
.fourphases #content-body{width:1100px;height:auto;border:1px none #000000;margin:0px auto 0 auto;}
.fourphases .phase{width:270px;height:390px;border:1px none #000000;float:left;margin-left:5px;background:url(images/fourphases-vert-dashes.png) repeat-y top right;}
.fourphases .phaseo{width:270px;height:390px;border:1px none #000000;float:left;margin-left:5px;background:url(images/fourphases-vert-dashes-o.png) repeat-y top right;}
.fourphases .phasee{width:270px;height:390px;border:1px none #000000;float:left;margin-left:5px;background:url(images/fourphases-vert-dashes-e.png) repeat-y top right;}
.fourphases .phasew{width:270px;height:390px;border:1px none #000000;float:left;margin-left:5px;background:url(images/fourphases-vert-dashes-w.png) repeat-y top right;}
.fourphases .phaseen{width:270px;height:390px;border:1px none #000000;float:left;margin-left:5px;background:url(images/fourphases-vert-dashes-en.png) repeat-y top right;}
.fourphases .ptitle{margin:5px 0px 0px 20px;font-size:2.0em;font-weight:bold;color:#6a6b69;font-family:'Arial';}
.fourphases .ptitleo{margin:5px 0px 0px 20px;font-size:2.0em;font-weight:bold;color:#fff600;font-family:'Arial';}
.fourphases .ptitlee{margin:5px 0px 0px 20px;font-size:2.0em;font-weight:bold;color:#729bba;font-family:'Arial';}
.fourphases .phaseg{width:270px;height:390px;border:1px none #000000;float:left;margin-left:5px;background:url(images/fourphases-vert-dashes-gray.png) repeat-y top right;}
.fourphases p{margin:10px 0px 0px 25px;font-size:1.2em;color:#6a6b69;font-family:'Georgia';padding-right:15px;}
.fourphases li{list-style-image:url(images/phases-dot.png);list-style-position:inside;padding:0px 0px 0px 5px;}
.fourphases .psign{padding-top:10px;position:relative;left:-10px;padding-bottom:10px;}

.sameside {background:url(images/content-background-mission.jpg) repeat;}
.sameside #header{background:url(images/header-background-mission.jpg) repeat-x;}
.sameside #header-image{background:url(images/header-tromp.png) no-repeat 50px 10px;}
.sameside #arrow-horizontal{background:url(images/arrow-horizontal-mission.png) repeat-x;}
.sameside #arrow-vertical{background:url(images/arrow-vertical-mission.png) repeat-y 13px 10px;}
.sameside #arrow-head{background:url(images/arrow-head-mission.png) no-repeat;}
.sameside #footer{background:url(images/footer-background-mission.jpg) repeat-x;}
.sameside #title h1{color:#555B5E;}
.sameside #body-text p{color:#6a6b69;}
.sameside #below-image-section{background:url(images/arrow-horizontal-mission.png) repeat-x;}
.sameside #right-vertical-arrow{background:url(images/arrow-vertical-mission.png) repeat-y top right;}

.contact textarea
{
	border: 1px none #d5a5c3; 
	background: url(images/contact-text-background.png);  	
	color: #000000;
	width:400px;
	max-width:400px;
	min-width:400px;
	height: 150px;
	padding: 0.1em;
	font-size:1.5em;
	font-family:'Arial';
	margin-left:100px;
}

.contact #right-section{width:450px;}
.contact #detail_error {margin-left:100px;}
.contact #email_error {width:300px;}

.contact #name, #email 
{
	border: 1px none #d5a5c3; 
	background: url(images/contact-text-background.png);  	
	color: #000000;
	width:300px;
	height: 20px;
	padding: 0.1em;
	font-size:1.5em;
	font-family:'Arial';
	margin-bottom:15px;
	margin-top:10px;
}

.contact #right-section {margin-left:0px;}

.contact #send{color:#666464;font-size:1.3em;font-family:'Arial';font-weight:normal;margin-top:0px;margin-bottom:10px;margin-left:0px;width:70px;height:30px;border:none;background:url(images/contact-submit-background.png);margin-left:230px;margin-top:20px;}
.contact .error{color:#a41d1d;font-size:1.2em;font-family:'Arial';}
.contact .content{min-height:800px;}

.same-side-logo
{
	width:370px;
	padding:5px;
	margin:0px 0px 10px 50px;
	border:5px solid #C2BDC7;
	text-align:center;
	float:left;
}

.same-side-logo:hover
{
	border:5px solid #0071BC;
}

.same-side-logo.zipcar{background-color:white;}
.same-side-logo.walkboston{background-color:#FF9900;padding:20px 5px;}
.same-side-logo.greenstreets{background-color:white;}
.same-side-logo.peopleforbikes{background-color:white;padding:0px;width:380px;}
.same-side-logo.cceag{background-color:white;padding:0px;width:380px;}
.same-side-logo.civilstreets{background-color:white;padding:0px;width:380px;}
.same-side-logo.livablestreets{background-color:white;padding:0px;width:380px;}
.same-side-logo.massdrive{background-color:#f2f2f2;padding:0px;width:380px;padding:5px 0px;}

.sameside #image-section{height:auto;}

.sameside .text-description{min-height:265px;margin-top:10px;text-align:center;}
.sameside .text-description p{font-size:2.3em;font-family:'Garamond';font-weight:bold;margin-bottom:20px;margin-left:20px;color:#6A6B69;}
.sameside #body-text{margin:0px;}


.blog{background:url(images/content-background-mission.jpg) repeat;font-family:arial,helvetica,clean,sans-serif;color:#727478;}
.blog #header{background:url(images/header-background-mission.jpg) repeat-x;}
.blog #header-image{background:url(images/header-tromp.png) no-repeat 50px 10px;}
.blog #arrow-horizontal{background:url(images/arrow-horizontal-mission.png) repeat-x;}
.blog #arrow-vertical{background:url(images/arrow-vertical-mission.png) repeat-y 13px 10px;}
.blog #arrow-head{background:url(images/arrow-head-mission.png) no-repeat;}
.blog #footer{background:url(images/footer-background-mission.jpg) repeat-x;}
.blog #title h1{color:#000000;}
.blog #body-text p{color:#676B67;font-family:inherit;font-size:14px;font-weight:normal;line-height:20px;}
.blog #below-image-section{background:url(images/arrow-horizontal-mission.png) repeat-x;}
.blog #right-vertical-arrow{background:url(images/arrow-vertical-mission.png) repeat-y top right;}
.blog .title{font-size:2.5em;color:#6A6B69;font-weight: bold;margin:5px 0 10px 0px;}	
.blog .title a{color:#CC6735;}	
.blog  a{color:#CC6735;}	
.blog .date{font-size:1.3em;margin-bottom:10px;}	
.blog .author{font-size:1.3em;}	
.blog .cat{font-size:1.3em;}