html {margin: 0; padding: 0;}
/* setting border: 0 hoses ie6 win window inner well border */
body {margin: 0; padding: 0; font: 400 16px/22px arial,sans-serif; background-color: #fff;}
/* setting border: 0 hoses ie5 win window inner well border */

form {margin: 0; padding: 0;}

h1, h2, h3, h4 {font-weight: normal;}
h3, h4, ol, ul, pre, blockquote {margin-top: 10px; margin-bottom: 10px;}
/* h1 {margin-top: 2px; color: #000; font-size: 14px; font-weight: bold; margin-left: 8px; 
letter-spacing: -1px; word-spacing: 2px; margin-bottom: 0px; padding-bottom: 0px;} */
/* below id is to avoid using h1 tag on other pages except main index */
#h1-1 {float: left; font-size: 14px; line-height: 14px; font-weight: bold; margin: 10px 0 0 0; padding: 0px; text-align: left; text-transform: uppercase;}
/* h2 {margin-top: 3px; margin-bottom: 5px; padding-top: 0px; padding-bottom: 0px; font: normal 14pt arial;} */
h5 {margin-top: 15px; margin-bottom: 10px; font: 700 12px 'Open Sans',sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #ff3333;}

h6 {margin-top: 25px; margin-bottom: 0px; font: normal 13pt arial; background-color: #f5f5f5; padding: 2px; }

a {color: #222; text-decoration: none}
a:hover {color: #ff3333;}
a img {border: 0;}
h1 a, #h1-1 a {color: #ff3333; text-decoration: none;}
h1 a:hover, #h1-1 a:hover {color: #000;}

.clr {clear: both; overflow: hidden; width: 1px; height: 1px; margin: 0 -1px -1px 0; border: 0; padding: 0; font-size: 0; line-height: 0;}

/* center page on ie */
body {text-align: center;} 

/* center page on everything else */
#container {position: relative; margin: 0 auto; width: 970px; text-align: left;  background-color: #fff; border: solid 0px #ccc; padding-top: 0px; padding-bottom; 15px;}

/* ---- header structure ---- */
#header-outer {width: 100%; height: 68px; margin: 0px auto; padding: 0px; 
/* background: url('mhd-bgrnd.png') repeat right top; */}
#header-inner {position: relative; width: 970px; height: 67px; margin: 0px auto; padding-top: 5px;}
#header {float: left; position: relative;  margin: 0px; width: 600px;}
#header img {float: left; margin-right: 190px; /* margin-right: 220px; */}

#header h1 {font: 700 13px 'Open Sans',sans-serif; letter-spacing: 1px; margin: 10px 0 0 0; padding: 0px; text-transform: uppercase;}


#topmenu {float: right; text-align: right; position: relative; width: 230px; font-size: 14px; font-weight: bold; line-height: 14px; text-transform: uppercase; margin: 10px 0 0 0; padding: 0px;}
#topmenu a {color: #ff3333; text-decoration: none;}
#topmenu a:hover {color: #000;}

#bottommenu {position: relative; width: 100%; border-top: solid 1px #ddd; border-bottom: solid 0px #ddd; word-spacing: 2em; font-size: 13px; font-weight: bold; line-height: 3em; margin-bottom: 20px;}

#banner {position: relative; width: 100%;}
#banner-img {float: left;}

#sitemenu {position: relative; width: 970px; padding: 0px; font: 700 11px 'Open Sans',sans-serif; text-transform: uppercase; margin: 15px 0 0 0; min-height: 64px; height: auto; border-left: solid 1px #ddd;}
#sitemenu ul {width: 970px; margin: 0; padding: 0; list-style: none;}
#sitemenu ul li {display: inline; margin: -1px 0 0 0; padding: 0px; float: left; width: 137px; text-align: center;
border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; border-top: solid 1px #ddd;}
#sitemenu a {color: #F33; display: block; width: 100%; padding: 8px 0 8px 0; text-decoration: none;}
#sitemenu a:hover {color: #fff; background-color: #F33; border-left: solid 1px #ddd;}


/* ---- main layout ---- */
#center {float: right; overflow: hidden; width: 630px;}
#left {float: left; width: 300px; margin-bottom: 30px; padding-right: 40px;}

#center h1 {font: 700 24px/1.5em 'Open Sans',sans-serif; letter-spacing: 2px; margin: 0 0 30px 0; padding: 0px; text-transform: uppercase; color: #111; text-align: center;}


#entry {position: relative; background-color: #fff; padding: 0px; border-bottom: solid 40px #fff; margin-bottom: 0px;}
#entry img {margin: 0px;}
#entry h1 {margin-top: 0px; margin-bottom: 15px; padding-top: 0px; font: 400 28px/32px "Open Sans",sans-serif; text-transform: none;}

#entry h3 {margin-top: 3px; margin-bottom: 5px; padding-top: 0px; padding-bottom: 0px; font: normal 14pt arial;}
#entry p {text-align: justify;}
#entry p a {color: #999; text-decoration: underline;}
#entry p a:hover {color: #ff3333; text-decoration: underline;}

#entry-header {height: 100%; margin: 0px; padding: 10px 10px 0 10px; background-color: rgb(248, 248, 248); 
/* opacity: 0.6; filter: alpha(opacity=60); z-index: 2; */ }
/*
#entry-header.wide {}
#entry-header.short {width: 580px;}
*/

#entry-header h2 {margin-top: 0px; margin: 15px 0; padding-top: 0px; font: 400 24px/30px "Open Sans",sans-serif; text-transform: none; width: 100%;}

/* h2 {margin-top: 3px; margin-bottom: 5px; padding-top: 0px; padding-bottom: 0px; font: 400 24px 'Open Sans',sans-serif; word-spacing: 3px; padding: 0px; margin: 0 0 10px 0; color: #111; width: 100%; text-transform: uppercase; padding-top: 2px;}
*/

#entry-header h3 {font: bold 16pt/20pt arial; margin: 0 0 5px 0; text-transform: uppercase;}
#entry-header p {margin: 0 0 10px 0; padding: 0px; color: rgb(148, 148, 148); font: 400 18px/24px arial,sans-serif; width: 100%;}

#entry-header p.p-readmore {width: 25% !important;}
#entry-header p.p-readmore a {color: #ff3333; text-decoration: none;}
#entry-header p.p-dte {font-size: 12px; text-transform: uppercase; width: 45% !important; text-align: center;}
#entry-header p.p-dte a {color: rgb(153, 153, 153); text-decoration: none;}
#entry-header p.p-readmore a:hover {color: #111;}
#entry-header p.p-dte a:hover {color: #ff3333;}
/* #entry:hover > #entry-header {z-index: -1;} */

/* assetylene is a custom asset markup plugin, this class is used in Asset Insertion module */
.assetylene-img {margin: 10px 0 10px 0;}

#cat-ul {margin: 30px 0 30px 0; width: 300px; color: #000; font-size: 0.9em;}
#cat-ul a {color: #555;}
#cat-ul a:hover {color: red;}
#cat-ul ul {padding: 0; margin: 0; display: inline; width: 30em;}
#cat-ul ul li {line-height: 150%; margin: 0; list-style-type: none; list-style-position: outside; display: inline; margin: 0px; float: left; width: 150px; padding: 0px; text-transform: none;} 
#cat-ul br {clear: left;}

#recent-ul {margin-bottom: 30px; font-size: 0.9em; line-height: 150%;}
#recent-li {list-style-position: outside; margin-left: -25px;}
#recent-ul a {color: #555;}
#recent-ul a:hover {color: red;}
#recent-ul ul li {line-height: 150%;}

.content-nav {margin: 5px 0 10px; text-align: center;}
.content-nav a {font: normal 12px arial; padding: 1px 5px; color: #ff3333 !important; margin: 2px; border: solid 1px #ff3333 !important;}
.content-nav ul li a:hover,.content-nav ul li a:active {color: #fff !important;background-color: #ff3333 !important;}
.content-nav ul li.prev a:hover,.content-nav ul.prev li a:active,.content-nav ul li.next a:hover,.content-nav ul.next li a:active {background-color: #fff !important;}
.hidden { display: none; }

.p-readmore {float: left; font: 700 18px/18px 'Open Sans',sans-serif !important; text-transform: uppercase; width: 25%;}
.p-readmore a {text-decoration: none !important; color: #ff3333 !important;}
.p-dte {float: left; color: #a8a8a8; width: 40%; text-align: center !important;}
/* .p-next-prev {font: bold 14pt/46pt arial; background-color: #fff; padding: 16pt 0; margin-bottom: 25px;} */

.p-next-prev {background-color: #f5f5f5; padding: 12px; margin-bottom: 45px;}
.paginate {font: 700 16px 'Open Sans',sans-serif; letter-spacing: 3px; text-transform: uppercase;}



#cmnt-shown {margin-top: 20px; margin-bottom: 20px; height: auto;}
#cmnt {background-color: #f5f5f5; padding: 15px; border-top: solid 1px #ddd;}
#cmnt-body {margin-bottom: 10px; border-top: solid 1px #ddd;}
.cmnt-field {border: 1px solid #ddd; margin-bottom: 3px; font-family: arial, verdana; font-size: 12px;}


#social-buttons {margin: 15px 0 0 0; width: 100%; padding: 0px;}
#social-buttons ul {margin: 0px; padding: 0px;}
#social-buttons ul li {display: inline-block; *display: inline; zoom: 1; padding: 0px; vertical-align: top; list-style: none outside none; margin: 0 20px 0 0;}

#social-buttons-index {margin: 0px; padding: 0px; width: 30%; float: right; text-align: right;}
#social-buttons-index ul {margin: 0px 0 0 0; padding: 0px;}
#social-buttons-index ul li {display: inline-block; *display: inline; zoom: 1; padding: 0px; vertical-align: middle; list-style: none outside none; margin: 0px;}

/* prev next header nav */
.prev,.next {position: fixed;top: 250px;z-index: 9999;}
.prev a,.next a {padding: 0 !important;margin: 0 !important;width: 37px;height: 68px;display: block;text-indent: -999em;background: url('/images/nav.png') no-repeat top left;background-color: #fff !important;border: none !important;z-index: 9999 !important;}
.prev {left: 0px;}
.prev a:hover {background-position: bottom left;}
.next {right: 0px;}
.next a {background-position: top right;}
.next a:hover {background-position: bottom right;}

/* entry response */
#entry-response h1 {margin-top: 3px; margin-bottom: 5px; padding-top: 0px; padding-bottom: 0px; font: normal 14pt arial;}
#entry-response p {clear: both; margin: 0; padding: 10px 0;}

/* this line makes regular google earch box look better */
.gsearch {width: 290px; padding: 5px !important; background-position: 10px 6px !important;}

/* two google ads between posts */
#center-ad {text-align: center; margin: 0 0 40px 0;}

/* responsive menu hidden button */
#responsive-menu-button {display: none;
position: absolute;
right: 5px;
top: 5px;
margin: 0px;
border-radius: 2px;
height: 35px;
width: 40px;
cursor: pointer;
}


/* -------------------- */
/* Mobile Responsivness */
/* -------------------- */

/* fallback settings for screen ge=970 with 20 pix cushion */
@media screen and (min-width: 990px) {
#container {width: 970px;}
#center (width: 630px;)
#entry (width: 100%;)
#entry img {width: 630px;}
#sitemenu (width: 970px;)
#header-inner {970px;}
#left {width: 300px; padding-right: 40px;}
#bottommenu (width: 100%;)
#responsive-menu-button {display: none;}
}

/* when lt=970 start changing/resizing layout */
@media screen and (min-width: 709px) and (max-width: 989px) {
#cat-ul ul li, #recent-ul ul li {height: 50px;}
#left {width: 300px; padding-right: 40px;} /* preserving left col */
#center {width: calc(100% - 345px);} /* preserving left col */
#container, #entry, #entry img, #sitemenu, #sitemenu ul, #header-inner, #header, #entry img {width: calc(100% - 8px); height: auto; position: relative;}
#entry-header.wide {width: calc(100% - 28px);}
#entry-header.short {width: calc(100% - 28px);}
#container {margin: 0px; margin-left: 8px;}
#header-inner {margin: 0px; margin-left: 8px;}
#header {margin-bottom: 20px;}
#topmenu {float: none; width: 100%; padding: 20px 0; text-align: left;}
.content-nav ul li a {padding: 5px !important;}
.content-nav ul li {float: left; margin: 10px 10px 20px 10px !important;}
p.p-readmore, p.p-dte {width: 50%; margin-top: 15px !important;}
#social-buttons-index {display: none;}
#responsive-menu-button {display: block; z-index: 2 !important;}
#sitemenu {position: absolute; left: -999em; z-index: 10000 !important; width: 137px; padding: 0px; font: 700 12px arial; text-transform: uppercase;  min-height: 64px; height: auto; border-left: solid 1px #ddd; border-right: solid 1px #ddd; border-top: solid 1px #ddd; background-color: #fff;}
#sitemenu ul {width: 100%; margin: 0; padding: 0; list-style: none;}
#sitemenu ul li {display: block; margin: -1px 0 0 0; padding: 0px; width: 137px; text-align: center; 
border-bottom: solid 1px #ddd;}
#sitemenu a {display: block; width: 100%; padding: 12px 0;}
#sitemenu a:hover {color: #fff; background-color: #F33;}
#sitemenu:hover {display: block !important; position: absolute; top: 28px; left: calc(100% - 145px); z-index: 10000 !important;}
#responsive-menu-button:hover + #sitemenu {display: block !important; position: absolute; top: 28px; left: calc(100% - 145px); z-index: 1 !important;}
}

@media screen and (max-width: 708px) {
#cat-ul ul li, #recent-ul ul li {height: 50px;}
#container, #center, #entry, #entry img, #sitemenu, #sitemenu ul, #header-inner, #header, #left, #local-ad, #local-ad img, .gsearch, #left-top-ad, #center-ad {width: calc(100% - 8px); height: auto; position: relative;}
#entry-header.wide {width: calc(100% - 28px);}
#entry-header.short {width: calc(100% - 28px);}
#container {margin: 0px; margin-left: 8px;}
#center {float: none;}
#header-inner {margin: 0px; margin-left: 8px;}
#header {margin-bottom: 20px;}
#header h1 {display: none;}
#topmenu {float: none; width: 100%; padding: 20px 0; text-align: left;}
.content-nav ul li a {padding: 2px !important;}
#left {padding-right: 0px !important;}
#cat-ul {width: 100%;}
#cat-ul ul li {float: none; width: 100%;}
.gsearch {padding: 5px 0 5px 0 !important;}
#left-top-ad, #center-ad {overflow: hidden;}
#local-ad img {max-width: 300px;}
.content-nav ul li a {padding: 5px !important;}
.content-nav ul li {float: left; margin: 10px 10px 20px 10px !important;}
p.p-dte {display: none;}
p.p-readmore {width: 100%; margin-top: 15px !important;}
#social-buttons-index {display: none;}
#responsive-menu-button {display: block; z-index: 1 !important;}
#sitemenu {position: absolute; left: -999em; z-index: 10000 !important; width: 137px; padding: 0px; font: 700 12px arial; text-transform: uppercase;  min-height: 64px; height: auto; border-left: solid 1px #ddd; border-right: solid 1px #ddd; border-top: solid 1px #ddd; background-color: #fff;}
#sitemenu ul {width: 100%; margin: 0; padding: 0; list-style: none;}
#sitemenu ul li {display: block; margin: -1px 0 0 0; padding: 0px; width: 137px; text-align: center; 
border-bottom: solid 1px #ddd;}
#sitemenu a {display: block; width: 100%; padding: 12px 0;}
#sitemenu a:hover {color: #fff; background-color: #F33;}
#sitemenu:hover {display: block !important; position: absolute; top: 28px; left: calc(100% - 145px); z-index: 10000 !important;}
#responsive-menu-button:hover + #sitemenu {display: block !important; position: absolute; top: 28px; left: calc(100% - 145px); z-index: 1 !important;}
}