/*
 *
 *   doc name  xx  Website Styles
 *   desc      xx  Styles Specific to Website
 *   author    xx  Danielle Tilley
 *   version   xx  1.1  xx  March 26, 2010
 *
 * 
**/


/*ooooooooooooooooooooooooooooooooooooo*/
/*xxxxxx    Table of Contents    xxxxxx*/
/*ooooooooooooooooooooooooooooooooooooo*/
/*
	Website Styles
	[WS1] HTML Body
	[WS2] Font Classes
	[WS3] Content Styling
	[WS4] Link Styles
	[WS5] Headings
	
	Layout and Page Styles
		[P1] Layout
		[P2] Page 1
		[P3] Page 2
		[P4] Page 3
		[P5] Page 4
		
*/
/*ooooooooooooooooooooooooooooooooooooo*/
/*ooooooooooooooooooooooooooooooooooooo*/


/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
/*oooooooooooooooooooooooooooooxxxxxx   [WS1] HTML Body    xxxxxxoooooooooooooooooooooooooooo*/
/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/

 
html {
	height:100%;
	color:#000;
	font-size:100.01%;
	padding: 0;
	margin: 0;
	}
 
body{
	height:100%;
	color:#000;
	font-size:100.01%;
	padding: 0;
	margin: 0;
	background: #629080 url(http://www.protranswrbbridge.com/themes/protrans/images/background-gradient.png) repeat-x;
	font:13px/1.231 arial,verdana,helvetica,clean,sans-serif;
	height: 100%;
	}
	
/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
/*ooooooooooooooooooooooooooooxxxxxx   [WS2] Font Classes    xxxxxxoooooooooooooooooooooooooooo*/
/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/

/*xxxxxx    Font Sizes    xxxxxx*/

.size10 {font-size:77%;} /* for setting 10px */
.size11 {font-size:85%;} /* for setting 11px */
.size12 {font-size:93%;} /* for setting 12px */
.size13 {font-size:100%;} /* for setting 13px */
.size14 {font-size:108%;} /* for setting 14px */
.size15 {font-size:116%;} /* for setting 15px */
.size16 {font-size:123.1%;} /* for setting 16px */
.size17 {font-size:131%;} /* for setting 17px */
.size18 {font-size:138.5%;} /* for setting 18px */
.size19 {font-size:146.5%;} /* for setting 19px */
.size20 {font-size:153.9%;} /* for setting 20px */
.size21 {font-size:161.6%;} /* for setting 21px */
.size22 {font-size:167%;} /* for setting 22px */
.size23 {font-size:174%;} /* for setting 23px */
.size24 {font-size:182%;} /* for setting 24px */
.size25 {font-size:189%;} /* for setting 25px */
.size26 {font-size:197%;} /* for setting 26px */

/*xxxxxx    Font Families    xxxxxx*/

/*xxxxxx    Font Colors    xxxxxx*/



/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
/*oooooooooooooooooooooooooooxxxxxx   [WS3] Content Styling    xxxxxxooooooooooooooooooooooooo*/
/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/

p{
	font-size:1em;
	line-height:1.8em;
	}

/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
/*oooooooooooooooooooooooooooxxxxxx   [WS4] Link Styles    xxxxxxooooooooooooooooooooooooo*/
/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/

/*
a{

	}

a:link{
	
	}

a:hover{
	
	}

a:visited{
	
	}
*/
	
/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
/*ooooooooooooooooooooooooooooooxxxxxx   [WS5] Headings    xxxxxxooooooooooooooooooooooooooooo*/
/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
 

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


h1 {
  font-size: 1.35em;
  color: #005588;
  margin-bottom: 1em;
  font-weight: bold;
  text-transform: uppercase;
	}

h2 {
  font-size: 1.35em;
  color: #005588;
  margin-bottom: 1em;
  font-weight: normal;
	}
/* 
h3 {
	
	}
 
h4 {
	
	}
	
h5 {
	
	}
	
h6 {
	
	}
*/

/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/
/*oooooooooooooooooooooooooooooooxxxxxx   [P1] Layout    xxxxxxoooooooooooooooooooooooooooooo*/
/*oooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo*/

.page{ /* Redefine for each site */
  background-color: #FFFFFF;
	width:760px;
	margin:0 auto;
	padding: 0 20px 30px 20px;
}

.content-wrapper {
  width: 760px;
  padding-top: 20px;
}
  
/*oooooooooooooooooooooooooooooooxxxxxx   Header    xxxxxxoooooooooooooooooooooooooooooo*/
.header_wrap {
  position: relative;
  width: 760px;
  margin: 0;
  padding: 15px 0 0 0;
  border-bottom: 5px solid #619080;
}
.header_wrap ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.header_logo {
  background: url(http://www.protranswrbbridge.com/themes/protrans/images/protrans-logo.png) no-repeat top left;
  height: 90px;
  width: 184px;
} 
.header_logo a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0 0 10px 0;
}

.header_sm {
  position: absolute;
  top: 80px;
  right: 0;
  float: right;
  width: 500px;
  height: 20px;
}
.header_sm li {
  margin: 0;
  color: #005588;
  text-transform: uppercase;
  font-size: .93em;
  float: right;
}
.header_sm li a {
  color: #005588;
  display: block;
  padding: 0 0 0 15px;
  text-decoration: none;
}
.header_sm li a:hover {
  text-decoration: underline;
}

.header_nav {
  background-color: #005588;
  color: #FFFFFF;
  height: 30px;
  font-weight: bold;
  text-align: right;
}
.header_nav ul {
  float: right;
  width: auto;
}
.header_nav ul li {
  margin: 0;
  position: relative;
  list-style: none;
  float: left;
  height: 30px;
  line-height: 30px;
  vertical-align: center;
  white-space: nowrap;
  background: url(http://www.protranswrbbridge.com/themes/protrans/images/nav-divider.png) no-repeat center left;
}
.header_nav ul > li:first-child {
  background: none;
}
.header_nav ul li:hover, .header_nav ul li:hover a:hover {
  background-color: #7eb9e0;
  color: #002942;
}
.header_nav ul li a {
  color: #FFFFFF;
  text-decoration: none;
  display: block;
  height: 30px;
  line-height: 30px;
  vertical-align: center;
  padding: 0 20px;
}
.header_nav ul li ul {
  position: absolute;
  top: 30px;
  left: 0;
  z-index: 75;
  display: none;
  width: auto;
  background: #FFFFFF;
  color: #005588;
  border: 1px solid #005588;
}
.header_nav ul li:hover ul {
  display: block;
}  
.header_nav ul li ul li {
  min-width: 17em;
  background: #FFFFFF;
  color: #005588;
  display: block;
  float: none;
}
.header_nav ul li ul li:hover, .header_nav ul li ul li:hover a, .header_nav ul li ul li:hover a:hover {
  background: #005588;
  color: #FFFFFF;
}
.header_nav ul li ul li a {
  background: #FFFFFF;
  color: #005588;
  padding: 0 35px;
}

.header_image img, .header_image {
  width: 760px;
  height: 130px;
}

/*oooooooooooooooooooooooooooooooxxxxxx   SideBar    xxxxxxoooooooooooooooooooooooooooooo*/
.left-content {
  width: 205px;
}
.left-content p {
  font-size: .85em;
  line-height: 1.10em;
}
.side-nav {
  background: #005588;
  color: #FFFFFF;
  padding: 15px;
  width: 175px;
  text-transform: uppercase;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 20px;
}
.side-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-nav div {
  font-size: 1em;
  padding: 5px 0 5px 5px;
}
.side-nav div:hover, .side-nav div:hover a:hover {
  color: #005588;
  background: #7eb9e0;
}
.side-nav ul li {
  margin: 0;
  font-size: .85em;
  border-top: 1px dotted #7eb9e0;
  list-style: none;
  padding: 5px 15px;
}
.side-nav ul li:hover, .side-nav ul li:hover a:hover {
  border-top: 1px solid #7eb9e0;
  color: #005588;
  background: #7eb9e0;
}
.side-nav a {
  width: 100%;
  text-decoration: none;
  color: #FFFFFF;
}
.bridgecam, .ccm-page-list {
  width: 201px;
  border: 2px solid #bed8e9;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.bridgecam .bridgecam-content, .ccm-page-list .ccm-page-list-description {
  padding: 10px 10px 0 10px;
}
.bridgecam .bridgecam-img {
  width: 55px;
  height: 65px;
  padding-right: 10px;
  float: left;
}
.bridgecam a, .ccm-page-list a {
  color: #005588;  
  text-decoration: none;
}
.bridgecam h4, .ccm-page-list h4 {
  height: 30px;
  line-height: 30px;
  vertical-align: middle;
  background: #bed8e9;
  padding: 0 10px;
  width: 183px;
  font-size: 1.08em;
  font-weight: bold;
  color: #005588;  
  text-transform: uppercase;
}
.callout {
  width: 181px;
  padding: 10px;
  border: 2px solid #bed8e9;
  margin-bottom: 20px;
}
.callout h4 {
  font-size: 1.16em;
  font-weight: bold;
  padding-bottom: 10px;
  text-transform: uppercase;
}
.ccm-page-list h3 {
  font-size: .93em;
  font-weight: bold;
  padding-bottom: 10px;
  padding: 10px 0 0 0;
  margin: 0 10px;
  text-transform: uppercase;
}
.ccm-page-list-divider {
  border-top: 1px dotted #bed8e9;
}
.callout .callout-img {
  width: 171px;
  height: 165px;
  padding-bottom: 10px;
  margin: 0 auto;
}
.callout a {
  color: #005588;  
  text-decoration: none;
}
.callout .call-to-action, .bridgecam .call-to-action, .ccm-page-list .call-to-action {
  display: block;
  text-align: right; 
  margin-top: .35em; 
  padding-right: 20px; 
  background: url(http://www.protranswrbbridge.com/themes/protrans/images/blue-arrow.png) no-repeat center right; 
  color: #005588; 
  font-weight: bold; 
  text-transform: uppercase;
}
.callout .call-to-action {
  margin-top: 1em; 
}
.callout .call-to-action:hover {
  text-decoration: underline;
}
 
/*oooooooooooooooooooooooooooooooxxxxxx   Main Content    xxxxxxoooooooooooooooooooooooooooooo*/
.center-wrapper {
  float: right;
  width: 530px;
}
.center-content {
  padding: 0;
}
.clearing {
  clear: both;
}

/*oooooooooooooooooooooooooooooooxxxxxx   Footer    xxxxxxoooooooooooooooooooooooooooooo*/
.footer {
	width:800px;
	margin:0 auto;
	padding: 20px 0 0 0;
}
.footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer ul.nav {
  width: 540px;
}
.footer ul li {
  margin: 0;
  margin-right: 15px;
  float: left;
  color: #ffffff;
  text-transform: uppercase;
}
.footer ul li a {
  color: #ffffff;
  text-decoration: none;
}
.footer ul li a:hover {
  text-decoration: underline;
}

.right {
  width: 250px;
  float: right;
}
.right ul li {
  float: right;
  margin-right: 0;
  margin-left: 15px;
}