/*** Style Sheet for the NOAA Coral Reef Watch website ***/


/*********************************************/
/*** General formatting for the whole page ***/
/*********************************************/

body{
  /*background-color: #D0DBFF;*/
  background-color: #EFEFEF;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0px;
}


/***********************/
/*** The Page Header ***/
/***********************/

#header{
  background-color: #ffffff;
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  position: relative;
  height: 105px;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  text-align: left;
  border-top: solid #aaaaaa 1px;
  border-left: solid #aaaaaa 1px;
  border-right: solid #aaaaaa 1px;
}

/*** the bread-crumb sections ***/
  #header-links-NOAA{
    padding-left: 5px;
  }
  #header-links-CRTF{
    padding-left: 5px;
    position: absolute;
    right: 20px;
    top: 50px;
  }

/*** the header images ***/
  img.header-left{
    padding-left: 13px;
    border-style: none;
    height: 50px;
  }
  img.header-right{
    position: absolute;
    right: 15px;
    top: 5px;
    border-style: none;
  }
  img.header-bottom{
    height: 30px;
    width: 100%;
    position: absolute;
    bottom: 0px;
  }

/*** the link styles ***/
  #header a:link{
    font-size: 0.8em;
    text-decoration: none;
  }
  #header a:visited{
    font-size: 0.8em;
    text-decoration: none;
  }
  #header a:hover{
  }
  #header a:active{
  }

/**********************************************/
/*** The Content Box (navbar, body, footer) ***/
/**********************************************/

#content{
  background-color: #ffffff;
  width: 960px;
  margin-left: auto;
  margin-right: auto;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  position: relative;
  text-align: left;
  border-left: solid #aaaaaa 1px;
  border-right: solid #aaaaaa 1px;  
  border-bottom: solid #aaaaaa 1px;
}


/**************************/
/*** The Navigation Bar ***/
/**************************/

#navbar{
  width: 180px;
  background-color: #66729A;
  position: absolute;
  left: 0px;
  top: 0px;
  padding-bottom: 10px;
  border-bottom: solid #000000 1px;
}

/*** the image at the top ***/
  img.navbar-icon{
    margin-left: 20px;
    margin-top: 5px;
    margin-bottom: 5px;
    
  }

/*** the icons for each product ***/
  img.navbar-icon-product{
    margin-left: 5px;
    margin-top: 10px;
    /*margin-bottom: 5px;*/
    width: 130px;
    height: 48px;    
  }

/*** the lists of links ***/
  div.navbar-section{
    padding-top: 5px;
    padding-bottom: 4px;
    padding-left: 5px;
    border-top: solid #000000 1px;
  }
  div.navbar-section-level2{
    padding-top: 0px;
    padding-bottom: 4px;
    padding-left: 5px;
    border-top: solid #454545 1px;
  }
  a:link.link-level-one{
    font-size: 0.7em;
    color: #cccccc;
    padding-left: 5px;
    vertical-align: top;
    line-height: 130%;
  }
  a:visited.link-level-one{
    font-size: 0.7em;
    color: #cccccc;
    padding-left: 5px;
    vertical-align: top;
    line-height: 130%;
  }
  a:link.link-level-two{
    font-size: 0.7em;
    color: #cccccc;
    padding-left: 30px;
    vertical-align: top;
    line-height:130%;
  }
  a:visited.link-level-two{
    font-size: 0.7em;
    color: #cccccc;
    padding-left: 30px;
    vertical-align: top;
    line-height:130%;
  }
/*** the text styles for navbar headings ***/
  #navbar h1{
    font-size: 0.8em;
    color: #ffffff;
    line-height: 1.6em;
    font-weight: bold;
    display: inline;
    padding-bottom: 5px;
  }
  #navbar h1 a:link{
    color: #ffffff;
    line-height: 1.6em;
    font-weight: bold;
    display: inline;
    padding-bottom: 5px;
  }
  #navbar h1 a:visited{
    color: #ffffff;
    line-height: 1.6em;
    font-weight: bold;
    display: inline;
    padding-bottom: 5px;
  }
  #navbar h2{
    font-size: 0.7em;
    color: #ffffff;
    line-height: 1.2em;
    padding-left: 5px;
    font-weight: normal;
    display: inline;
  }
  #navbar h2 a:link{
    color: #ffffff;
    line-height: 1.2em;
    padding-left: 5px;
    font-weight: normal;
    display: inline;
  }
  #navbar h2 a:visited{
    color: #ffffff;
    line-height: 1.2em;
    padding-left: 5px;
    font-weight: normal;
    display: inline;
  }


/************************/
/*** The Main Content ***/
/************************/

#main-content{
  position: relative;
  margin-left: 180px;
  width: 770px;
  font-size: 0.8em;
  line-height: 1.3em;
  padding: 5px;
  min-height: 760px;
  /***begin IE hack***/
  _height:820px;
  /***end IE hack***/
}

#main-content-research{
  position: relative;
  margin-left: 180px;
  width: 770px;
  font-size: 0.8em;
  line-height: 1.3em;
  padding: 5px;
  min-height: 600px;
  /***begin IE hack***/
  _height:700px;
  /***end IE hack***/
}

#main-content-no-navbar{
  position: relative;
  /*margin-left: 180px;*/
  width: 950px;
  font-size: 0.8em;
  line-height: 1.3em;
  padding: 5px;
  min-height: 675px;
  /***begin IE hack***/
  _height:750px;
  /***end IE hack***/
}

p.centered-paragraph{
  text-align: center;
}

p.justified-paragraph{
  text-align: justify;
}

div.centered-section{
  text-align: center;
}

div.title-section{
  padding: 10px;
  /*border-top: solid #66729A 1px;*/
  border-bottom: solid #66729A 1px;
  text-align: center;
  font-size: 1.2em;
  font-weight: bold;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  line-height: 1.1em;
}

div.title-section-level2{
  padding-top: 5px;
  text-align: center;
  font-size: 0.9em;
  font-weight: bold;
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

div.title-section-left-justify{
  padding-top: 5px;
  text-align: left;
  font-size: 0.9em;
  font-weight: bold;
  font-family: Verdana, Helvetica, Arial, sans-serif;
}

div.sidebar-right{
  width: 180px;
/*  background-color: #A5ADC9; */
  background-color: #FF8429;
  padding: 5px;
  border: solid #000000 1px;
  float: right;
  margin: 5px 0px 5px 10px;
  font-size: 0.8em;
}

img.imbedded-left{
  float: left;
  margin: 5px 10px 5px 0px;
}

img.imbedded-right{
  float: right;
  margin: 5px 0px 5px 10px;
}

img.imbedded-center{
  align: center;
  margin: 5px 10px 5px 0px;
}

div.figure_with_caption_right {
  float: right;
  margin: 0.5em;
  padding: 0.5em;
}

div.figure_with_caption_right p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

div.indented_text_rightside50 {
  padding-right: 50px;
}

div.caption_100 {
  padding-left: 100px;
  padding-right:100px;
}

/*****************************/
/*** Tutorial-style Pages  ***/
/*****************************/

.indenttext {
  margin-right: 15px;
  margin-left: 15px; 
  font-size: 10pt;
  font-family: Verdana, Arial, Helvetica;
}

.indenttext1 {
  margin-right: 30px;
  margin-left: 30px;
  font-size: 10pt;
  font-family: Verdana, Arial, Helvetica;
}

.charnav_current {
  color: #242021;
  font-weight: bold;
  font-size: 9pt;
  font-family: Verdana, Arial, Helvetica;
}

.img_caption {
  font-size: 8pt;
  font-family: Verdana, Arial, Helvetica;
  color: 666666;
}

.welcome {font-weight: bold;}

.rightcollink  { color: navy; font-size: 10pt; font-family: Verdana, Arial, Helvetica }

.rightcollink a:link {text-decoration:underline; color:navy}

.rightcollink a:visited {text-decoration:underline; color:navy}

.text10p  { font-size: 10pt; font-family: Verdana, Arial, Helvetica }

h1.indenttext1  {
  color: 663399;
  font-weight: bold;
  font-size: 13pt;
  font-family: Verdana, Arial, Helvetica;
}

h2.indenttext1  {
  color: #036;
  font-weight: bold;
  font-size: 11pt;
  font-family: Verdana, Arial, Helvetica;
}

h3.indenttext1 {
  font-weight: bold;
  font-size: 10pt;
  font-family: Verdana, Arial, Helvetica;
}

a.charrnav:link {
  color: #242021;
  font-size: 9pt;
  font-family: Verdana, Arial, Helvetica;
  text-decoration: underline;
}

a.charrnav:visited {
  color: #242021;
  font-size: 9pt;
  font-family: Verdana, Arial, Helvetica;
  text-decoration: underline;
}

a.charrnav:hover {
  color: #242021;
  font-size: 9pt;
  font-family: Verdana, Arial, Helvetica;
  text-decoration: underline;
}

/*****************************/
/***Defaults For All Tables***/
/*****************************/

table{
  margin-left: auto;
  margin-right: auto;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 1.0em;
}
table.no-spacing{
  margin-left: auto;
  margin-right: auto;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 1.0em;
}

td.cell-border{
  border: solid 1px #000000;
}

td.cell-border-no-left{
  border-top: solid 1px #000000;
  border-bottom: solid 1px #000000;
  border-right: solid 1px #000000;
}

td.cell-border-no-right{
  border-top: solid 1px #000000;
  border-bottom: solid 1px #000000;
  border-left: solid 1px #000000;
}

td.indent_left{
	padding-left: 25px;
}

/***********************************/
/***Tables of Archived Data Links***/
/***********************************/

table.archive{
  text-align: center;
  font-size: 0.7em;
  border: solid #808080;
}

table.archive td{
  border: solid thin #808080;
}

table.left-justified{
  margin-left: 0px;
  margin-right: 0px;
}

/*******************************************/
/***Table to contain an image and caption***/
/*******************************************/

table.image{
  margin-left: 0px;
  margin-right: 5px;
  margin-bottom: 8px;
  float: left;
}


/******************/
/*** The Footer ***/
/******************/

#footer{
  margin-left: auto;
  margin-right: auto;
  width: 950px;
  height: 60px;
  border-top: solid #666666 1px;
  text-align: center;
  font-size: 0.8em;
  padding: 5px;
}

img.footer-left{
  float: left;
  margin-left: 50px;
}

img.footer-right{
  float: right;
  margin-right: 50px;
}

#footer p {
  margin-top: 2px;
  margin-bottom: 5px;
}