* {
	margin: 0;
	padding: 0;
}

body {
	background: url(images/bg.jpg) repeat-x;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	line-height: 17px;
	color: #585858;
	text-align: left;
	font-style: normal;
}

a {
	text-decoration: none;
	color: #000000;
}
a:hover {
text-decoration: underline;
color: #111;
}



	.wrap {
	margin: 0 auto;
	width: 890px;
	padding: 5px 10px 5px 10px;
	/*background-color: #F0F0F0;
	/* outer shadows  (note the rgba is red, green, blue, alpha) 
	-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 3px 3px 4px rgba(23, 69, 88, .5);
	box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers 
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* IE 8 
 : progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');/* IE 5.5 - 7 */ 
	background-image: url(images/bg_910.jpg);
	background-repeat: repeat-y;
}


 /* Shared styles */

        .drop-shadow {
            position:relative;
            float:left;
            width:100%;
            padding:0em;
            margin:0em 2px 0em;

            -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
               -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
                    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
        }

        .drop-shadow:before,
        .drop-shadow:after {
            content:"";
            position:absolute;
            z-index:-2;
			
        }

       /* .drop-shadow p {
	font-size: 12px;
	font-weight: normal;
	text-align: left;
        }*/

        /* Lifted corners */

        .lifted {
            -moz-border-radius:4px;
                 border-radius:4px;
        }

        .lifted:before,
        .lifted:after {
            bottom:15px;
            left:10px;
            width:50%;
            height:20%;
            max-width:300px;
            max-height:100px;
            -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
               -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
                    box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            -webkit-transform:rotate(-3deg);
               -moz-transform:rotate(-3deg);
                -ms-transform:rotate(-3deg);
                 -o-transform:rotate(-3deg);
                    transform:rotate(-3deg);
        }

        .lifted:after {
            right:10px;
            left:auto;
            -webkit-transform:rotate(3deg);
               -moz-transform:rotate(3deg);
                -ms-transform:rotate(3deg);
                 -o-transform:rotate(3deg);
                    transform:rotate(3deg);
        }



#header {
	height: 120px;
	/*background: url(images/header.jpg) no-repeat;*/
	text-align: center;
	font-style: normal;
	/*background-color: #F0F0F0;*/
}
#header h1 {
	font-size: 22px;
	letter-spacing: -1px;
	padding: 5px 0 0 0;
	color: #585858;
	font-style: normal;
	font-weight: lighter;
}
#header h1 a {
	color: #585858;
	text-decoration: none;
	font-weight: 100;
	letter-spacing: -2px;
}

#header h2 {
font-size: 18px;
color: #fff;
padding: 3px 40px 0 0;
letter-spacing: -1px;
font-weight: 100;
font-style: normal;
font-weight: lighter;
}

#header h4 {
	color: #585858;
	font-style: normal;
	font-weight: lighter;
}

.browse_category  {
	width: 130px;
}

.bar {
	font-size: 11px;
	height: 30px;
	}

	.bar ul{
	list-style:none;
	margin:0;
	padding:0;
	}

	.bar li {
	padding: 6px 12px 6px 12px;
	float: left;
	color: #86C1C9;
	}
	
	.bar li.active {
	color: #86C1C9;
	font-weight: bold;
	}
	
	.bar li a {
	//font-weight: bold;
	color: #86C1C9;
	text-decoration: none;
	} 

#banner {
	height: 297px;
	text-align: center;
	font-style: normal;
		/* outer shadows  (note the rgba is red, green, blue, alpha) 
	-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 3px 3px 4px rgba(23, 69, 88, .5);
	box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers 
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* IE 8 
 : progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');/* IE 5.5 - 7 */ 

}

#banner h2 {
font-size: 18px;
color: #585858;
font-weight: 100;
font-style: normal;
font-weight: lighter;
}

#banner hr {
	display: block;
	position: relative;
	padding: 0;
	margin: 8px auto;
	height: 0;
	width: 80%;
	max-height: 0;
	font-size: 1px;
	line-height: 0;
	clear: both;
	border: none;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #ffffff;
}

#bannerbottom2 {
	height: 50px;
	text-align: center;
	font-style: normal;
}

#bannerbottom2 hr {
	display: block;
	position: relative;
	padding: 0;
	margin: 8px auto;
	height: 0;
	width: 80%;
	max-height: 0;
	font-size: 1px;
	line-height: 0;
	clear: both;
	border: none;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #ffffff;
}


#bannerbottom {
	height: 100px;
	text-align: center;
	font-style: normal;
}

#bannerbottom h2 {
font-size: 18px;
color: #585858;
font-weight: 100;
font-style: normal;
font-weight: lighter;
}

#bannerbottom hr {
	display: block;
	position: relative;
	padding: 0;
	margin: 8px auto;
	height: 0;
	width: 80%;
	max-height: 0;
	font-size: 1px;
	line-height: 0;
	clear: both;
	border: none;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #ffffff;
}


#content {
padding: 0 20px;
text-align: left;
}

.right {
	float: right;
	width: 300px;
	text-align: left;
	margin-right: 10px;
}
.right h2 {
font-size: 18px;
font-weight: 100;
height: 26px;
line-height: 26px;
}
.right h2 a {
text-decoration: none;

}
.right h2 a:hover {

}

.left {
float: left;
width: 500px;
font-size: 11px;
line-height: 17px;
font-family: Verdana, Geneva, sans-serif;

}
.left h2 {
	/*margin: 10px 0 0 0;*/
/*padding-left: 10px;*/
	height: 26px;
	line-height: 26px;
	color: #6DB5BE;
	font-size: 14px;
	font-style: italic;
}

.left ul {
	padding: 10px 0 15px 20px;
	color: #000000;
	list-style-type: none;
}
.left ul li a {
	text-decoration: none;
}
.left ul li a:hover {

}

.menu {
float: right;
width: 150px;

}
.menu h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 26px;
line-height: 26px;
color: #000;
font-size: 13px;
}

.menu p {
padding-left: 10px;
}
.menu ul {
padding: 10px 0 15px 20px;
color: #FD9A01;
list-style-type: none;
}
.menu ul li a {
text-decoration: none;
font-weight: 600;
}
.menu ul li a:hover {

}


#articles {
	padding: 10px;
	width: 600px;
}
#frontboxes {
	padding: 0px;
	width: 888px;
	height: 250px;
	float: left;
	background-color: #FFF;
	
	
	/* outer shadows  (note the rgba is red, green, blue, alpha) 
-webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4); 
-moz-box-shadow: 3px 3px 4px rgba(23, 69, 88, .5);
  box-shadow: 3px 3px 4px #999; /* Opera and other CSS3 supporting browsers 
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";/* IE 8 
 : progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');/* IE 5.5 - 7 */ 


/* -moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 3px 3px 4px rgba(23, 69, 88, .5;
box-shadow: 3px 3px 4px rgba(23, 69, 88, .5;
/* For IE 8 */
/* -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 
/* filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');*/
}



}


#bottom {
//background : url(images/bottom.jpg) no-repeat;
	padding: 10px 0 10px 0;
}

#footer {
	text-align: center;
	font-size: 11px;
	color: #FFFFFF;
	padding-bottom: 10px;
	font: bold;
	font-style: normal;
}
#footer a {
	color: #000000;
    font-size: 11px;
	color: #FFFFFF;
	font: bold;
	font-style: normal;
}
#footer a:hover { color: #111; }


/* Transparent menu */

#main-nav {
  /* I am not using this part as i have a repeating bg image for the whole page */
  /*background: #86C1C9; 
  background: -moz-linear-gradient(top, #86C1C9 0%, #547b00 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7dad16), color-stop(100%,#547b00));
  background: -webkit-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: -o-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: -ms-linear-gradient(top, #7dad16 0%,#547b00 100%);
  background: linear-gradient(top, #7dad16 0%,#547b00 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7dad16', endColorstr='#547b00',GradientType=0 );*/
  float: left;
  width: 890px;
  z-index: 1000;
  margin-left: auto;
  margin-right: auto;
}

#main-nav ul {
  font-family: 'Droid Sans', sans-serif;
  font-size: 11px;
  /*font-weight: bold;*/
  list-style: none;
}
#main-nav ul li {
	border-left: 1px solid #86C1C9;
	/*float: left;*/
  display: inline-block;
	
}
#main-nav ul li:first-child {
  border: none;
}
#main-nav ul li a {
	color: #458989; /* hover font color */
	display: block;
	padding: 1px; 
	position: relative;
	width: 107px;
	text-decoration: none;
	/*text-shadow: 0 1px 1px #9fc255;*/
}
#main-nav ul li a span.drop-down {
  background: url(images/down-arrow_green_10x7.png) no-repeat;
  height: 7px;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 10px;
}
#main-nav ul li:hover {
  background: #9CC;
}
/* First Level drop-down */
#main-nav ul li ul {
  display: none;
}
#main-nav ul li:hover ul {
	background: url(images/trans_blue-70.png); /* background transparency on dropdowen */
	display: block;
	font-size: 0.9em;
	font-weight: normal;
	padding: 1px;
	position: absolute;

}
#main-nav ul li ul li {
  float: none;
  display: block;
  border-left: none;
  position: relative;
}
#main-nav ul li ul li a {
	width: 135px;
	padding: 1px 1px; 
	border-top: dotted 1px #86C1C9;
	color: #458989; 
}

#main-nav li.active {
	color: #86C1C9;
	font-weight: bold;
	}
	
.logo, .branding {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: row wrap;
    padding-bottom: 1em;
}
.logo h1 {
	font-size: 22px;
	letter-spacing: -1px;
	padding: 5px 0 0 0;
	color: #585858;
	font-style: normal;
	font-weight: lighter;
	padding-right: 1em;
}
.branding h4 {
	color: #585858;
	font-style: normal;
	font-weight: lighter;
	margin-bottom: 1em;
}

.hrline {
	display: block;
	margin: 8px auto;
	height: 0;
	width: 80%;
	border: none;
	border-top: 1px solid #CCCCCC;
	border-bottom: 1px solid #ffffff;
	padding-top: 2em;
}

.bottom_banner{
	/*display: flex;
	justify-content: center;*/
	text-align: center;
	padding-top: 1em;
	padding-bottom: 1em;
}