/* Jamison Project Stylesheet - 2015 */
body{
	
	background-size: 100% auto;
    background-repeat: no-repeat;
	background-attachment:fixed;
	margin:0;
	background-color:#dddddd;
	
}
#headnav{
	position:fixed;
	width:100%;
	margin:0;

}
#container {
	margin: 1rem auto;
	width: 90%;
	overflow: hidden;
	padding: 0.3rem 0.3rem 0.3rem;
	background-color: #FFF;
	font-family: Calibri;
	margin-top:0;
	border-style: solid;
    border-width: 1px;

}
#main {
	overflow:hidden;
	WIDTH:100%; 
	background-color:#ffffff;
	margin-left:auto;
	margin-right:auto;

}
#header {
z-order:50;
	WIDTH:100%; 
	font-size: 45px;
	color: #ffffff;
	text-align: center;	
	background-color:#123456;
	background-image: url("images/Banner.jpg");
}
#header img{
	width:70%;
}
#header-left{
    width:30%;
}
#header-middle{
    width:30%;
}
#topnav {
z-order:50;
	width: 100%;
	float: left;
	text-align: left;
	background-color:#ffffff;
}	
#topnav  ul{
	display:inline;
	list-style-type:none;
	width:100%;
	padding-left:0;
}
#topnav li{
	display:inline-block;
	width:11.5%;
	padding-right:0;
	padding-left:0;
	padding-bottom:2px;
}
#topnav li.home{
	width:7%;
    
}
#topnav a {
 	TEXT-DECORATION: none;
	COLOR: #ffffff; 

	background-color:#ffffff;
	FONT-SIZE: 1em;
	font-weight:bold;
	position:relative;
	padding-top:3px;
	padding-bottom:2px;
	padding-right:0;
	padding-left:0;
}
#topnav a img{
	width:100%;
	padding-left:0;
	padding-right:0;
}
#topnav x {
 	TEXT-DECORATION: none;
	COLOR: #0000ff; 
}
#topnav a:hover {
	background-COLOR: #00ec7e; 
}
#topnav a:active {
	COLOR: #00713d; 
 }
#topnav a.current {
	background-color: #00713d;
}

#clear {
	clear:both;
	margin-top: 0;
	margin-bottom:0;
}
#sidebar{

	float:left;
	width:15%;
}
#sidenav {

	color:#02d371;
	MARGIN: auto; 
	margin-top:5px;
	border-radius:8px;
	float: left;
	width:100%;
	BACKGROUND-COLOR: #00713d;
 	FONT-SIZE: 1.4em;
	padding-top:3px;
	padding-bottom:6px;
	text-align:center;
	font-weight:bold;
}
#sidenav  ul{
	display:inline;
	list-style-type:none;
	width:100%;
	padding-left:0;
	FONT-SIZE: 0.8em;
}
#sidenav li{
	text-align:left;
	display:block;
	padding-right:0;
	padding-left:0;
	padding-bottom:0;
	margin-top:0;
	margin-bottom:0;
	width:100%;
}
#sidenav hr{
	margin-top:3px;
	margin-bottom:3px;
}
#sidenav a{
 	TEXT-DECORATION: none;
	COLOR: #ffffff; 
	display:block;
	background-color:#00713d;
	FONT-SIZE: 1em;
	font-weight:bold;
	position:relative;
	padding-top:0;
	padding-bottom:0;
	padding-right:2px;
	padding-left:4px;
	border-radius:3px;
}
#sidenav a img{
	width:100%;
	padding-left:0;
	padding-right:0;
}
#sidenav x {
 	TEXT-DECORATION: none;
	COLOR: #0000ff; 
}

#sidenav a:hover {
	background-COLOR: #00ec7e; 
}
#sidenav a:active {
	COLOR: #02d371; 
 }
#sidenav a.current {
	background-color: #009c53;
}
#sidenav_menu{
    display:block;
}
#sidenav_mobile{
    display:none;
}
#detail {

	MARGIN: auto; 
	margin-top:5px;
	float: left;
	width:84%;
 	BACKGROUND-COLOR: #ffffff;
 	margin-left:3px;
	FONT-SIZE: 1.2em;
	padding-left:2px;
	padding-right:2px;
}
#detbody_full {
	float:left;
	width:100%;
}
#detail p{
	text-align:justify;
	padding-left:3px;
	padding-right:3px;
	margin-top:0;
	
}
#detleft{
    float:left;
    width:50%;
}
#detleftl{
    float:left;
    width:80%;
}
#detleftr{
    float:right;
    width:20%;
    margin-top:20px;
}
#detbody{
	float:left;
	width:100%;
	clear:both;
}

#detright{
	float:right;
	width:20%;
	font-size:0.8em;
	clear:both;
}
#contribute {

	background-color:white;
	color:green;
	margin: auto; 
	margin-top:5px;
	border-radius:8px;
	width:50%;
 	FONT-SIZE: 1.4em;
	padding-top:3px;
	padding-bottom:6px;
	text-align:center;
	font-weight:bold;
}
#contribute img{	
	width:100%;
}
#map{
	float:right;
	width:40%;
	margin-left:20px;
}
#map img{
	max-width:100%;
	max-height:300px;
}
#pics {

	MARGIN: auto; 
	margin-top:5px;
	margin-left:2px;
	float: left;
	width:100%;
	BACKGROUND-COLOR: #00713d;
	FONT-SIZE: 1.2em;
	color:black;
	border-radius:8px;
	overflow:auto;
}
#picscontainer{
	float:left;
	width:16%;
	cursor:pointer;
	
}
#pics figure{
	margin-left:5px;
	margin-right:5px;
	text-align:center;
	height:9em;
	font-size:.75em;
}

#pics img {
	max-width: 95%;
	max-height: 8em;
}
#slides {
	z-order:100;
	background-color:rgba(0,0,0,0.8);
	position: fixed;
	width:90%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align:center;
	font-size:1.6em;
	font-family: Calibri;
	overflow:scroll;
    max-height:90%;
	display:inline-block;

}
#slide_exit{
	margin-top:2px;
	margin-right:2px;
	width:28px;
	height:28px;
	float:right;
	opacity:1.0; 
	background-position:top right;
	cursor:pointer;
}
#slide_left{
	
	margin-right:2px;
	width:28px;
	height:28px;
	float:left;
	opacity:1.0; 
	background-position:left center;
	cursor:pointer;
}
#slide_left{
	display:block;
	position:absolute;
	top:45%;
	left:0;
	cursor:pointer;
}
#slide_right{

	margin-right:2px;
	width:28px;
	height:28px;
	float:right;
	opacity:1.0; 
	background-position:right center;
	cursor:pointer;
}
#slide_right{
	display:block;
	position:absolute;
	top:45%;
	right:0;
	cursor:pointer;
}
#slide_center{
vertical-align:middle;
}
#slides img{
	max-width:95%;
	max-height:95%;
}
#grades, #condition ,#exposure, #navs, #types{
	z-order:100;
	background-color:rgba(0,0,0,0.8);
	position: fixed;
	width:40%;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align:center;
	font-size:1.6em;
	font-family: Calibri;
	overflow:scroll;
	height:60%;
	color:white;
}
#grade_exit{
	margin-top:2px;
	margin-right:2px;
	width:28px;
	height:28px;
	float:right;
	opacity:1.0; 
	background-position:top right;
	cursor:pointer;
}
p.alrt{
    color:white;
    background-color:red;
}
p.warn{
    color:white;
    background-color:orange;
}
#footer {

	MARGIN: auto; 
	CLEAR: both; 
	width: 100%;
	float: left;
	color: #ffffff;
	text-align: center;	
	background-color:#123456;
	margin-top:5px;
	font-size:1em;
	background-image: url("images/Banner.jpg");
}
#footer a{
	text-decoration:none;
	color:white;

}
#help{
	color:#02d371;
	MARGIN: auto; 
	margin-top:5px;
	border-radius:8px;
	float: left;
	width:100%;
	BACKGROUND-COLOR: #00713d;
 	FONT-SIZE: 1.4em;
	padding-top:3px;
	padding-bottom:6px;
	text-align:center;
	font-weight:bold;
}
#help ul{
	padding-left:0;
	list-style-type:none;
	color:white;
	text-align:center;
}
#footnotes{
	clear:both;
	width:100%;
	font-size:0.8em;
	border:solid;
	border-color:darkgrey;
	border-top:1px, solid;
	border-bottom:none;
	border-left:none;
	border-right:none;
}
.container {
    -webkit-column-count: 2;
    -ms-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;

    -webkit-column-gap: 20px;
    -ms-column-gap: 20px;
    -moz-column-gap: 20px;
    column-gap: 20px;
		   
	-moz-column-rule-color:  #ccc;
    -ms-column-rule-color:  #ccc;
    -webkit-column-rule-color:  #ccc;
	column-rule-color:  #ccc;
       
    -moz-column-rule-style:  solid;
    -ms-column-rule-style:  solid;
    -webkit-column-rule-style: solid ;
    column-rule-style:  solid;

    -moz-column-rule-width:  1px;
    -ms-column-rule-width:  1px;
    -webkit-column-rule-width:  1px;
    column-rule-width:  1px;

}
#closed table,  td,  th {
    border-collapse: collapse;
}
#closed tr:nth-child(even) {background: #eee}
#closed tr:nth-child(odd) {background: #FFF}
/* ----- Slideshow ----- */
#sshidden {
	display:none;
}
#ss {
	width:100%;
	margin:auto;
	text-align:center;
	margin-top:10px;
}
#ss img {
	width:100%;
	box-shadow: 10px 10px 5px #888888;
}
#ssctls {
	width:75%;
	margin:auto;
	margin-top:10px;
}
#ssctls #ctl1,#ssctls #ctl2 {
	text-align:center;
	width:30%;
	float:left;
	padding:5px;
}
#ctl1 img, #ctl2 img {
	width:100%;
	margin-bottom:5px;
	padding-bottom:5px;
	cursor: pointer; cursor: hand;
}
/* ----- Views & Forms ----- */

#tab {
	color: darkblue;
	font-size:1.0em;
	border-radius:5px;
	border-style:solid;
	max-width:80%;
	margin:auto;
}
#tab th {
	background-color: #999999;
	color:blue;
}
#tab2, #tab3 {
	border-radius:8px;
	width:100%;
}
#tab2 th {
	background-color: #00713d;
	color:white;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
#tab3 th {
	background-color: #00713d;
	color:white;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}
#tab2left{
	background-color:#00713d;
	border-top-left-radius:8px;
}
#tab2right{
	background-color:#00713d;
	border-top-right-radius:8px;
}#tab2 td{
	width:33%;
}
#tab td a{
	color:red;
	text-align:right;
}
#tab td{
	background-color:#dddddd;
}
#tab img{
	width:30px;
}
#submit {
	border-radius: 5px;
}
input[type="text"], input[type="password"], input[type="date"], input[type="email"]{
	border-radius:3px;
	border-color:darkgrey;
	color:black;
}
textarea, select{
	border-style:inset;
	border-width:2px;
	border-radius:3px;
	border-color:darkgrey;
}
select {
	color:#000000;
}

input[type="submit"], input[type="reset"]{
	min-width:20%;
}
textarea, select{
	border-style:inset;
	border-width:2px;
	border-radius:3px;
}

fieldset {
	margin-left: auto;
	margin-right: auto;
	border-style:solid;
	border-color:lightgrey;
	border-radius:10px;
	border-width:3px;
	width:100%;
	text-align:left;
}
fieldset p{
	line-height:1;
	margin-bottom:0;
	margin-top:8px;
}
fieldset.multicol{
	border:0;
}
legend{
	font-size:1.3em;
}
.multi span{
	vertical-align:top;
}
.multi label{
	display:block;
	text-align:center;
	margin-right:10px;
}
.multi input, .multi select{
	margin-right:10px;
}
.multi input[type="radio"]{
	margin-right:2px;
}
.multidel {
	margin-left:5px;
}
#frm  {
	margin-left: auto;
	margin-right: auto;
	border-style:solid;
	border-color:darkgrey;
	border-radius:10px;
	width:100%;
}
#frm td{
	vertical-align:top;
}
#frm ul{
	LIST-STYLE-TYPE: none; 
	margin:5px;
	padding:0;
}
#frm a {
	cursor:pointer;
	border-style:solid;
	border-width:1px;
	border-radius:3px;
	border-color:darkgrey;
	background-color:#eeeeee;
	padding-left:4px;
	padding-right:4px;
}
#frm input, #frm select{
	padding-bottom:0;
	height:21px;
}
#multi1 ul{
	margin-top:0;
}
#frm label.col1{
width:20%;
}
.col1, .col4{
	width:40%;
}
.col2{
	width:60%;
}
.clear{
	clear:both;
}
.centre {
	text-align:center;
}
.red, red{
	color:red;
}
#m75{
	width:75%;
	margin-left:25px;
	float:left;
}
#m75 .link a{
	color:blue;
	text-decoration:underline;
}
#m75 .link a:hover{
	color:red;
}
#m50 {
	width:50%;
	float:left;
}
label.col1 {
	width:10%;
	min-width:100px;
	float:left;
	text-align:left;
}
#itab img{
	max-width:200px;
	max-height:200px;
}
#confrm {
	margin-left: auto;
	margin-right: auto;
	border-style:solid;
	border-color:lightgrey;
	border-radius:10px;
}
#confrm td.col2 {
	font-weight:bold;
	padding-left:10px;
	background-color:#ffffaa;
	border-bottom:solid;
	border-color:#ffffaa;
}
.ptr{
	cursor:pointer;
	margin-left:20%;
	font-size:1em;
}
.ref {
	font-size:0.75em;
}
.ref a{
	color:white;
}
#selme {
	visibility:hidden;
}
#comments td{
	padding-right:20px;
}
green{
	color:#00713d;;
}
#navdiv{
	position:absolute;
	left:0px; 
	top:108px; 
	width:20px;
	color:black;
	background-color:lightgrey;
	overflow-y: hidden;
	overflow-x:hidden;
	z-index:1
}
#navdiv:hover {
	display:block;
	width:175px;
}
#navheading{
    position:relative;
	left:20px;
	width:165px;
	height:25px;
	text-align:left;
	font-size:1em;
	font-weight:bold;
	padding-top:10px;
}
#navbutton{
	position:relative;
	left:20px;
	width:165px;
	height:25px;
	text-align:left;
	font-size:1em;
	font-weight:bold;
	padding-left:20px;
}
#navpage{
	position:fixed;
	left:300px;
	top:108px;
	font-size:1.5em;
}
#navbutton:hover, .tabopt:hover, #repbutton:hover{
	cursor:pointer;
	color:red;
}
#navbuttontext{
	top:10px;
	position:absolute;
	width:100%;
}
#login{
	position:fixed;
	left:250px; 
	top:200px; 
	width:350px;
	height:250px; 
	background-color:#eeeeee;
}
#loginheader{
	position:fixed;
	left:250px; 
	top:200px; 
	width:350px;
	height:40px; 
	background-color:#aaaaaa;
	color:white;
	font-size:2em;
	text-align:center;
}
.loginform{
	position:fixed;
}
	
.large{
	width: 20px;
	height: 20px;
/*	-webkit-appearance:none;
	-moz-appearance: none;
	appearance:none;*/
}
#pagehead {
	position:fixed;
	left:0px;
	top:0px;
}
#pagehead img{
	position:absolute;
	width:125px;
	left:50px;
}
.button {
	width:100px;
	height:50px;
	text-align:center;
	
  text-decoration: none;
  background-color: #dddddd;
  color: #444444;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #444444;
  border-right: 1px solid #444444;
  border-bottom: 1px solid #444444;
  border-left: 1px solid #444444;
}
.headline{
	background-color:lightgray;
	width:100%;
	border-style: solid;
    border-width: 0px 0px 1px 0px;
}
.topbox{
	position:fixed;
	background-color:lightgray;
	top:140px;
}
.detbox{
	position:fixed;
	background-color:#eeeeee;
	top:190px;
}
.detboxbot{
	position:fixed;
	background-color:#eeeeee;
	top:450px;
}
.detbox25{
	position:fixed;
	background-color:#eeeeee;
	top:165px;
}
.botbox{
	position:fixed;
	background-color:lightgray;
	top:425px;
}
.scrollbox{
	overflow-y: scroll;
}
.listselect{
	cursor:pointer;
	height:23px;
}
.listselect1{
	cursor:pointer;
	height:23px;
	background-color:#dddddd;
}
.tabopt{
	float:left;
	width:24.75%;
	text-align:center;
	font-size:20px;
}
.tabctl{
	position:fixed;
	top:140px;
}
.tabbox{
	position:fixed;
	background-color:lightgray;
	top:170px;
}
.detboxtab{
	position:fixed;
	background-color:#eeeeee;
	top:195px;
}
.tabbox2{
	position:fixed;
	background-color:lightgray;
	top:200px;
}
.detboxtab2{
	position:fixed;
	background-color:#eeeeee;
	top:225px;
}
#pagetitle{
	position:fixed;
	left:300px;
	top:35px;
	font-size:40px;
}
#username{
	position:fixed;
	left:900px;
	top:10px;
	font-size:16px;
}
.logout{
	position:fixed;
	left:900px;
	top:50px;
	height:45px;
	width:80px;
	text-align:center;
}
#navbar{
	left:0px;
	top:108px;
	width:20px;
	height:80%;
	background-color:darkblue;
}
@media only screen and (max-width: 820px) and (min-width: 290px) {
    #container, #detright{
        width:100%;
        padding:0;
    }
    #detail{
        padding-left:0;
        margin-left:0;
    }
    #detleft, #detbody, #detright, #m75{
        margin-left:3px;
        padding-left:2px;
    }
    #sidebar, #detail, #footer, #slides,#topnav,#header{
        width:100%;
    }
    #pics{
        width:100%;
        margin-left:0;
    }
    #grades, #condition ,#exposure, #navs, #types{
       width:98%; 
       height:80%;
    }
    #sidenav  ul{
    	display:block;
    	text-align:center;
    }
    #sidenav li{
        padding-top:5px;
        padding-bottom:5px;
        margin-top:5px;
        margin-bottom:5px;
    }
    #sidenav_menu{
	    display:none;
	}
	#sidenav_mobile{
	    display:block;
	}
   .container {
        -webkit-column-count: 1;
        -ms-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
    }
    #m75{
        width:88%;
    }
    #detright{
        text-align:right;
    }
    textarea{
        max-width:250px;
    }
    #container{
        border-style:none;
    }
    #picscontainer{
    	width:50%;
    }
    #topnav li{
	    width:25%;
    }
	#topnav li.home{
	    width:12.5%;
    }
    #map{
    	width:100%;
    }
    #detleft, #detleftl, #detleftr{
        width:100%;
    }
    .ptr{
        margin-left:0;
    }
    #detbody p, #detright{
        margin-right:10px;
    }
}