body {
  font-family: arial, verdana, sans-serif;
  font-size: 11pt;
  color: white;
  background: #f7f7ff;
  height: 100%;
  background-image: url('../images/carbonswatch.jpg');
  background-repeat: repeat;
}


#container {
  width: 800px;
  margin: auto;
  height: 100%;
  border-top: thin solid #003366;
  border-left: thin solid #003366; /* #6766cc; */
  border-right: thin solid #003366; /* #6766cc; */
  border-bottom: thin solid #003366; /* #6766cc; */
  color: white;
  background-color: #ffffff;
  overflow: hidden;
  line-height: 1.2; /* anti-peekaboo */
}


.contentBackground {
 background-color: #ffffff;
}

.contentTitle {
  font: bold italic 32pt "Times New Roman", Times, serif;
  color: white;
  background-color: white;
  text-align: right;
  padding-right: 15px;
  padding-bottom: 5px;

  width: 100%;
  height: 100px;
  background-repeat: no-repeat;
  background-image: url('../../../public/images/RegattaTech-Logo-800x100.gif');
}

.contentSubtitle {
  font: bold 20pt arial, verdana, sans-serif; 
  text-align: left;
  color: #fff;
  background-color: #003366;
  padding-right: 15px;
  padding-left: 5px;
  margin-bottom: 0px;
  margin-top: 0px;
  clear: left;
}

.contentTagline {
  font: bold italic 16px arial, verdana, sans-serif; 
  color: #fff;
  text-align: right;
  background-color: #cc0000;
  padding-right: 15px;
  padding-top: 2px;
  padding-bottom: 2px;
  margin-bottom: 0px;
  margin-top: 0px;
}

.pageContents {
  padding-bottom: 10px;
  text-align: left;
  background-color: #ffffff;
}


.contentBody {
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  height: 100%;
  color: #003366;
  background-color: #fff;
}

.contentFeatureTitle {
 font-size: 14pt;
 font-weight: bold;
 padding-left: 10px;
 padding-top: 15px;
}

.content {
  font-size: 15px;
  text-align: justify;
  padding-left: 10px;
  padding-right: 10px;
}

.contentFootnote {
  font-size: 8pt; 
  text-align: center;
  padding: 5px;
}

.contentInset {
  color: #00266F;
  background-color: #ffffff;
  font-size: 10pt; 
  text-align: left;
  padding: 5px;
  margin-bottom: 5px;
}

.contentFooter {
  clear: left;
  font-size: 10pt;
  font-style: italic;
  color: white; 
  background-color: #003366; 
  text-align: right;
  padding-top: 5px;
  padding-right: 15px;
  padding-bottom: 5px;  
}

.contentFooter img {vertical-align:middle}

.contentFooter A:link, .contentFooter A:visited, .contentFooter A:hover{
  color: white;
  text-decoration: none;
  padding-top: 5px;
}

.contentFooter A:active {
  color: #cc0000; 
  text-decoration: none;
}

#footer {
  background: #ccc;
  color: gray;
  clear: both;
  text-align: right;
  font-style: italic;
  font-size: 11px;
  padding-right: 5px;
  padding-top: 5px;
}

.footerTagline {
  color: #003366;
  font-size: 10px;
  font-style: normal;
  text-align: right;
}

#footer a {
  text-decoration: none;
}

a img {
  border: none;
}

#poweredBy {
  font-size: 8pt;
  background: #ccc;
  color: gray;
  clear: both;
  text-align: right;
  padding-right: 5px;
}





.fieldLabel {
  text-align: right;
}

.errorColor {
  color: red;
/*  background-color: #0099ff; */
}

.submitButton {
  text-align: center;
}

#collageImage {
  float: left;
  clear: left;
  margin-right: 10px;
  margin-bottom: 10px;
}

.validation {
  float: right;
}

li {
  padding: 4px;
  text-align: left;
}


A:link, A:visited {
	COLOR: #003366; TEXT-DECORATION: none
}
A:hover {
	COLOR: #000000; TEXT-DECORATION: none
; }
A:active {
	COLOR: #cc0000; TEXT-DECORATION: none
}








#menuBar {  /* div around menu list*/
  width: 100%;
  margin: 0px;
  padding: 0px;
  height: 1.6em;
  background-color: #c80000;
  }

.mainMenu, .subMenu {   /* menu and submenu outer list */
  border: 0px;
  margin: 0px;
  padding: 0px;
  list-style-type: none;
  text-align: center;
  clear: left;
  }

.mainMenuItem {  /* menu main list item float/block horizontally */
  display: block;
  float: left;
  text-align: center;
  padding: 0px;
  margin: 0px;
  }

.mainMenuItem a, subMenuItem a {  /* main menu link (normal state) */
  background:  #c80000; 
  width: 106px;  
  height: 1.5em;
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  padding: 0px;
  margin: 0px;
  color: white;
  text-decoration: none;
  display: block;
  text-align: center;
  font-weight: normal;
  letter-spacing: 0px;
  line-height: 1.5em;
  }

.mainMenuItem a:hover {   /* main menu item hover state */
	color: white;
	background: #cf4040;
	}

.subMenu {
  display: none;
  position: absolute;
}

.subMenuItem a {
 padding-left: 10px;
 padding-right: 10px;
 text-align: left;
 white-space: nowrap;
}

a.ovalbutton{
background: transparent url('../../../public/images/btn-left.gif') no-repeat top left;
display: inline-block;
/* float: left; */
font-size: 13px; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
margin-left: 5px;
margin-bottom: 5px;
}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{
color: #494949; /*button text color*/
}

a.ovalbutton span{
background: transparent url('../../../public/images/btn-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

a.ovalbutton:hover{ /* Hover state CSS */

}

a.ovalbutton:hover span{ /* Hover state CSS */
 color:black;
}


.buttonwrapper{   /* container you can use to surround a CSS button to clear float */
clear: both;
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}


a.ovalbutton:active {
background-position: bottom left;
outline: none;
}

a.ovalbutton:active span {
background-position: bottom right;
color: black;
outline: none;
}