@charset "UTF-8";
/* CSS Document */

* {
/*    box-sizing: border-box;   ensures border and padding are included in total width 
*/    font-family: Verdana, san-serif;
    font-size: 13px;
}

.main_container {
    width: 100%;
    margin: 0 auto;
    min-height: 400px;
    height: auto;
    position: relative;
    overflow: hidden;
    padding: 0px;
}

.side_menu {
    width: 120px;
    float: left;
    position: absolute;
    overflow: hidden;
    background-color: #e5e1d3;
    text-align: center;
    margin: 0;
    height: 100%;
    top: 0;
    z-index: 100;
}
    .side_menu input[type=submit] {
        font-size: 12px;
        width: 120px;
    }

.right_side_container {
    float: left;
    position: relative;
    padding: 0 0 0 130px;
    margin: 0;
    width: 86%;
}
    .right_side_container select, input[type=text]{
        padding: 2px;
        font-size: 12px;
        height: auto;
        width: auto;
        margin: 0;
    }

.comment { font-size: 10px; }

.col-12 {float: left; position: relative; width: 100%; }

#col100 {float: left; margin: 4px 0; max-width: 1100px; min-width: 100%; overflow: hidden;}
#col80 { float: left; margin: 4px 0; width: 80%; }
#col75 { float: left; margin: 4px 0; width: 75%; }
#col70 { float: left; margin: 4px 0; width: 70%; }
#col66 { float: left; margin: 4px 0; width: 66%; }
#col60 { float: left; margin: 4px 0; width: 60%; }
#col50 { float: left; margin: 4px 0; width: 50%; }
#col40 { float: left; margin: 4px 0; width: 40%; }
#col37 { float: left; margin: 4px 0; width: 37%; }
#col33 { float: left; margin: 4px 0; width: 33%; }
#col25 { float: left; margin: 4px 0; width: 25%;}
#col30 { float: left; margin: 4px 0; width: 30%; }
#col20 { float: left; margin: 4px 0; width: 20%; }

.col-1 {width: 8.33%; float: left; position: relative; box-sizing: border-box; }
.col-2 {width: 16.66%; float: left; position: relative; box-sizing: border-box; }
.col-3 {width: 25%; float: left; position: relative; box-sizing: border-box; }
.col-4 {width: 33.33%; float: left; position: relative; box-sizing: border-box; }
.col-5 {width: 41.66%; float: left; position: relative; box-sizing: border-box; }
.col-6 {width: 50%; float: left; position: relative; box-sizing: border-box; }
.col-7 {width: 58.33%; float: left; position: relative; box-sizing: border-box; }
.col-8 {width: 66.66%; float: left; position: relative; box-sizing: border-box; }
.col-9 {width: 75%; float: left; position: relative; box-sizing: border-box; }
.col-10 {width: 83.33%; float: left; position: relative; box-sizing: border-box; }
.col-11 {width: 91.66%; float: left; position: relative; box-sizing: border-box; }
.col-12 {width: 100%; float: left; position: relative; box-sizing: border-box; }
.col-auto {width: auto; float: left; position: relative; box-sizing: border-box; }


.fl_rt { float: right; }
.fl_lt { float: left; }
.right { text-align: right; }
.left { text-align: left; }
.centre { text-align: center; }
td .centre { text-align: center; }
th .centre { text-align: center; }
.pad_bottom_20 { padding-bottom: 20px; }
.pad_bottom_10 { padding-bottom: 10px; }
.pad_top_4 { padding-top: 4px; }
.pad_top_8 { padding-top: 8px; }
.pad_top_20 { padding-top: 20px; }
.pad_right_10 { padding-right: 10px; }
.pad_right_20 { padding-right: 20px; }
.pad_left_20 { padding-left: 20px; }
.pad_left_8 { padding-left: 8px; }
.pad_1 { padding: 1px;}

.top_line { border-top: solid 1px #375; padding-top: 2px;}
.middle { vertical-align: middle;}

a:link, a:visited { color: #375; }
a:hover {color: #002459; }

h1 { font-size: 20px; color: #002459; margin: 6px 0; line-height: 22px;}
h2 { font-size: 16px; color: #375; margin: 6px 0; line-height: 18px; }
h3 { font-size: 14px; color: #002459; margin: 6px 0; line-height: 16px;}
p {font-size: 12px; line-height: 14px; }
form { margin:0; padding:0; }

.h1 { font-size: 18px;  color: #002459; font-weight: bold;}

.sup {
    font-size: smaller;
    vertical-align: super;
}

.smallText {
    font-size: 11px;
    line-height: 11px;
}
.alertText {
    font-weight: bold;
    color: #900;
}

#filter_box{
    width:100%;
    float: left;
    background-color: #e5e1d3;
    padding: 2px;
    margin: 2px 0 ;
}

.st_login_container {
    
    position: relative;
    width: 600px;
    margin: 20px auto;
    border-top: solid 1px #375;
    padding: 20px 0;
}

	.st_login_container input[type=text], input[type=password], select{
		width: 200px;
		margin: 2px 0;
		font-size: 12px;
		height: 24px;
		padding: 2px;
	}
    .login_header {
        background-color: #375;
        color: #fff;
        font-family: Verdana, san-serif;
        font-size: 18px;
        font-weight: bold;
        width: 100%;
        padding: 4px;
        text-shadow: 2px 2px 2px #000;
    }
    .login_body{
        padding: 10px;
    }


    .side_menu input{
        width: 200px;
    }
    .side_menu form{
        margin: 0px;
    }
.menu_but {
    border: none;
    color: #002459;
    background-color: #e5e1d3;
    padding: 4px;
    cursor: pointer;
    border-bottom: solid 1px #002459;
}
    .menu_but:hover{
        text-shadow: 1px 1px 1px #666;
        background-color:#c9c4b0;
    }

#search_box {
    background-color: #e5e1d3;
    box-shadow: 2px 2px 2px #666;
    overflow: hidden;
    padding: 4px;
}

.dataTable {
    width: 100%;
    padding: 0;
    border-collapse: collapse;
    margin-bottom: 4px;
}

.alt_th {
    background-color:#88bb88;
    text-align:center;
    padding:4px;
    color:#000000;
}
    .dataTable th {
        background-color: #002459;
        color: #fff;
        font-weight: bold;
        font-size: 12px;
        text-align: center;
        line-height: 12px;
    }
    .dataTable td {
        border-bottom: solid 1px #375;
        padding: 2px;
        font-size: 11px;
        line-height:13px;
        text-align: center;
    }


.bigTable { /* for really crammed tables */
    padding: 0;
    border-collapse: collapse;

}
    .bigTable th {
        font-size: 12px;
        font-weight: bold;
        padding: 0 3px;
        border-bottom: solid 2px #002459;
    }
    .bigTable td {
        font-size: 12px;
        text-align: center;
        padding: 0 1px;
    }



    .verticalTxt{
        /* Safari */
        -webkit-transform: rotate(-90deg);
        -webkit-transform-origin: 80% 60%;

        /* Firefox */
        -moz-transform: rotate(-90deg);
        -moz-transform-origin: 0% 0%;

        /* IE */
        -ms-transform: rotate(-90deg);
        -ms-transform-origin: 80% 60%;

        /* Opera */
        -o-transform: rotate(-90deg);
        -o-transform-origin: 80% 60%;

        transform-origin: -90deg;
        -moz-transform-origin: 80% 60%;

        white-space: nowrap;
        width: 40px;
        max-width: 40px;
        height: 90px;
        //border: solid 1px red;
        border-top: none;
        border-bottom: solid 2px #002459;
    }

.dataBox {
    border: solid 2px #002459;
    padding: 5px;
    margin-right: 5px;
}

/* form element with classes */
.w40 { width: 40px; }
.w60 { width: 60px; }
.w100 { width: 100px; }
.w150 { width: 150px; }
.w500 { width: 500px; }
.h25 { height: 25px; padding: 0;}

.top { vertical-align: top; }

.transect_box {
    position: relative;
    float:left;
    width: 260px;
    background-color: #eee;
    border: solid 1px #ddd;
    margin: 0 10px 4px 0;
    padding: 0 0 0 2px;
}
    .transect_in { float: left; }

.x_transect {
    float: right;
}
.x_trans_but {
    background-color: #c00;
    color: #fff;
    font-weight: bold;
    font-size: 11px;
    border: none;
    width: 16px;
    height: 16px;
    padding: 0 2px 4px 2px;
    margin: 0 2px 0 0;
}
    .x_trans_but:hover{
        background-color: #a00;
    }


.ucSpecies {
    float: left;
    position: relative;
    height: 30px;
    border-bottom: solid 1px; #3531d3;
    margin-top: 0px;
}

.latinNames {
    font-size: 8px;
    font-style: italic;
}

/*
	ERROR STYLES
*/

div .error { padding: 0px; margin: 0 0 20px 0px; font-size: 12px; text-align:center; color: #a00; font-family:Verdana, Geneva, sans-serif;}
div .success { padding: 0px; margin: 0 0 20px 0px; font-size: 12px; text-align:center; color: #0a0; font-family:Verdana, Geneva, sans-serif;}
div .warning { padding: 0px; margin: 0 0 20px 0px; font-size: 12px; text-align:center; color: #d64000; font-family:Verdana, Geneva, sans-serif;}

#alert_div {
	position: absolute;
	left:220px;
	right: 220px;
	top: 20px;
	z-index: 30;
	margin: 20px auto;
	font-size: 14px;
	box-shadow: 2px 2px 2px #666;
	padding: 4px 0;
	text-align: center;
	font-family:Verdana, Geneva, sans-serif;
	-moz-animation: fadeAlert 0s ease-in 4s forwards; /* Firefox */
	-webkit-animation: fadeAlert 0s ease-in 4s forwards;/* Safari and Chrome */
	-o-animation: fadeAlert 0s ease-in 4s forwards;/* Opera */
	animation: fadeAlert 0s ease-in 4s forwards;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;

}
    @keyframes fadeAlert {
        to {
            width:0;
            height:0;
            margin: 0;
            box-shadow: none;
            border-radius: 0;
            overflow:hidden;
        }
    }
    @-webkit-keyframes fadeAlert {
        to {
            width:0;
            height:0;
            margin: 0;
            border-radius: 0;
            box-shadow: none;
            visibility:hidden;
        }
    }
	.alert_success { background-color: #c8eebf; border-color: green; color: green;}
	.alert_warning { background-color: #f6f6cf; border-color: #d64000; color:#d64000;}
	.alert_error { background-color: #fce9e9; border-color: #c20000; color: #c20000; }


/*
	BUTTON STYLES
*/

.othData_but {
    border: none;
    font-size: 11px;
    color: #fff;
    background-color:#639275;
    padding: 0 2px;
    margin-right: 3px;
	cursor: pointer;
}


.submit_but {
	background-color: #002859;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	border: none;
	cursor: pointer;
	margin: 2px;
}
.save_but {
	font-size:13px;
	color: #fff;
	border: none;
	background-color: #2C7555;
	font-style:bold;
}
.cancel_but {
	font-size:12px;
	background-color: #a00;
	color: #fff;
	font-style:bold;
	border: none;
	margin: 2px;
}
.back_but {
	background-color: #375;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	border: none;
	cursor: pointer;
}

.upload_but {
	background-color: #002859;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	border: none;
	cursor: pointer;
	margin: 2px;
	padding: 2px;
}
.edit_but {
	background-color:#2C7555;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	border: none;
	cursor: pointer;
	margin: 2px;
}
.del_but {
	background-color:#900;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	border: none;
	cursor: pointer;
	margin: 2px;
}

.reset_but {
	background-color:#751f1f;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	border: none;
	cursor: pointer;
	margin: 2px;
	padding: 0px 4px;
}

.admin_but {
	font-size: 11px;
	padding:0 2px;
}