html {
     overflow: -moz-scrollbars-vertical;
     overflow: scroll;
}



body {

	#background-image: url("img/bg2.png");
	background-color: #234567;
	#color: #000365;
	color: #000000;
	font-size: 87.5%;/*from 14pt*/
	font-family: Arial, "Lucida Sans Unicode";
	line-height: 1.33;
	text-align: left;
}

.topcontent iframe {
	width: 425px;
	height: 350px; 
	#frameborder:0;
	#scrolling: no; 
	#marginheight:0; 
	#marginwidth:0; 
}

h2 {
        color: #CF5C3F;
}

span.centerImage {
     text-align: center;
}


a {

	text-decoration: none;
	
}

.diy-slideshow{
position: relative;
display: block;
overflow: hidden;
}
figure{
position: absolute;
opacity: 0;
transition: 1s opacity;
}
figcaption{
position: absolute;
font-family: sans-serif;
font-size: .8em;
bottom: .75em;
right: .35em;
padding: .25em;
color: #fff;
background: rgba(0,0,0, .25);
border-radius: 2px;
}
figcaption a{
color: #fff;
}
figure.show{
opacity: 1;
position: static;
transition: 1s opacity;
}
.next, .prev{
color: #fff;
position: absolute;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 1;
font-size: 2em;
margin-top: -.75em;
opacity: .3;
user-select: none;
}
.next:hover, .prev:hover{
cursor: pointer;
opacity: 1;
}
.next{
right: 0;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
 

a:link, a:visited {
	color: #CF5C3F;
}

a:hover, a:active {
	background-color: #CF5C3F;
	color: #FFF;
}

.body {
	margin: 0 auto;
	width: 70%;
	clear: both; /*no floating*/

}

.article_img {
  float:left;
}

.topHeader {
        width: 100%;
        height:100px;
	/*height:auto;*/
        float: left;
        /*background-color: #699996;*/
	display: inline;
	padding: 0 0;	
}

.topHeader p {
        margin-top: 60px ;
	margin-right: 0.5%;
	#color: #666666;
	color: #FFF;
	font-size: 20pt;
	font-style: bold;
        float: right; /*horizontal instead vertical*/
        display: inline;
}



.topHeader img {
	height: 100px;
	float: left; /*so that sidebar can push it*/
}


.mainHeader {
        /*width: 100%;*/
        /*height:150px;*/
        /*float: left;*/
        /*background-color: #699996;*/
        /*display: inline;*/
        /*padding: 0 0;*/
}


.mainHeader nav {
	width:100%;
	margin-top: 1%;
	margin-bottom: 2%;
	float: left;
	background-color: #666;
	height: 40px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.mainHeader nav ul {
	list-style: none;
	margin: 0 auto;
}

.mainHeader nav ul li {
	float: left; /*horizontal instead vertical*/
	display: inline;
}

.mainHeader nav a:link, .mainHeader nav a:visited {
	color: #FFF;
	display: inline-block;
	padding: 10px 25px;
	height: 20px;
}
.mainHeader nav a:hover, mainHeader nav a:active,	
.mainHeader nav .active a:link, .mainHeader nav .active a:visited {
	background-color: #CF5C3F;
	text-shadow: none;
}

.mainHeader nav ul li a {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.mainContent {
	margin-top: 2%;
	line-height: 1.33;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	/*overflow: hidden;*/
}

.content {
	width:70%;
	float: left; /*so that sidebar can push it*/
	/*position:relative;*/
} 

.fullcontent {
        width:100%;
        float: left; /*so that sidebar can push it*/
        /*position:relative;*/
}



.topcontent {

	overflow:hidden;
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%; /*inside the box*/
	/*margin-top: 2%; between boxes*/
}

.topcontent content p {
        #margin-top: 60px ;
        #margin-right: 0.5%;
        #color: #330088;
        #font-size: 20pt;
        #font-style: bold;
        #float: right; /*horizontal instead vertical*/
        #display: inline;
}


.topcontent content p img {
        
	padding-right: 3%;
        float: left; /*so that sidebar can push it*/
}

.middlecontent content p {
        #margin-top: 60px ;
        #margin-right: 0.5%;
        #color: #330088;
        #font-size: 20pt;
        #font-style: bold;
        #float: right; /*horizontal instead vertical*/
        #display: inline;
}


.middlecontent content p img {
        
	padding-right: 3%;
        float: left; /*so that sidebar can push it*/
}

.middlecontent {

	overflow:hidden;
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%; /*inside the box*/
	margin-top: 2%; 
}

.bottomcontent {

	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	padding: 3% 5%; /*inside the box*/
	margin-top: 2%; /*between boxes*/
}

 
.bottomcontent a:hover {
    /*background-color:#FFF;*/
	text-decoration:none;

}
 

.bottomcontent img {
	height: 30px;
	width: 30px;
        /* float: left; so that sidebar can push it*/
	margin-right:10px;
	margin-left:0px;

}

.post-info {
	font-style: italic;
	color: #999;
	font-size: 85%;
}

.mainSidebar {
	line-height: 1.33;
	margin-top: 2%;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	/*overflow: hidden;*/
}

.sidebar {
	width: 30%;
	float: left;

}

.top-sidebar {
	
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-left: 3%;
	margin-bottom: 2%;
	/*margin-top: 2%;*/
	padding: 2% 3%; /*inside the box*/
        overflow: hidden;
}

.top-sidebar article p {

	display:block;
	#display:inline;
}

.top-sidebar article p div  {
     #display: block;
     #text-align: center;
	 #margin: 0 auto;
	 position: relative;
	 #justify-content: center;
	 #color: #999444;
}


.top-sidebar article p img {
        
	padding-right: 3%;
        float: left; /*so that sidebar can push it*/
}

.middle-sidebar {
	 
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-left: 3%;
	margin-bottom: 2%;
	padding: 2% 3%; /*inside the box*/
}

.bottom-sidebar {
	 
	background-color: #FFF;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-left: 3%;
	/* margin-bottom: 2%; between boxes*/
	padding: 2% 3%; /*inside the box*/
}



.bottom-sidebar a:hover {
        background-color:#FFF;
	text-decoration:none;
        /* float: left; so that sidebar can push it*/
        /* margin-right:10px; */
        /*margin-left:10px;*/

}


.mainFooter {
	width: 100%;
	height: 40px;
	float: left;
	background-color: #666;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-top: 2%;
	margin-bottom: 2%;
}

.mainFooter p {
	/*width: 92%;*/
	margin: 10px 4%;
	color: #FFF;
	float: left; /*horizontal instead vertical*/
	display: inline;
  
}

@media only screen and (min-width: 150px) and (max-width: 600px)
{

	.body {
		font-size: 95%;
		width: 90%;
	}

	/*.imageContainer { text-align: center; }*/
	
        .topHeader {
               text-align: center; 
                height: auto;
	/*margin-top: 0 ;
        margin-right: 0;
	*/
        }  

	.topHeader img {
		width: 50%;
		height: auto;
		float: none;
		clear:both;
		display:inline;
	}

	.topHeader p {
		margin: 0 0;
               	float:none;
		clear:both;
		display:block;
        }


	.mainHeader nav {
		height: 240px;
	}

	.mainHeader nav ul {
		padding-left: 0;	
	}

	.mainHeader nav ul li {
		width: 100%;
		text-align: center;
	}

	.mainHeader nav a:link, .mainHeader nav a:visited {
		
		padding: 10px 25px;
		height: 20px;
		display: block;
	}


	.content {
		width: 100%;
		float: left; /*so that sidebar can push it*/
		margin-top: 2%;
	}

	.sidebar {
		width: 100%;
		float: left;
		margin-top: 2%;
	}


	.post-info {
	
		display: none;
	}

	.topcontent {

		background-color: #FFF;
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		padding: 3% 5%; /*inside the box*/
		margin-top: 2%; /*between boxes*/
		margin-bottom: 4%
	}

.topcontent iframe {
        width: 100%;
        height: 350px;
}



	.bottomcontent {
		margin-top: 3%; /*between boxes*/
	}

.top-sidebar {
	width: 94%;
	margin-bottom: 2%;
	margin-top: 2%;
	margin-left: 0;
	padding: 2% 3%; /*inside the box*/
}


.middle-sidebar {
	width: 94%;
	margin-bottom: 2%;
	margin-top: 2%;
	margin-left: 0;
	padding: 2% 3%; /*inside the box*/
}

.bottom-sidebar {
	width: 94%;
	margin-bottom: 2%;
	margin-top: 2%;
	margin-left: 0;
	padding: 2% 3%; /*inside the box*/
}

.mainFooter {
	width: 100%;
	float: left;
	background-color: #666;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-top: 2%;

}

}