/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    css master
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    HTML Tags
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
body {
    color: #2B15ED;
    font-family: Arial, Sans-Serif;
    font-size: 0.85em;
    line-height: 1.4em;
    padding-right: 10px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   Content Container - one column wide
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-container-one-column {
	background-color:#FFFFFF;
	padding:15px;
	width:728px;
	position:relative;
	margin-top:0;
	}
	
#footer-one-column {
    clear:both;
	background-color:#FFFFFF;
	padding:17px;
	width:872px;
	border-top:2px solid #0000FF;
	}	
	
#wrapperFoot {
     margin-left  :auto;
     margin-right :auto;
     width: 906px;
     position:relative;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Top Information
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#header 
{
	background-color:#FFF;
	margin-left:auto;
	margin-right:auto;
	width:898px;
	padding:.8em 0 1em 6px;
	position:relative;
	font-weight:bold;
	border :2px solid #0000FF;
	}
	
#nav-main {
	background-color:#2B15ED;
	position:relative;
	width:900px;
	padding: .5em 0 .3em 6px;
	font-weight:bold;
	z-index:100;
	margin-left:133;
	
}

#nav-main a:link {
	color:#FFFFFF;
	text-decoration:none;
}

#nav-main a:visited {
	color:#FFFFFF;
	text-decoration:none;
}

#nav-main a:hover {
	color:#000000;
	text-decoration:none;
	background-color:#99CCFF;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    For the side bar
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#wrapper{
    margin-left: auto;
    margin-right: auto;
    width: 906px;
    position:relative;
    background-color: White;
    border:2px solid #0000FF;
    overflow:auto;
}

#menuL {
    width:122px;
    background-color:#FFF;
    padding-left:5px;
    font-size:.9em;
    float:left;
  }


#forPages {
    background-color:#FFFFFF;
    width:770px;
    position:relative;
    border-left:2px solid #0000FF;
    float:right;
}

.clear {
    clear:both;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    For the new staff page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
ul#newStaff {
    list-style-type:circle; 
    list-style-position: outside;
}

.lineTwo {
    margin-top:8;
    margin-bottom:0;
}
 
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Bottom Menu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.bottomSect  {
    float:inherit; 
}

.lineOne {
    margin-top:0;
    margin-bottom:0;
    margin-left:90px;
    font-size:0.7em;
}

.moveIn {
    margin-top:0;
    margin-bottom:0;
    margin-left:250px;
    font-size:0.7em;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Used to hide buttons for printing
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 .hide-for-print {
 }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Images and Photos
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.me-float-left {
	float:left;
	margin-left:8px;
	}
	
.me-float-middle {
    float:right;
	margin-right:35px;
    }

.me-float-right {
	float:right;
	margin-right:12px;
	}
	
.me-float-top {
    vertical-align:top
}

.me-logo-float-right {
    float:right;
    margin-right:0px
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    for the Home page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.left-list {
    width:100px;
    float:left;
    margin-left:80px;
    margin-bottom:30px;
}
.right-list {
    width:250px;
    float:left;
    margin-left:30px;
    margin-bottom:30px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
   The wording for the pdfs
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.pdfDefine {
    color: Black;
    font-family:Times New Roman;
    font-size: 8
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    For the activity pages
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.container-two-column 
{
    width:728px;
    margin-left: 25px;
    margin-right:25px;
    height: 195px;
}

.text-on-left {
    width: 300px;
	float:left;
	margin-left:10px;
}

.image-on-right {
    width:300px;
    margin-left:50px;
}
  
.image-on-left {
	float:left;
	margin-left:10px;
}

.text-on-right {
    width:300px;
    float:right;
	margin-right:70px;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    for the Contact page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
table.contact {
    width:100% 
}

table.contact td {
     width: 110px;
     height: 22px;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    for the Qualifications expiry dates page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.topTable {
    width:92% ;
    table-layout:fixed;
    margin-left:4%;
}

.justRight {
   float: right;
}

.justLeft {
   float: left;
}

.leftTd {
   width: 40%;
}

.midTd {
   width: 8%;
}

.secondTable {
    width:90% ;
    table-layout:fixed;
    margin-left:18%;
}

.qualHead {
    width:22%;
}

.qualType {
    width: 25%;
}

.qualChk {
    width: 35%;
}
.qualLbl 
{
    font-size:small;
    width:20%;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    For the staff page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.qualPanel {
    Height:130px;
    Width:280px;
    border:1px Solid;
}

.qualTxtBox {
    float: right;
    margin-top:2px;
    margin-right: 5px;
    margin-bottom:8px;
    width:140px;
}
.qualStaffLbl {
    float:left;
    margin-left: 5px;
    margin-top: 5px;
    margin-right: 3px;
}

.qualButton {
    float:left;
    margin-top: 8px;
    margin-left: 60px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    for the Marine ecology page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.container-for-fish {
    width:728px;
    margin-left: 4px;
    margin-right:4px;
    height: 240px;
}

.noMargin {
    margin-top:0;
    margin-bottom:0;
}

.bitMargin {
    margin-bottom:5px;
}
.for-fish-left {
    margin-left: 0px; 
    margin-right:18px;
    float: left; 
    height: 220px; 
    width: 350px;
}

.for-fish-right {
    margin-left: 0px; 
    margin-right:4px;
    float: right; 
    height: 220px; 
    width: 350px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    For the cost page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.boldOn {
    font-weight: bold;
}

.myUnderLine {
    text-decoration:underline;
}

.myIndent {
    margin-left:20%;
    float:left;
}
.wholeTable {
     border:2px solid;
}

.row1 {
   border-top: 1px solid;
   border-left: 1px solid;
}

.r1c1 {
   width:33%;     
   padding-left:4px; 
   height:1.5em;  
}

.r1c2 {
   border-left: 1px solid;
   vertical-align:top;
   padding-left:4px;
}
.r1c3 {
     border-left: 1px solid;
}

.r2c2 {
   border-top: 1px solid;
   border-left: 1px solid;
   width:10%;
   vertical-align:top;
   padding-left:4px;
}

.r2c7 {
   border-top: 1px solid;
   border-left: 1px solid;
   vertical-align:top;
   padding-left:4px;
}

.r3c1 {
   border-top: 1px solid;
   border-left: none;
   height:2em; 
   width: 5%;
   vertical-align: top;
   padding-left: 4px;
}

.r3c2 {
   border-top: 1px solid;
   border-left: 1px solid;
   width: 30%;
   vertical-align: top;
   padding-left: 4px;
}
    
.r4c1 {
   border-top: 1px solid;
   border-left: none;
   height: 1em;
   vertical-align: top;
   padding-left: 4px;
} 

.r5c1 {
   border-top: none;
   border-left: none;
   height: 2em;
   vertical-align: top;
   padding-left: 4px;
}

.r5c2 {
   border-top: none;
   border-left: 1px solid;
   vertical-align: top;
   padding-left : 4px;
}

.r9cAll{
  border-top: 1px solid;
}

.r18c1 {
   border-top: none;
   border-left: none;
   height:1em; 
   width: 5%;
   vertical-align: top;
   padding-left: 4px;
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    for the New staff checklist page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.costTable {
     width:100%;
     border: 2px solid;
}

.costNoTopTable {
     border-left: 2px solid;
     border-bottom: 2px solid;
     border-right: 2px solid;
     width: 100%;
}

.costRow {
    border-top:2px solid;
}

.costCol1 {
    padding-left: 2px;
    width: 65%; 
}

.costCol2 {
    padding-left: 2px;
    border-left: 2px solid;
    width:20%;
}

.costCol3 {
    padding-left: 2px;
    width: 15%;
    border-left: 2px solid;
}
    
.costCol1With {
    padding-left: 2px;
    width: 65%; 
    border-top: 2px solid;
}

.costCol1WithCen {
    padding-left: 2px;
    width: 65%; 
    border-top: 2px solid;
    text-align: center;
}

.costCol2With {
    padding-left: 2px;
    border-left: 2px solid;
    border-top: 2px solid;
}

.costCol3With {
    padding-left: 2px;
    width: 15%;
    border-left: 2px solid;
    border-top: 2px solid;
}

.costMiddle {
    text-align: center;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    for the Communicate with the database page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.newInstTable {
    width:42% ;
    table-layout:fixed;
    margin-left:4%;
}
.instLeftTd {
   width: 40%;
}

.instRight {
   float: right;
}

.instLeft {
   float: left;
}

.moveLst {
     margin-left:4%;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    for the Roster Page
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.rosterTable {
    width:80% ;
    table-layout:fixed;
    margin-left:4%;
    
}
.rosterrow {
     
}
.rosterc1 {
   width:20%;  
      padding-left:4px; 
   height:1.5em;  
}
.rosterc2 {
   width:30%; 
      vertical-align:top;
   padding-left:4px;
}
.rosterc3 {
   width:50%; 
      vertical-align:top;
   padding-left:4px;
}