@import url("reset.css");

/* ---------- General styles ---------- */
body { font-family:Arial; font-size:12px; color:#333333; }
.clear { clear:both}
a {text-decoration:none; color:#333;}
p { line-height:1.5em;}

#wrapper { width:880px; height:auto; margin:auto}
#header { width:100%; font-size:11px;}
#center { width:100%}
#footer { width:100%}
.main { width:560px; height:auto; float:left}
.sidebar { width:275px; float:left; margin:13px 0 0 25px;} 
.copyright { text-align:center; color:#333; padding:5px 0 30px 0; font-size:11px;}

/* ---------- Header ---------- */
.logo { float:left; padding:18px 0 0 10px;}
.logo-ico { float:left}
.logo-text { float:left; padding:0 0 0 10px;}
.logo-text p { padding:5px 0 0 0;}
.logo-beta { float:left; margin:-5px 0 0 10px;}
.lr { float:right; padding:35px 70px 0 0;}
.lr a { color:#000; text-decoration:none}
.lr a:hover { color:#020085;}

/* ---------- Top Navigation ---------- */
.topnav { width:100%; height:60px; background:#333333; -moz-border-radius: 10px; -webkit-border-radius: 10px; z-index:2; position:relative}
.navigation { font-size:18px; color:#fff; float:left }
.navigation li {display:inline; line-height:60px;} 
.navigation li a { color:#fff; padding:20px 40px; }
.navigation li a:hover {background:url(../images/up-arrow.gif) no-repeat bottom center; color:#009BFF;}
.navigation li a.active {background:url(../images/up-arrow.gif) no-repeat bottom center; color:#009BFF;}
.search { float:right; padding:14px 17px 0 0; }
.search #search-inp { width:234px; height:24px; float:left; padding:8px 6px 0 6px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border:none; font-size:14px; font-weight:bold; font-family:Arial;}
.search #go { width:39px; height:32px; float:left; background:url(../images/go.png) no-repeat; border:none; overflow:hidden; cursor:pointer}
.search #go:hover { background-position: 0 -32px;}
/* ---------- Gray area under navigation ---------- */
.gray { min-height:220px; background:#ececec; -moz-border-radius-bottomleft: 10px; -webkit-border-radius-left-radius: 10px;-moz-border-radius-bottomright: 10px; -webkit-border-radius-right-radius: 10px; margin:-5px 0 0 0; position:relative; z-index:1; }
.gray h1 { clear:both; font-size:32px; font-weight:normal; font-family:"Myriad Pro"; padding:25px 0 0 26px;}
.gray p { padding:10px 25px; font-size:14px; line-height:20px; letter-spacing:1px;}

/* ---------- Posts Sorting ---------- */
.post-sorting { border-top:dotted 1px #acacac; margin:20px 3px 0 3px; height:40px;}
.post-sorting li { display:inline; float:left; line-height:50px}
.post-sorting li a { padding:20px 40px 20px 25px; color:#333; font-weight:bold}
.post-sorting li a:hover { color:#f68b09}

/* ---------- Posts ---------- */
.post { position:relative;  padding:0 0 10px 25px; margin:30px 0;}
.post h2 { padding:10px 0 10px 0; color:#009bff}
.post h2 a {color:#009bff}
.post h2 a:hover {color:#020085}
.post .pages { font-size:12px; color:#fff; background:#3fb4ff; padding:5px 15px; position:absolute; right:0px; top:7px;}
.post .content { width:535px; border-top:solid 1px #3fb4ff}
.post .content .left { float:left; width:75px;}
.post .content .left p { padding:7px 0;}
.post .content .right { float:left; width:440px; padding: 0 0 0 13px;}
.post .content .right p { padding:5px 0;}
.post .content .right td {font-size:11px; padding:6px 3px;}
.post .content .right td.views { font-weight:bold}
.post .content .right td.links { text-align:right}
.post .content .right a.user { color:#537313}
.post .content .right a.user:hover { color:#09360b}
.post .content .right a.more { font-weight:bold; background:#ededed; padding:3px 20px;}
.post .content .right a.more:hover { background:#3b7076; color:#fff; }
.post .content .right a.jog { font-weight:bold; background:#ededed; padding:3px 20px;}
.post .content .right a.jog:hover { background:#87B727; color:#fff;}

/* ---------- Sidebar Test Form ---------- */
.test-it { background:#333; width:240px; padding:20px; color:#fff; font-size:11px; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.test-it p { line-height:1.2em; text-align:justify; padding:5px 0;}
.test-it p.sj { text-align:right; padding:20px 0 5px 0;}
.test-it a.start-jog { background:#3fb4ff; color:#fff; font-weight:bold;-moz-border-radius: 10px; -webkit-border-radius: 10px; padding:7px 30px;}
.test-it a.start-jog:hover { background:#87B727; color:#fff}
.test-it input { width:233px; margin:5px 0 0 0;}
.sidebar h1 { font-size:24px; font-family:"Myriad Pro"; color:#3fb4ff; font-weight:normal; position:relative; border-bottom:solid 1px #3fb4ff; padding:0 0 10px 0; clear:both}
.sidebar h1.test { border:none}
.sidebar h1.test em { background:url(../images/test-ico.png) no-repeat; padding:10px 20px; position:absolute; right:-15px;}
.sidebar h1.help em { background:url(../images/help-ico.png) no-repeat; padding:10px 20px; position:absolute; right:-15px;}
.sidebar h1.blogging em { background:url(../images/blogging-ico.png) no-repeat; padding:10px 20px; position:absolute; right:-15px;}

/* ---------- Sidebar text ---------- */
.side-wrapper {width:240px; padding:20px; }
.side-wrapper p {line-height:1.5em; text-align:justify; padding:10px 0;}
.side-wrapper a.visit { color:#87b727; float:right}
.side-wrapper a.visit:hover { color:#053d00;}

/* ---------- Footer ---------- */
.footer-hd { background:url(../images/footer-hd.png) no-repeat; width:100%; height:36px;}
.footer-hd p { text-align:right; padding:3px 90px 0 0;}
.footer-hd a { color:#fff; font-size:11px}
.footer-hd a:hover { color:#f10804;}
.footer-ct { background:#333; width:100%; }
.footer-ct a { color:#fff}
.footer-ct a:hover { color:#020570}
.footer-ct p.title { color:#3fb4ff; padding:10px 0}
.footer-ct .block { float:left; border-left: solid 1px #595959; padding: 0 23px 0 20px}
.footer-ct .first { border:none}
.footer-ct ul { float:left; padding:0 15px 0 0;}
.footer-ct li { padding:3px 0;}
.footer-ft { background:url(../images/footer-ft.png) no-repeat; width:100%; height:10px;}


/* ---------- Login Page ---------- */
.login-area { width:590px; margin:70px auto 0px auto;position:relative}
.gray#login { background:#ececec; -moz-border-radius-bottomleft: 10px; -webkit-border-radius-left-radius: 10px;-moz-border-radius-bottomright: 10px; -webkit-border-radius-right-radius: 10px; margin:-5px 0 0 0; position:relative; z-index:1; height:auto; min-height:0px; padding-bottom:20px;}
.gray#login h1 {clear:none; margin:5px 25px 0 25px; padding:0; position:relative}
.gray#login h1 em { padding:25px 16px; background:url(../images/lock-icon.png) no-repeat; position:absolute; right:0px; }
.login-form {font-family:Lucida Sans, Arial; font-size:24px; color:#000;}
.login-form table tr td {vertical-align:top; padding:9px; text-align:left}
.login-form table { width:100%;}
.login-form table tr td.label {text-align:right; padding-top:20px;}
.login-form table tr td input.textinp { width:423px; font-size:24px; height:33px; background:#dcdcdc; border:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; padding:7px; margin-bottom:5px;}
.login-form table tr td span.error { font-size:12px; color:#ff0000;}
.login-form table tr td.actions {padding-left:50px; vertical-align:top; }
.login-form table tr td a { font-size:12px; color:#000; font-weight:bold;}
.login-form table tr td a:hover {color:#020085;}
.login-button { width:88px; height:32px; background:#333; color:#fff; font-weight:bold; border:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; cursor:pointer; position:absolute; right:5px; }
.login-button:hover { background:#87B727}

/* ---------- Error & Warning areas---------- */
.error-box { clear:both; width:807px; margin:5px auto 15px auto; border:solid 1px #ce4718; background:#feece8; padding:10px;}
.error-box p { padding:5px 0; font-size:11px;}
.warning-box { clear:both; width:807px; margin:5px auto 15px auto; border:solid 1px #bfbd02; background:#f6f5b6; padding:10px;}
.warning-box p { padding:5px 0; font-size:11px;}