/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    css master
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    HTML Tags
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
body {
    color:#000000; 
    background-color:white;
    background-image: url('/images/whitebox.jpg');
    background-image:none;
    font-family: Bookman Old Style, Arial, Hevetica, Sans-Serif;
    font-size:0.85em;
    line-height: 1.4em;
}

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

#content-container-one-column {
	margin-left:auto;
	margin-right:auto;
	background-color:#FFFFFF;
	position:relative;
	padding:15px;
	width:728px;
	}
	
	#footer-one-column {
	display:none;
	}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Top Information
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#header {
	display:none;
	}
	
#nav-main {
	display:none;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Bottom Menu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
#nav-base {
	display:none;
}

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

.lineTwo {
    margin-top:8;
    margin-bottom:0;
}
 
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Used to hide buttons for printing
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
 .hide-for-print {
     display:none;
 }

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    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
}


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

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    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;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    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:120px;
    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  bit different to ordinary css
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.container-for-fish {
    width:728px;
    margin-left: 0px;
    margin-right:0px;
    height: 240px;
}

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

.bitMargin {
    margin-bottom:2px;
}

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

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

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

.myUnderLine {
    text-decoration:underline;
}

/**Different to straight css**/
.myIndent {
    margin-left:10%;
    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;
}

.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:35% ;
    table-layout:fixed;
    margin-left:4%;
}
.instLeftTd {
   width: 35%;
}

.instRight {
   float: right;
}

.instLeft {
   float: left;
}