/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ====================================
   Base styles: opinionated defaults
 ======================================= */
html,
button,
input,
select,
textarea {
  color: #222;
}

/* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3. */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/* this sets the default margins and paddings to 0 
   for all elements on page  */
* {
  margin:0px;
  padding:0px;
}

body {
	font-family: Arial, sans-serif, Optima;
  font-size: 1em;
  line-height: 1.4;  
	color: #000;
	background-color: #5D8AA8;
  /*background-image:url('./../images/bg023.jpg');*/
	margin-top: 1px;
	margin-bottom: 1px;
}

/* Content or Outer Wrapper */
.outer-wrapper {
  border:10px solid blue;   /* puts a border around the wrapper */
  background-color: #ffffff;
  margin: 0 auto;
  overflow: hidden;
  max-width:1024px;           
  min-width:320px;          /* sets the minmum with the page will colpase down to */
}

/* CSS used for HEADER DIV */
.masthead {
	padding: 0px;
	text-align: left;
	background-color: #FFFFFF;
  background-image: url(''); /* background image for header */
}
.masthead .banner {
	position: relative;
	z-index: 20;
	/* box-shadow: 0px 0px 20px #0A0E4E;   */
	text-align: center;
}
.masthead .banner img {
	height: auto !important;
	width: auto !important;
	max-width: 100%; /*Max-Width allows the image to scale with the page*/
}
/* END CSS used for HEADER DIV */

/* 
  ------------------------------------------------
  PVII CSS Page Builder Magic 2
  Copyright (c) 2013 Project Seven Development
  www.projectseven.com
  05: 2 Col Flex Sidebar Left, Top Menu
  ------------------------------------------------
*/


.columns-wrapper {
	overflow: hidden;
	background-color: #FFFFFF;
}

/* has a main content column and a sidebar column */
/* the mail content column can be one either the left or right side */
/* of the page the changing the float to either left or right. */
.main-content {
	float: left;
	width: 66%;
}

.main-content .content {
	padding: 10px;
	font-size: 1.3em;
	line-height: 1.5em;
	border-left: 0px solid #000000;
}

.sidebar {
	width: 33%;
  padding-top: 10px;
	float: right;  
}
.sidebar .content {
	padding: 10px;
	font-size: .85em;
	line-height: 1.5em;
	background-color: #D8D8D8;
	background-image: -webkit-linear-gradient(#FFF, #AAA);
	background-image: linear-gradient(#FFF, #AAA);
}
/* end */


/* has one main column that can contain several columns if they all float left */
.inter-wrapper-single {
	background-color: #FFFFFF;
  background-image: url('');
 	float: left;
	width: 100%;
  padding-left: 1px;
  padding-right: 1px;
  font-size: 1.3em;
}
/* end */


img {
	vertical-align: bottom;
	border: 0px;
	text-decoration:none;
}



/* ***** Standard HREF links ***** */
a {
  color: blue;
  font-family:sans-serif, verdana, arial, helvetica;
  font-weight: 700;
  text-decoration: none;
}
a:link {
  background: transparent; 
  color:blue;
}
a :visited {
  color: blue; 
}
a:hover {
  text-decoration: none;
  color:red;
}


/* Styles for heading tags  */
h4 {
	padding: 3px;
	color: #0F156B;
	background-color: inherit;
	font-size: .9em;
}
h3 {
	padding: 3px;
	color: #0F156B;
	background-color: inherit;
	font-size: .9em;
}
h2 {
	padding: 3px;
	color: #0F156B;
	background-color: inherit;
	font-size: 1em;
}
h1 {
	padding: 3px;
	color: #0F156B;
	background-color: inherit;
	font-size: 1.5em;	
}


/* class's used */
.center {
	text-align: center;
}
/* float image to the right side of screen */
.imgrgt {
	float: right;
	padding: 7px;
}
/* float image to the left side of screen */
.imglft {
	float: left;
	padding: 7px;
}
/* centers a div based on max-width of div */
.divctr {
	margin-right: auto;
	margin-left: auto;
}

/*Make Image Scalable - Assign this class to any image to make it scale with the browser window size*/
img.scalable {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
}

.sl_search_box {
	margin: 10px auto;
	text-align:center;
}

.sl_search_box input {
	border: 1px black solid;
}

.sl_search_box p {
	font-size:small;
	font-weight:bold;
}
.sl_search_box input:focus {
	border: 1px red solid;
}

.important {
	padding: 5px;
	border: 2px dashed #990000;
	background-color: #F5E6E6;
}
.sidebar ul, .sidebar ol, .sidebar2 ul, .sidebar2 ol {
	margin: 0 0 0 .5em;
	padding: 0 0 0 .5em;
	line-height: normal;
}
.sidebar li, .sidebar2 li { 
	margin-bottom: 4px; 
}

/* ===========content area list items==============*/
.main-content .content ul li {
	list-style-image: url('../images/bullet_red.gif');
	margin: 2px;
	padding: 2px;
}
.main-content .content li li {
	list-style-image: url('images/red-bullet-sm.gif');
	padding: 2px 0;
}

/*==============
all site links
==============*/

img a {
	text-decoration:none;
}


/*==============================
The Sidebar Menu UL.
=============================== */
.headerbar {
	font-size: 1.35em;
	margin: 0px 0px 10px 0px;
	font-weight: normal;
	text-align: center;
	color: #260F01;
}
ul.menuside {
	margin: 0;
	padding: 0;
}
ul.menuside li {
	list-style-type: none;
	margin-bottom: 5px;
}
ul.menuside a {
	display: block;
	color: #ffffff;
	text-decoration: none;
	padding: 12px 12px;
	font-size: .95em;
	font-weight: 800;
	border: 1px solid;
	background-color: #667094;
	box-shadow: inset 0px 16px 2px rgba(255,255,255,.05), 0px 0px 5px rgba(0,0,0,.5);
	border-color: #FFF;
	-webkit-transition: all linear .35s .1s;
	transition: all linear .35s .1s;
	border-radius: 5px;
}
ul.menuside a:hover, ul.menuside a:focus {
	color: #FFFFFF;
	background-color: #983A03;
	background-color: rgb(0, 0, 102);
	outline: 0;
}


/*================== general styles =================*/
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/* ================== used to zoom a smaller image to larger image ibside a div ====*/
/* ================== usa <div class="zoom_img"> ====*/
.zoom_img img{
margin:0px;
height:100px;
width:100px;
-moz-transition:-moz-transform 0.5s ease-in; 
-webkit-transition:-webkit-transform 0.5s ease-in; 
-o-transition:-o-transform 0.5s ease-in;
}
.zoom_img img:hover{
-moz-transform:scale(2); 
-webkit-transform:scale(2);
-o-transform:scale(2);
}




/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 699px) {
ul.menutop {display: block;}
.menutop li {
	display: block;
	float: none;
	margin-right: 0px;
	margin-bottom: 5px;
}

.sidebar, .main-content {
	width: auto !important;
	float: none !important;
	position: static !important;
}

.content {
	padding: 10px 10px !important;
	border: none !important;
	height: auto !important;
	max-height: 888678px;
}

/*
table {
 overflow-x: auto;
 display: block; 
}
*/
  
}


/*Medium windows - reduce padding content padding
@media only screen and (min-width: 640px) and (max-width: 980px) {
.content {
	padding: 10px 10px !important;
}
  
}
*/
/*Medium windows - reduce padding content padding*/

@media only screen and (min-width: 700px) and (max-width: 900px) {
.content {
	padding: 10px 10px !important;
}
}