/*
Theme Name: Cambridge Water Department
Description: global.css contains a reset, font normalization and some base styles.
Designer: ISITE Design, Inc
Designer URL: http://www.isitedesign.com
Author: City of Cambridge
--------------------------------------------------------------------------------------

/************************************************* */
/* BASIC ELEMENT STYLES
************************************************** */


/* ROOT
-------------------------------------------------- */

body {
	color:#404040;
	background-color:#fff;
}

#wrapper {
	width:1020px;
	background: url(../img/middle-bg.png) repeat-y 50% 0 transparent;
}

#top-bg {
	background: url(../img/top-bg.jpg) center bottom no-repeat;
	height:397px;
	width:100%;
	position:absolute;
	top:200px;
	left:0px;
	z-index:-1;
}

#bottom-bg {
	background: url(../img/bottom-bg.jpg) center bottom no-repeat;
	height:645px;
	width:100%;
	position:absolute;
	bottom:0px;
	left:0px;
	z-index:-1;	
}


/* HEADINGS
-------------------------------------------------- */

h1	{
	font-size: 1.8em;
	color:#343434;
}
h2	{ color: #616161; }
h3	{ color: #0B3A5B; }
h4	{ color: #0B9444; }
h5	{ text-transform: uppercase; }
h6	{ 
	text-transform:uppercase;
	font-weight:bold;
}

/* LINKS
-------------------------------------------------- */

a { color: #1673ab; text-decoration: underline;}
a:visited { color: #105a87; }
a:hover { color: #309cec; }

/* links with arrow */
.get-more { background-image: url(../img/link-arrow-blue.png); }
.get-more:hover { background-image: url(../img/link-arrow-blue-hover.png); }

/* IMAGES
-------------------------------------------------- */
img { padding: 5px; }


/* TABLES
-------------------------------------------------- */

table { border: 1px solid #1673AB; }

th { 
	background: #1673AB;
	border:none;
	font-weight: bold;
}

th, th a, th a:hover { color:#fff;}

tr.even { background: #f2f5f7; }

td { border-bottom: dotted 1px #139436; }


/* FORM ELEMENTS
-------------------------------------------------- */

button {
   	background: #139436; 
	background: linear-gradient(bottom, #22a345 26%, #139436 62%);   	
	background: -moz-linear-gradient(bottom, #22a345 26%, #139436 62%);
   	background: -o-linear-gradient(bottom, #22a345 26%, #139436 62%);
   	background: -webkit-linear-gradient(bottom, #22a345 26%, #139436 62%);
   	background: -ms-linear-gradient(bottom, #22a345 26%, #139436 62%);
   	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.26, #22a345), color-stop(0.62, #139436));
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#22a345', endColorstr='#139436',GradientType=0 );
	vertical-align:middle;
	padding:0.2em 1em;
	margin-top:1.5em;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
		border-radius: 3px;
}

/*buttons from old shared presentation pages*/
#primary button.search {
	background: url(../img/search-form-btn.png) no-repeat 0 0;
	filter:none;
    height: 32px;
	width:100px;
	padding:0;
	margin: .5em 1em .5em 0em;
	text-indent:-999em;
}


/************************************************* */
/* PAGE SECTIONS
************************************************** */


/* HEADER
-------------------------------------------------- */

#header {
	height: 100px;
	margin-top:10px;
	background-color: #fff;
}

[role="banner"] { padding: 0px 0px 0px 25px; }

a.brand {  
	width: 480px;
	line-height: 130px;
	font-size: 28px;
	background-image: url(../img/logo-cdw.png); 
	color:#404040;
	text-align:right;
	vertical-align:bottom;
	text-decoration: none;
}


/* NAVIGATION
-------------------------------------------------- */

/* MAIN NAV */

nav[role=navigation] {
	top: 0px;
	left: 15px;
	padding-bottom: 9px;
	background: url(../img/nav-bg.png) 50% 100% no-repeat;
}

nav[role=navigation] ul {
	width:960px;	
    background-color: #1469a6;
    background: linear-gradient(bottom, rgb(27,138,189) 26%, rgb(20,105,166) 62%);
   	background: -o-linear-gradient(bottom, rgb(27,138,189) 26%, rgb(20,105,166) 62%);
   	background: -moz-linear-gradient(bottom, rgb(27,138,189) 26%, rgb(20,105,166) 62%);
   	background: -webkit-linear-gradient(bottom, rgb(27,138,189) 26%, rgb(20,105,166) 62%);
   	background: -ms-linear-gradient(bottom, rgb(27,138,189) 26%, rgb(20,105,166) 62%);
   	background: -webkit-gradient(linear, left bottom, left top, color-stop(0.26, rgb(27,138,189)), color-stop(0.62, rgb(20,105,166)));
    filter:     progid:DXImageTransform.Microsoft.gradient( startColorstr='#1469a6', endColorstr='#1b8abd',GradientType=0 );
    border: 1px solid #286496;
    -webkit-border-radius: 3px;
   	   -moz-border-radius: 3px;
            border-radius: 3px;
   	-webkit-box-shadow: inset 0px 1px 0px 0px #4e8dbe;
   	   -moz-box-shadow: inset 0px 1px 0px 0px #4e8dbe;
   	        box-shadow: inset 0px 1px 0px 0px #4e8dbe;
}

nav[role=navigation] li { padding:0; }

nav[role=navigation] a {
	padding: 10px 20px;
	max-width: none;
	font-weight:normal;
	text-transform:uppercase;
	text-decoration: none;
}

nav[role=navigation] a:hover {
	text-decoration: none;
    background-color: #419CD8;
	background: linear-gradient(bottom, rgb(65,156,216) 43%, rgb(48,122,201) 85%);
	background: -o-linear-gradient(bottom, rgb(65,156,216) 43%, rgb(48,122,201) 85%);
	background: -moz-linear-gradient(bottom, rgb(65,156,216) 43%, rgb(48,122,201) 85%);
	background: -webkit-linear-gradient(bottom, rgb(65,156,216) 43%, rgb(48,122,201) 85%);
	background: -ms-linear-gradient(bottom, rgb(65,156,216) 43%, rgb(48,122,201) 85%);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0.43, rgb(65,156,216)),color-stop(0.85, rgb(48,122,201)));
    filter:     progid:DXImageTransform.Microsoft.gradient( startColorstr='#419CD8', endColorstr='#307AC9',GradientType=0 );
}

nav[role=navigation] a.active {
	text-decoration: none;
    background-color: #1E668C;
	background: linear-gradient(bottom, rgb(30,102,140) 43%, rgb(22,78,126) 85%);
	background: -o-linear-gradient(bottom, rgb(30,102,140) 43%, rgb(22,78,126) 85%);
	background: -moz-linear-gradient(bottom, rgb(30,102,140) 43%, rgb(22,78,126) 85%);
	background: -webkit-linear-gradient(bottom, rgb(30,102,140) 43%, rgb(22,78,126) 85%);
	background: -ms-linear-gradient(bottom, rgb(30,102,140) 43%, rgb(22,78,126) 85%);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0.43, rgb(30,102,140)),color-stop(0.85, rgb(22,78,126)));
    filter:     progid:DXImageTransform.Microsoft.gradient( startColorstr='#1E668C', endColorstr='#164E7E',GradientType=0 );
}


/* TOP UTILITY NAV */

.global-nav {
	float: right;
	padding: 0;
	text-align: right;
}

.global-nav li {
	display: inline;
	float: left;
	list-style: none;
	margin: 0;
}

.global-nav a {
	border-bottom: solid 2px #b8d7e3;
	color: #1673ab;
	display: block;
	margin: 0;
	padding: 12px 12px 5px 12px;
	text-decoration: none;
	font-size: 1em;
}
.global-nav a:visited {  color:#1673ab; }
.global-nav a:hover, .global-nav .active a, .global-nav a.active {
	text-decoration:none;
	background-color: #e5f1f7; 
	background-image: linear-gradient(bottom, rgb(229,241,247) 33%, rgb(215,229,234) 100%);
	background-image: -o-linear-gradient(bottom, rgb(229,241,247) 33%, rgb(215,229,234) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(229,241,247) 33%, rgb(215,229,234) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(229,241,247) 33%, rgb(215,229,234) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(229,241,247) 33%, rgb(215,229,234) 100%);
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.33, rgb(229,241,247)),color-stop(1, rgb(215,229,234)));	
    filter:     progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5f1f7', endColorstr='#d7e5ea',GradientType=0 );
	border-bottom-color: #25aae1;
	color: #0f547d;
}


/* LEFT NAV */

.subnav {
	background-color:#F3FAFC;
	padding:.5em;
}

.subnav h2 {
	font-size:1.3em;
	padding:0.5em 0em;
	border-bottom:1px solid #286496;
}
.subnav h2 a { color: #464646;}
.subnav h2 a:hover {
	color: #464646;	
	background-color:transparent;
}
.subnav ul li { border-bottom: 1px dotted #286496; }

.subnav a {
	text-decoration: none;
	color:#1975ac;
}

.subnav a:hover {
	color: #329dec;
	background-color: #D8E7EC;
}

.subnav .active > a {
	color:#329dec;
	background-color: #D8E7EC;
}
.subnav li.active-ancestor, .subnav li.active { background-color: #e8f1f4; }

/* FAT FOOTER NAV */

.meta { margin: 0px 0px 0px 15px; }


/* SITE UTILITY
-------------------------------------------------- */

.site-utility { 
	position: absolute;
	right: 30px;
	top: -110px; 
	width: 800px;
}


/* TEXT SIZE */

ul.text-size { margin: 10px 30px 0px 0px; clear:none; }
.text-size .heading { color: #404040; }
.text-size a, .text-size a:visited { color: #1673ab; }
.text-size a:hover { background-color: #e5f1f7; }
.text-size .active { background-color: #e5f1f7; }

/* SEARCH FORM */

#search { top: 58px; }

#search button {
	background-image: url(../img/search-btn.png);
	filter:none;
}

#search-text {	
	border: 1px solid #b2b2b2;
	border-bottom: 1px solid #E0E0E0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: inset 0px 1px 3px 0 #e8e8e8;
	-moz-box-shadow: inset 0px 1px 3px 0 #e8e8e8;
	box-shadow: inset 0px 1px 3px 0 #e8e8e8;
}



/* CONTENT
-------------------------------------------------- */

#content {
	margin-left:15px;
	padding: 90px 15px 40px 15px;
	background-color:#fff;
}

/* MESSAGE BOX (ALERT)*/

.message-box {
	border: 2px solid #dcdcb3;
	background: url(../img/icon-alert.png) 13px 50% no-repeat #ffffcc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.message-box .message a { background-image: url(../img/link-arrow-blue.png); }
.message-box .message a:hover { background-image: url(../img/link-arrow-blue-hover.png); }

/* CAROUSEL DEFAULTS AND HOMEPAGE CAROUSEL
-------------------------------------------------- */

#carousel #selectionmenu li {
	position:static;
	padding: 0;
	margin: 0 0 5px 0;
	max-width: none;
}

#carousel #selectionmenu a {
	border:none;
	padding:2px;
	display:block;
	background-color: transparent;
}

#carousel #selectionmenu img {
	padding:0px;
	display:block;
}

#carousel #selectionmenu a:hover img, #carousel #selectionmenu li.ui-tabs-selected img {
	text-decoration:none;
	border:2px solid #fff;
}

#carousel #selectionmenu a:hover, #carousel #selectionmenu li.ui-tabs-selected a {
	background-color:#fff;
	text-decoration:none;
	padding:0px;
}

/* home carousel */
.home #carousel {
	position: relative;
	margin-bottom: 20px;
	width: 720px;
	height: 300px;
}

.home #carousel img {
	z-index: 1;
	width: 720px;
	height: 300px;
	padding:0;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.home #carousel .carousel-content {
	position: absolute;
	top: 30px;
	left:15px;
	padding:40px;
	width: 240px;
	height: 240px;
	z-index: 10;
	overflow:hidden;
	background: url(../img/hero-bubble.png) no-repeat 50% 50%;
	text-align:center;
	color:#b1e9ff;
	font-size:1em;	
}

.home #carousel h1 {
	font-size: 28px; /*no need for this to get bigger*/
	line-height: 1em;
	color:#b1e9ff;
	font-weight:normal;
	margin:  0 0 .25em 0;
}

.home #carousel .carousel-content a { color: #fff; }

.home #carousel .controls {
	position: absolute;
	z-index: 20;
	bottom: 0;
	left:0px;
}

.home #carousel a.back {
	background:url(../img/back-arrow.png) no-repeat 0 0;
	position:absolute;
	width:30px;
	height:38px;
	text-indent:-999em;
	display:block;
	overflow:hidden;
	bottom: -10px;
	left:10px;	
}

.home #carousel a.forward {
	background:url(../img/forward-arrow.png) no-repeat 0 0;
	position:absolute;
	width:52px;
	height:67px;
	text-indent:-999em;
	display:block;
	overflow:hidden;
	bottom:-20px;
	left:35px;	
}

.home #carousel .controls a.back:hover, .home #carousel .controls a.forward:hover { background-position: 0 100%; }


/* PRIMARY
-------------------------------------------------- */

/* HOME PAGE */

#home-left {
	width:288px;
	float:left;
	margin-top:20px;
	padding: 0px 10px 10px 0px;
}

#home-right {
	width: 100%;
	float: right;
	padding: 10px 0;	
}

.home .narrow {
	padding: 10px;
	background-color:#1673ab;
	width:100%;
}

.home .wide {
	width:100%;
}

#homepage-content h2, .wide h2 { color:#343434; }

.home .primary li {
	list-style:none;
	margin-left:0em;
}

.primary{
    float:left;
    padding: 0;
    width: 720px;

}

/* Callout*/
.callout-container{
    margin-top: 35px;
}

/* home - news and event lists */
.home .event-list .time {
	float:right;	
	color:#818181;	
}

.home .narrow .date, .home .wide .date { color:#818181;	}

.home .narrow h2, .home .wide h2 {
	padding-bottom: .1em;
	border-bottom: 1px dotted #CACACA;
}

.home .narrow ul, .home .event-list {
	margin-bottom: .5em;
	border-bottom: 1px dotted #CACACA;
}

/* home - division features */

.home .features img {
	float:left;
	margin-right:10px;
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:    0px 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow:         0px 1px 3px rgba(0, 0, 0, 0.2);
}

.home .features h3 {
	border-bottom: 1px solid #CACACA;
	padding-bottom: .2em;
	margin-bottom: .3em;
}

.home p{margin-bottom: 0}

/* PRIMARY CONTENT ITEMS
-------------------------------------------------- */


/* LANDING CAROUSEL */

.landing #carousel {
	background-color:#1f5583;
	padding: 18px 10px 18px 15px;
    border:none;
	-webkit-border-radius: 3px;
   	   -moz-border-radius: 3px;
            border-radius: 3px;
}

.landing #carousel .ui-tabs-panel > img {
	float: right;
	border:none;
	max-width: 210px;
	max-height: 240px;
	background-color:#fff;
}

.landing #carousel.static .ui-tabs-panel > img { max-width:235px; }

.landing #carousel .ui-tabs-panel {
    float: left;
	margin-bottom: 10px;
	width:395px;
	max-height:none;
}

.landing #carousel.static .ui-tabs-panel { width:100%; }

.landing #carousel .carousel-content {
	float: left;
	width: 170px;
	max-height:240px;
	color:#fff;
}

.landing #carousel .carousel-content h2 { color:#fff; }
.landing #carousel .carousel-content a { color:#acd8f7; }

/*landing carousel - controls*/
.landing #carousel .controls {
	float:right;
	width:auto;
	position:static;
}

.landing #carousel #selectionmenu {	width:auto; }

.landing #carousel #selectionmenu li {
	float:none;
	margin: 0 0 5px 0;
	height:auto;
}

.landing #carousel #selectionmenu li:hover, #carousel #selectionmenu li.ui-tabs-selected {
	border:none;
	padding:0;
}

.landing #carousel .back, .landing #carousel .forward {
	display: block;
	position:static;
	width: 18px;
	height: 11px;
	margin: 0px 0px 15px 15px;
	background-image: url(../img/landing-carousel-arrows.png);
}
.landing #carousel .forward {
	position:static;
	background-position: -36px 0px;
	margin: 15px 0px 0px 15px;
}


/* FEATURED CONTENT (Landing Pages) */

.featured {	border-top: 1px solid #1f5583; }

.featured h2 {
	color:#1673AB;
	font-size:1.2em;	
	margin-top: .25em;
}

.featured .links-list li {
	margin-left:0px;
	list-style:none;	
}	

.featured img {
	/*must be a 4x6 image*/
	padding: 10px;
	border: 1px solid #8dc3f0;
	width:207px;
	max-width:none;
	height:138px; /*ensure titles start at same height between left and right*/
}

.featured a { background-image: url(../img/link-arrow-blue.png); }
.featured a:hover { background-image: url(../img/link-arrow-blue-hover.png); }


/*TABULAR DATA PAGES*/

table.tablesorter td { border-bottom: 1px solid #139436; }

/*DETAIL PAGE - PROJECTS*/

/* tabs */

.tabs .current, .tabs a:hover {
	background-color: #2189d3; 
	background: -moz-linear-gradient(top,  #2f7cc4 26%, #3e91d7 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(26%,#2f7cc4), color-stop(100%,#3e91d7));
	background: -webkit-linear-gradient(top, #2f7cc4 26%, #3e91d7 100%); 
	background: -o-linear-gradient(top, #2f7cc4 26%, #3e91d7 100%); 
	background: -ms-linear-gradient(top, #2f7cc4 26%, #3e91d7 100%);
	background: linear-gradient(top, #2f7cc4 26%, #3e91d7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f7cc4', endColorstr='#3e91d7',GradientType=0 );
 }

/* CALENDAR ONLY*/

/*page content*/
ul.tabs-calendar li a.current {
	background-color: #CEE5ED;
	color:#309cec;	
}

.calendar h1 { border-bottom: 1px solid #818181; }

/* mini calendar control */
.block-calendar #calendar-title {
	background: url(../img/info-form-bg.png) no-repeat top right;
	color:#fff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}

.block-calendar #calendar-title a { color:#CEE5ED; }
.block-calendar #calendar-title a:hover { text-decoration:underline; }

.block-calendar td {
	color:#666;
	background-color:#fff;
	border:none;
	border-bottom: 1px dotted #139436;
}

.block-calendar td.on { background-color: #CEE5ED; }
.block-calendar td.off-month { 	background-color:#eee; }

.info.form.calendar label {
	margin:.4em 0em;
	display:block;
}

/* FAQ ONLY */

.faq-list a.toggle { background-image: url("../img/buttons-plus-minus.png");}

/* PHOTO GALLERY */

.photo-navigation .prev, .photo-navigation .next { background-image:url(../img/icon-arrows-gallery.png); }

/* SITE MAP */

.sitemap a.off, .sitemap a.on { background-image: url("../img/buttons-plus-minus.png"); }


/* SECONDARY
-------------------------------------------------- */

/* INFO ASIDE */

.secondary .info {
	background: url(../img/info-form-bg.png) no-repeat 0 0;
	height: 300px;
	color:#fff;	
}

.secondary .info h2 {
	color: #fff;
	text-align:left;
	padding:10px;
	font-size:20px; /* no need to get bigger */
	text-transform:uppercase;
	margin:0px;
	text-shadow: 0px 1px 1px #113a61;
}

.secondary .info li {
	padding:10px;
	border-top: 1px solid #639DD3;
}

.secondary .info label {
	font-size: 18px; /*no need to get bigger*/
	color:#fff;
}

/* CALLOUT BOX */
.callout{
    clear: left;
    margin: 0;
}

.callout img {
	border:none;
	-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:    0px 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow:         0px 1px 3px rgba(0, 0, 0, 0.2);
    padding: 0;
    margin: 5px auto;
    max-width: 225px;
    display: inline;
}

/*.callout a { background-image: url("../img/link-arrow-blue.png");}
.callout a:hover { background-image: url("../img/link-arrow-blue-hover.png");}*/

/* CONTACT ASIDE */

.secondary .contact { margin-top: 20px; }
.secondary .contact h2 { color:#404040; }

.secondary .contact h2:first-child + ul {
	border-bottom:1px dotted #CACACA;
	padding-bottom:1em;
}

/* FOOTER
-------------------------------------------------- */

footer[role="contentinfo"] {  
	padding: 60px 15px 0px;
	background: url(../img/footer-bg.png) no-repeat 50% 0 #fff;
	width:960px;
	margin-left:15px;
}

/* INFO LINKS */

ul.info-links {
	padding: 30px 0px;
	margin:0px;
	clear:both;
	float:left;
}