body {
	background-color: #ffffff;
	color: #000000;
	margin: 0;
	padding: 0;
	font-family: Arial, Sans-serif;
}

img {
	max-width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}

#TopBanner {
	margin: auto;
	position: relative;
	-webkit-box-shadow: inset 0px -32px 32px -16px #000000;
	-moz-box-shadow: inset 0px -40px 40px -20px #000000;
	box-shadow: inset 0px -32px 32px -16px #000000;
	background-color: #002868;
	border-width: 0 0 10px 0;
	border-style: solid;
	border-color: #009933;
	height: 84px
}

#Footer {
	background-color: #002868;
	color: #ffffff;
	padding: 10px;
	font-size: 80%;
	box-shadow: 0px 4000px 0px 4000px #002868;
}

#major {
	background-color: #ffffff;
	margin: 0px 8% 0px 8%;
	padding: 5px 10px;
	clear: both;
	overflow: auto;
}

#upper-right {
	position: absolute;
	right: 15px;
	top: 15px;
	padding: 5px;
	display: inline;
	height: 50px;
	color: #ffffff;
}
#upper-right p {
	margin: 0;
	position: relative;
	top: 50%;
	transform: translate(0%, -50%)
}


h1 {
	font-size: 250%;
	font-weight: normal;
	font-family: Georgia, Serif;
	color: #000000;
	margin: 5px;
}

h2 {
	font-size: 200%;
	font-weight: normal;
	font-family: Georgia, Serif;
	color: #002868;
	margin: 0;
	padding: 0;
}

h3 {
	font-size: 150%;
	font-weight: normal;
	font-family: Georgia, Serif;
	color: #002868;
	margin: 0;
	padding: 0;
}

subh {
	font-size: 120%;
	font-weight: normal;
	font-family: Georgia, Serif;
	color: #002868;
}

.menubar{
	width: 16%;
	display: inline-block;
	text-align: center;
	color: #009933;
	position: relative;
}

.menubar-content {
	display: none;
	position: absolute;
	background-color: #ffffff;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.menubar-content a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.menubar-content a:hover {
	background-color: #f1f1f1
}

.menubar:hover .menubar-content {
	display: block;
}

.menubar:hover .dropbtn {
    background-color: #3e8e41;
}


a.menu:link{
	color: #00AA30;
	text-shadow: 1px 1px 3px #111111;
}

a.menu:visited{
	color: #009933;
}

a.menu:hover{
	color: #ffffff;
}

.minih {
	font-weight: normal;
	font-family: Georgia, Serif;
	color: #00aaaa;
}

.center_block {
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
	width: 200px;
}

a:link {
	text-decoration: none;
	color: #0038B0;
}

a:visited {
	color: #0038B0;
}

a:hover {
	color: #0040F0;
}

.propho{
	float: left;
	border-style: solid;
	border-color: #ffffff;
	border-width: 8px;
	margin: 8px;
	-webkit-box-shadow: 0px 1px 3px #333333;
	-moz-box-shadow: 0px 1px 3px #333333;
	box-shadow: 0px 1px 3px #333333;
}

.btn {
	-webkit-border-radius: 2;
	-moz-border-radius: 2;
	border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px #333333;
	-moz-box-shadow: 0px 1px 3px #333333;
	box-shadow: 0px 1px 3px #333333;
	color: #ffffff;
	font-weight: bold;
	font-size: 90%;
	background: #009933;

	padding: 8px 10px 8px 10px;
	text-decoration: none;
	border: 0;
	display: inline-block;
}


a.btn{
	text-decoration: none;
	color: #ffffff;
}


.btn:hover {

	background: #E00830;
	text-decoration: none;

}

.btn_plain {
	-webkit-border-radius: 2;
	-moz-border-radius: 2;
	border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px #333333;
	-moz-box-shadow: 0px 1px 3px #333333;
	box-shadow: 0px 1px 3px #333333;
	color: #ffffff;
	font-weight: bold;
	font-size: 90%;
	background: #228822;

	padding: 8px 10px 8px 10px;
	text-decoration: none;
	border: 0;
	display: inline-block;
}



.nlbtn {
	-webkit-border-radius: 2;
	-moz-border-radius: 2;
	border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px #333333;
	-moz-box-shadow: 0px 1px 3px #333333;
	box-shadow: 0px 1px 3px #333333;
	color: #ffffff;
	font-weight: bold;
	font-size: 100%;
	background: #228822;

	padding: 8px;
	margin: 2px 4px;
	width: 96px;
	text-decoration: none;
	border: 0;
	display: inline-block;
	text-align: center;
	text-shadow: none;

}


.nlbtn:hover {

	background: #22aa22;
	text-decoration: none;

}

a.nlbtn{
	text-decoration: none;
	color: #ffffff;
}

.setbtn {
	-webkit-border-radius: 2;
	-moz-border-radius: 2;
	border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px #333333;
	-moz-box-shadow: 0px 1px 3px #333333;
	box-shadow: 0px 1px 3px #333333;
	color: #ffffff;
	font-weight: bold;
	font-size: 90%;
	background: #228822;

	padding: 12px 8px 12px 8px;
	margin: 15px;
	width: 120px;
	text-decoration: none;
	border: 0;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}


.setbtn:hover {

	background: #22aa22;
	text-decoration: none;

}

a.setbtn{
	text-decoration: none;
	color: #ffffff;
}


.btnreq {
	-webkit-border-radius: 2;
	-moz-border-radius: 2;
	border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px #333333;
	-moz-box-shadow: 0px 1px 3px #333333;
	box-shadow: 0px 1px 3px #333333;
	color: #117711;
	font-weight: bold;
	font-size: 90%;
	background: #e0b010;

	padding: 8px;
	text-decoration: none;
	display: inline-block;
}


.btnreq:hover {
	color: #228822;
	background: #f0c010;
	text-decoration: none;
}



.btnsrch {
	-webkit-border-radius: 2;
	-moz-border-radius: 2;
	border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px #333333;
	-moz-box-shadow: 0px 1px 3px #333333;
	box-shadow: 0px 1px 3px #333333;
	color: #ffffff;
	font-weight: bold;
	font-size: 90%;
	background: #228822;

	padding: 8px 10px 8px 10px;
	text-decoration: none;
	border: 1 solid #228822;
	display: inline-block;
}




.btnsrch:hover {

	background: #22aa22;
	text-decoration: none;

}



.linkbtn {
	background-color: transparent;
	text-decoration: none;
	border: none;
	color: #228822;
	cursor: pointer;
}

.btnicon {

	-webkit-box-shadow: 1px 1px 1px #aaaaaa;
	-moz-box-shadow: 1px 1px 1px #aaaaaa;
	box-shadow: 1px 1px 1px #aaaaaa;
	border: 0;
	display: inline-block;
}



.class_box {
	display: inline-block;
	background-color: #002868;
	color: #FFFFFF;
	font-size: 120px;
	font-family: Arial, Sans-serif;
	margin: 48px;
	padding: 32px;
}


.half_main{
	padding: 24px;
	width: calc(50% - 52px);
	display: inline-block;
	vertical-align: top;
}

.third_main{
	display: inline-block;
	padding: 8px;
	vertical-align: top;
	width: calc(33% - 23px);
}

#profile_photo {
	float: left;
	height: 240px;
	border: 3px solid white;
	margin: 10px;
	-webkit-box-shadow: 0px 1px 4px #333333;
	-moz-box-shadow: 0px 1px 4px #333333;
	box-shadow: 0px 1px 4px #333333;
}



.post {
	background-color: #ffffff;
	padding: 10px;
	margin: 12px;
	display: inline-block;
	vertical-align: top;
	width: calc(50% - 44px);
	-webkit-border-radius: 4;
	-moz-border-radius: 4;
	border-radius: 4px;	
	-webkit-box-shadow: 1px 1px 2px 1px #666666;
	-moz-box-shadow: 1px 1px 2px 1px #666666;
	box-shadow: 1px 1px 2px 1px #666666;
	overflow: auto;
}

.post_mobile {
	background-color: #ffffff;
	padding: 10px;
	margin: 12px;
	vertical-align: top;
	width: calc(98% - 44px);
	-webkit-border-radius: 4;
	-moz-border-radius: 4;
	border-radius: 4px;	
	-webkit-box-shadow: 1px 1px 2px 1px #666666;
	-moz-box-shadow: 1px 1px 2px 1px #666666;
	box-shadow: 1px 1px 2px 1px #666666;
	overflow: auto;
}

.mini_post {
	background-color: #ffffff;
	padding: 5px;
	margin: 10px 15px 10px 0;
	display: inline-block;
	-webkit-border-radius: 4;
	-moz-border-radius: 4;
	border-radius: 4px;
	-webkit-box-shadow: 1px 1px 2px 1px #666666;
	-moz-box-shadow: 1px 1px 2px 1px #666666;
	box-shadow: 1px 1px 2px 1px #666666;
	overflow: auto;
}

.photo_shadow {
	-webkit-box-shadow: 1px 1px 2px 1px #666666;
	-moz-box-shadow: 1px 1px 2px 1px #666666;
	box-shadow: 1px 1px 2px 1px #666666;
}

.pho_tile {
	display: inline-block;
	margin: 3px;
	-webkit-box-shadow: 1px 1px 2px 1px #666666;
	-moz-box-shadow: 1px 1px 2px 1px #666666;
	box-shadow: 1px 1px 2px 1px #666666;
}

input[type=checkbox] + label {
	opacity: 0.4;
}
input[type=checkbox]:checked + label {
	opacity: 1;
}

input[type=radio] + label {
	opacity: 0.4;
}
input[type=radio]:checked + label {
	opacity: 1;
}

.pho_back{
	display: none;
	opacity: 0.8;
	background-color: #444444;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	z-index: 0;
}

.pho_big{
	opacity: 1;
	background-color: #ffffff;
	color: #000000;
	height: 720px;
	position: absolute;
	z-index: 3;
}

.btnX {
	opacity: 0.6;
	font-weight: bold;
	font-size: 150%;
	color: #cccccc;
	text-shadow: 1px 1px 2px #222222;

	padding: 8px 10px 8px 10px;
	z-index: 4;
	position: absolute;
	right: 10px
}




.btnX:hover {

	opacity: 1;
	color: #ffffff;
}

#progress {
	position: absolute;
	background-color: #ffffff;
	color: #000000;
	left: calc(50% - 150px);
	top: calc(50% - 200px);
	padding: 10px 50px 10px 50px;
	z-index: 3;
}

.archive {
	list-style-type: none;
}

ul {  
	
}

ul li ul{
	margin: 5px 0;
	padding: 5px;
	display: none;
	list-style-type: none;
}

ul li ul li ul{
	padding: 5px;
	list-style-type: none;
}


.btnylw {
	-webkit-border-radius: 2;
	-moz-border-radius: 2;
	border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px #333333;
	-moz-box-shadow: 0px 1px 3px #333333;
	box-shadow: 0px 1px 3px #333333;
	color: #117711;
	font-weight: bold;
	font-size: 100%;
	background: #e0b010;

	padding: 8px;
	margin: 2px 4px;
	width: 96px;
	text-decoration: none;
	border: 0;
	display: inline-block;
	text-align: center;
	text-shadow: none;

}


.btnylw:hover {
	color: #228822;
	background: #f0c010;
	text-decoration: none;
}





.changebtn{
	-webkit-border-radius: 2;
	-moz-border-radius: 2;
	border-radius: 2px;
	-webkit-box-shadow: 0px 1px 3px #333333;
	-moz-box-shadow: 0px 1px 3px #333333;
	box-shadow: 0px 1px 3px #333333;
	color: #ffffff;
	font-weight: bold;
	font-size: 100%;
	background: #228822;

	padding: 8px;
	margin: 2px 4px;
	width: 96px;
	text-decoration: none;
	border: 0;
	display: inline-block;
	text-align: center;
	text-shadow: none;

}

.changebtn span{
	color: #ffffff;
	font-weight: bold;
	font-size: 100%;
	text-decoration: none;
}

.changebtn:hover {
	background: #22aa22;
	color: #ffffff;
	font-weight: bold;
	font-size: 100%;
	text-decoration: none;
}

.changebtn:hover span{
	display: none;
}

.changebtn:hover:after {
	content: attr(data-btn-alt);
	font-weight: bold;
	font-size: 100%;
	text-decoration: none;
}




.bss-slides{
/* the container element needs to be relatively positioned and display: block so that the slides can be "stacked up" inside of it */ 
	position: fixed; 
	display: block;
	height: calc(90%);
	width: calc(90%);
	top: 0;
	left: calc(5%);
}

.bss-slides figure{
/* these are the individual slides each containing an img and caption. They are positioned absolute at the top of the slideshow container,
so they will be stacked up like a deck of cards */
	position: absolute;
	top: 0;
	left: 0;
	height: calc(100%);
	width: calc(100%);
	margin: auto;
	padding: 0;
}


.bss-slides figure:first-child{
/* the very first slide is relatively positioned in order to give height to the container element */
	position: absolute;
}

.bss-slides figure img{
/* all slide images are made "invisible" with an opacity of 0, then we set the transition property so that later when we change it,
it transitions over 1.2 seconds for a fade in/out effect instead of changing instantly */   
	opacity: 0;
	transition: opacity 0.8s;
	z-index: 3;
}

.bss-slides .bss-show img{
/* this is for the currently visible slide it's the only one that shows, with full opacity */
	opacity: 1;
	z-index: 4;
}


.bss-slides figcaption{
/* the caption is positioned absolutely near the bottom right of the slide, then we hide it with an opacity of 0,
and set the transition property just like with the img element above */
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 3px;
	color: #cccccc;
	background-color: #444444;
	opacity: 0;
	transition: opacity 0.8s;
}
.bss-slides .bss-show figcaption{
/* this is for the currently visible slide caption it's the only one that shows, with full opacity, just like the current img.
The caption also has a z-index of 5 to ensure it always appears above the img */
	z-index: 5;
	opacity: 0.8;
}


.bss-next, .bss-prev{
/* for the next/prev buttons this positions them vertically in the middle of the slides, with a z-index to ensure they appear over the slides, an opacity of .5 
so they are semi-transparent by default, and the user-select none is so they don't accidentally get highlighted when clicking on them */
	position: absolute;
	padding: 20px 8px;
	background: #c0c0c0;
	top: 50%;
	z-index: 5;
	opacity: .5;
	user-select: none;
}

.bss-next:hover, .bss-prev:hover{
/*give the buttons a pointer/hand cursor and highlight them with full opacity when hovering*/
	cursor: pointer;
	opacity: 1;
}

.bss-next{
/*position 'next' button at right*/
	right: 0;
}

.bss-prev{
/*position 'previous' button at left*/
	left: 0;
}