@import url("reset.css");



/* ---------- General styles ---------- */

body { font-family:Arial; font-size:12px; color:#333333; background: #fff; }

.clear { clear:both}

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

p { line-height:1.5em; color: 111;}



#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:30px 0 0 25px;}

.copyright { text-align:center; color:#333; padding:5px 0 30px 0; font-size:11px;}

.username { font-style:italic; color:#85b626}

.round-btn { background:#594c44; padding:8px 20px; color:#fff; font-size:11px; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-weight: bold; }

.round-btn:hover{ background:#594c44; color: #85b626;}



/* ---------- 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:1px 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:#000; text-decoration: underline;}



/* ---------- Top Navigation ---------- */

.topnav { width:100%; height:60px; background:#594c44; -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-wgp/up-arrow.jpg) no-repeat bottom center; color:#fff;}

.navigation li a.active {background:url(../images-wgp/up-arrow.jpg) no-repeat bottom center; color:#fff;}

.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-wgp/go.png) no-repeat; border:none; overflow:hidden; cursor:pointer}

.search #go:hover { background-position: 0 -32px;}

/* ---------- Gray area under navigation ---------- */

.gray { min-height:120px; background:#f5f3e4; -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:15px 0 0 26px;}

.gray p { padding:3px 25px 10px 25px; font-size:14px; line-height:20px; letter-spacing:1px; text-align: justify;}



/* ---------- 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:#85b626; text-decoration: underline;}

.post-sorting li a.active { color:#85b626}



/* ---------- 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:#85b626}

.post h2 a:hover {color:#85b626; text-decoration: underline;}

.post .pages { font-size:12px; color:#fff; background:#594c44; padding:5px 15px; position:absolute; right:0px; top:7px;}

.post .content { width:535px; border-top:solid 1px #594C44}

.post .content .left { float:left; width:75px;}

.post .content .left p { padding:7px 0;}

.post .content .right { float:left; width:445px; padding: 0 0 0 13px;}

.post .content .right p { padding:5px 0; text-align: justify; color: #111;}

.post .content .right td {font-size:11px; padding:6px 0; color: #111;}

.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:#537313; text-decoration: underline;}

.post .content .right a.more { font-weight:bold; background:#fff; padding:3px 20px;}

.post .content .right a.more:hover { background:#85b626; color:#fff; }

.post .content .right a.jog { font-weight:bold; background:#fff; padding:3px 20px;}

.post .content .right a.jog:hover { background:#87B727; color:#fff;}

.post .tags { width:521px; border:solid 1px #aaa; padding:5px; margin:5px 0;}

.post .tags a { padding:0 5px;}

.post .tags a:hover { color:#87B727}



/* ---------- Sidebar Test Form ---------- */

.test-it { background:#594C44; 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:#85b626; color:#fff; font-weight:bold;-moz-border-radius: 10px; -webkit-border-radius: 10px; padding:7px 30px;}

.test-it a.start-jog:hover { background:#85b626; text-decoration: underline; color:#fff}

.test-it input { width:233px; margin:5px 0 0 0;}

.sidebar h1 { font-size:24px; font-family:"Myriad Pro"; color:#85b626; font-weight:normal; position:relative; border-bottom:solid 1px #85b626; padding:0 0 10px 0; clear:both}

.sidebar h1.test { border:none}

.sidebar h1.test em { background:url(../images-wgp/test-ico.png) no-repeat; padding:10px 20px; position:absolute; right:-15px;}

.sidebar h1.help em { background:url(../images-wgp/help-ico.png) no-repeat; padding:10px 20px; position:absolute; right:-15px;}

.sidebar h1.blogging em { background:url(../images-wgp/blogging-ico.png) no-repeat; padding:10px 20px; position:absolute; right:-15px;}

.sidebar h1.author em { background:url(../images-wgp/author-ico.png) no-repeat; padding:10px 20px; position:absolute; right:-15px;}

.sidebar h1.ffextension em { background:url(../images-wgp/ffextension-ico.png) no-repeat; padding:10px 20px; position:absolute; right:-15px;}

.sidebar h1.ieplugin em { background:url(../images-wgp/ieplugin-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; color: #111;}

.side-wrapper a.visit { color:#85b626; float:right}

.side-wrapper a.visit:hover { color:#85b626; text-decoration: underline;}

.side-wrapper .author-name { width:100%}

.side-wrapper .author-name td { padding:10px 5px ; vertical-align:middle; }

.side-wrapper .author-name p { padding:0px;text-align:right}



/* ---------- Footer ---------- */

.footer-hd { background:url(../images-wgp/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; padding: 6px 0 0 20px;}

.footer-hd a:hover { color:#fff;}

.footer-ct { background:#594C44; width:100%; }

.footer-ct a { color:#fff}

.footer-ct a:hover { color:#fff; text-decoration: underline;}

.footer-ct p.title { color:#85b626; 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-wgp/footer-ft.png) no-repeat; width:100%; height:10px;}





/* ---------- Login Page ---------- */

.login-area { width:650px; margin:70px auto 0px auto;position:relative}

.gray#login { -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-wgp/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:450px; font-size:24px; height:33px; background:#ddd; 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:#ff8300;}

.login-button { width:88px; height:32px; background:#594c44; color:#fff; font-weight:bold; border:none; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; cursor:pointer; position:absolute; right:5px;  text-shadow: 1px 1px 0px #00;}

.login-button:hover { background:#594c44; color: #85b626;}



/* ---------- Error & Warning areas---------- */

.error-box { clear:both; width:807px; margin:5px auto 15px auto; border:solid 0px #ce4718; background:#e59b9b; padding:10px 20px;}

.error-box p { padding:5px 0; font-size:11px;}

.warning-box { clear:both; width:807px; margin:5px auto 15px auto; border:solid 0px #bfbd02; background:#f6f5b6; padding:10px 20px;}

.warning-box p { padding:5px 0; font-size:11px;}





/* ---------- Explore ---------- */



.right-menu {width:280px; float:right; margin-top:-30px; position:relative; z-index:999;}

.right-menu ul li { width:100%; display:block;}

.right-menu ul li a {display:block; width:100%; text-align:center; background:#f5f3e4; padding:10px; border-bottom:solid 1px #fff; }

.right-menu ul li a:hover {color:#85b626; background:#594c44 url(../images-wgp/white-arrow.gif) no-repeat left center;}

.right-menu ul li.active a {color:#85b626; background:#594c44 url(../images-wgp/white-arrow.gif) no-repeat left center;}

.right-menu ul li.last a {border-bottom:0px; -moz-border-radius-bottomleft: 10px; -webkit-border-radius-left-radius: 10px;-moz-border-radius-bottomright: 10px; -webkit-border-radius-right-radius: 10px;}

.gray.explore {-moz-border-radius-bottomright: 0px; -webkit-border-radius-right-radius: 0px;}



/* ---------- Pagination ---------- */

.pagination { padding-left:25px}

.pagination table td { vertical-align:middle; }

.pagination a { background:#fff; padding:7px 12px; font-weight:bold; float:left; border:solid 1px #aaa; border-right:none }

.pagination a:hover { background:#85b626; color: #fff; }

.pagination a.current { background:#85b626; color: #fff;}

.pagination a.last { border-right:solid 1px #aaa;}



/* ---------- Editor ---------- */

body#editor-pages {background:#3b3b3b;}

#editor-wrapper { width:100%; height:auto; margin:auto; background:#fff;}

#editor-wrapper #header {background:#3b3b3b; height:46px; color:#fff; border-bottom:solid 1px #fff;}

#editor-wrapper #center {background:url(../images-wgp/editor-bg.jpg) repeat-x; padding-top:30px; }

#editor-wrapper #footer {background:#3b3b3b; min-height:45px;}

#editor-wrapper #footer .footer-wrapper {width:850px; margin:auto;}

.footer-wrapper .button-left {float:left; border:0px; margin-top:-2px;}

.footer-wrapper .button-left a {padding:11px 30px; background:#fff; font-weight:bold; line-height:35px;  border:0px; }

.footer-wrapper .button-right {float:right; border:0px; margin-top:-2px;}

.footer-wrapper .button-right a {padding:10px 30px; background:#fff; font-weight:bold; line-height:35px; border:0px; }

#editor-content {width:850px; margin:auto;}

.editor-menu {width:1000px; margin:auto;}

.editor-menu li {float:left; margin:12px 0 0 30px;}

.editor-menu li a {color:#fff; line-height:35px; font-size:12px; font-weight:bold;}

.editor-menu li a.active {background:url(../images-wgp/tab-hover.png) no-repeat; color:#333; }

.editor-menu li a:hover {background:url(../images-wgp/tab-hover.png) no-repeat; color:#333; }

.editor-menu li a.edit-jog { padding:10px 37px;}

.editor-menu li a.sharing { padding:10px 35px;}

.editor-menu li a.view { padding:10px 42px;}

.editor-menu li a.exit { padding:10px 45px;}



h1.title {font-size:20px; font-weight:normal;}

a.edit-link {font-size:11px; color:#85b626; text-decoration:underline; font-weight:normal;}

textarea.large {width:820px; height:100px; padding:15px; background:#f8f8f8; border:solid 1px #4c4c4c; font-family:arial; font-size:12px; color:#111; line-height:1.4em;}

textarea.medium {width:790px; height:100px; padding:15px; background:#f8f8f8; border:solid 1px #4c4c4c; font-family:arial; font-size:12px; color:#111; line-height:1.4em;}

input.large {width:800px; padding:3px 10px; background:#f8f8f8; border:solid 1px #4c4c4c; font-family:arial; font-size:12px; color:#111; line-height:1.4em;}

input.medium {width:600px; padding:3px 10px; background:#f8f8f8; border:solid 1px #4c4c4c; font-family:arial; font-size:12px; color:#111; line-height:1.4em;}

.error-message {background:url(../images-wgp/error-arrow.gif) no-repeat left center; font-size:11px; color:#ff0000; padding-left:15px; margin-left:30px;}

.editor-buttons {float:right;}

.editor-buttons a {background:#242223; border:solid 1px #3b3b3b; line-height:23px; padding:3px 15px; font-size:12px; font-weight:bold; font-family:arial; cursor:pointer;}

.editor-buttons a.cancel {color:#ff6f6f;}

.editor-buttons a.save {color:#87b727;}

.editor-pages {width:850px; border:solid 1px #594c44; border-bottom:0px;}

.editor-pages .page-row {width:820px; padding:15px; border-bottom:solid 1px #594c44;}

.editor-pages .page-row .controls {float:right; background:#eeeeee; border:solid 1px #dadada; padding:10px 12px 5px 12px; word-spacing:10px; width:215px;}

.editor-pages .page-row .controls .arrows {float:right; background:#fff; padding:5px 10px; margin-top:-5px;}

.page-row h2 {font-size:14px;}

.page-row span.url { font-size:12px; color:#0086dc;}

.page-row h1.add-page {background:url(../images-wgp/plus-ico.gif) no-repeat left center; font-size:24px; line-height:40px; padding-left:45px; font-weight:normal;}

.page-row span.inp-label {line-height:25px;}



/* ---------- Iframe editor ---------- */

#iframe-wrapper { width:960px; height:auto; margin:auto}

.iframe-reader { width:198px; float:left; border: solid 1px #404040; border-right:0px; height:700px; }

.iframe-reader .reader-logo { width:100%; height:19px; margin:auto; padding:19px 0; background:#ebebeb; text-align:center}

.iframe-reader .info { width:182px; margin:auto; padding:10px 8px; background:#ccc; border-bottom:solid 1px #595959; border-top:solid 1px #595959}

.iframe-reader .info .name { font-weight:bold}

.iframe-reader .info .desc a { color:#85b626; text-decoration:underline}

.iframe-reader .navi { width:182px; margin:auto; padding:10px 8px; background:#ebebeb; border-bottom:solid 1px #595959;}

.iframe-reader .navi table { width:100%; text-align:center; font-weight:bold}

.iframe-reader .navi table td { width:33%; vertical-align:middle}

.iframe-reader .navi table td p.current { font-size:18px;}

.iframe-reader .navi table td p.current span { text-decoration:underline}

.iframe-reader .contents { height:500px; overflow-y:auto; overflow-x:hidden}

.iframe-reader .pages { width:182px; margin:auto; padding:10px 8px; border-bottom:solid 1px #595959;}

.iframe-reader .pages .title { border-bottom:solid 1px #009bff; padding:0 0 5px 0;}

.iframe-reader .pages h2 { float:left; color: #111;}

.iframe-reader .pages a.edit { color:#85b626; padding: 0 0 0 10px}

.iframe-reader .pages p.link a { color:#0043b3; font-weight:bold; font-size:11px; }

.iframe-reader .pages p.link a span.page-title { color:#222; font-weight: bold;}

.iframe-reader .pages p.link a span { color:#444; font-weight: normal;}

.iframe-reader .edition { background:#e3e3e3;}

.iframe-reader .edition span.edition { padding:0 0 0 10px; color:#9d080c}

.iframe-reader .edition textarea { background:none; border:solid 1px #444; margin:5px 0 0 0; width:90%; height:auto; font-family:arial; font-size:11px; font-weight:bold; padding:3px; overflow:auto }

.iframe-reader .edition .buttons { width:90%; text-align:center; padding:10px 0 0 0;}

.iframe-reader .edition .buttons a.cancel { background:#242223; padding:5px 10px; border:solid 1px #444; color:#ff6f6F; font-weight:bold;line-height:27px }

.iframe-reader .edition .buttons a.save { background:#242223; padding:5px 15px;; border:solid 1px #444; color:#87b727; font-weight:bold;line-height:27px}

.iframe-content { width:743px; height:700px; float:left; overflow:auto; border: solid 1px #404040;}



/* ---------- Iframe editor ---------- */

.sharing-wrapper { width:490px; margin:auto; height:auto}

.sharing-wrapper h1 {font-size:24px; font-weight:normal;}

.sharing-wrapper .box { width:100%;  border:solid 1px #594c44; margin:10px 0;}

.sharing-wrapper .box p { color:#333; font-size:12px; line-height:30px; padding:5px 0;}

.sharing-wrapper .box .left { float:left; padding:20px 40px;} 

.sharing-wrapper .box .right { float:left; padding:20px 20px 20px 40px;} 







/* ---------- error pages ---------- */

.error-area { width:625px; margin:0px auto 0px auto;position:relative; text-align: center;}

.error-area h3 { font-family: Arial; font-size:48px; font-weight: bold; text-align: center; margin-bottom: 30px;}

.error-area .content{ margin: 20px 0 30px 0; }

.error-area p{ text-align: center; margin: 10px 0; }

.error-area p.show-url{ background: #fff; padding: 10px 0; border: 1px solid #999; }

.error-area a{ font-weight: bold; }

.error-area a:hover{ text-decoration: underline; }

.error-area a.round-btn{ font-size: 14px; margin:0 30px; }

.error-area a.round-btn:hover{ text-decoration: none; }



/* ---------- My_Jogs page ---------- */

.create-new-jog { background:#fff; width:276px; padding:15px 12px 10px 12px; height:auto;-moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; margin:-8px 0 0 0; z-index:1;}

.create-new-jog div {background:#242223; -moz-border-radius: 10px; -webkit-border-radius: 10px; padding:15px 25px; font-size:18px;  font-weight:bold; height:23px;}

.create-new-jog a#create-jog {background:url(../images-wgp/create-jog.png) no-repeat left; float:left; padding:10px; color:#fff; padding:0 0 0 50px; float:left; text-shadow: 1px 1px 0px #000;}

.create-new-jog a#create-jog:hover { color:#87B727}

.side-wrapper .change-avatar { width:100%}

.side-wrapper .change-avatar td { padding:10px 5px ; vertical-align:middle; }

.side-wrapper .change-avatar p { padding:5px 0;text-align:left}

.side-wrapper .change-avatar a#change-avatar {background:#242223; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding:8px 33px; font-size:11px;  font-weight:bold; color:#fff; text-shadow: 1px 1px 0px #000;}

.side-wrapper .change-avatar a#change-avatar:hover { color:#ff8300;}

.side-wrapper .change-avatar a#reset-avatar  { color:#ff8300}

.side-wrapper .change-avatar a#reset-avatar:hover  { color:#ff8300; text-decoration: underline;}

/* Change password block */

.sidebar h1.change-password em { background:url(../images-wgp/key.png) no-repeat; padding:10px 20px; position:absolute; right:-15px;}

.change-pass p { padding:2px 0; font-size:14px;}

.change-pass p.error { color:#9e090b; font-size:12px;}

.change-pass input { width:240px; font-size:14px; height:15px; background:#fff; border:none; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px 3px;}

.change-pass a#submit {background:#242223; -moz-border-radius: 5px; -webkit-border-radius: 5px; padding:8px 20px; font-size:11px;  font-weight:bold; color:#fff; text-shadow: 1px 1px 0px #000;}

.change-pass a#submit:hover { color:#ff8300;}

/* ---- */

.jog-edit { background:#242223; font-size:11px; color:#fff; padding:5px; margin:5px 0;}

.jog-edit table { width:100%}

.jog-edit table td { text-align:center}

.jog-edit table a.desc { color:#ff8300}

.jog-edit table a.desc:hover { color:#ff8300; text-decoration: underline; }

.jog-edit table a.cont { color:#ff8300}

.jog-edit table a.cont:hover { color:#ff8300; text-decoration: underline;}

.jog-edit table a.share-jog { color:#87B727}

.jog-edit table a.share-jog:hover { color:#87B727; text-decoration: underline;}

.jog-edit table a.delete { color:#e33535}

.jog-edit table a.delete:hover { color:#e33535c; text-decoration: underline;}



/* ---------- Forgot Password page ---------- */

.gray#forgot { -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; margin:-5px 0 0 0; position:relative; z-index:1; height:auto; min-height:0px; padding-bottom:20px;}

.gray#forgot h1 {clear:none; margin:5px 25px 0 25px; padding:0; position:relative}

.gray#forgot h1 em { padding:25px 16px; background:url(../images-wgp/key.png) no-repeat; position:absolute; right:0px; }

.forgot table tr td { padding-left:50px;}

.forgot .login-button { right:37px; }

.forgot table tr td input.textinp { width:550px; font-size:24px; height:33px; border:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:7px; margin-bottom:5px;}

/* ---------- Register  page ---------- */

.gray#register { -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; margin:-5px 0 0 0; position:relative; z-index:1; height:auto; min-height:0px; padding-bottom:20px;}

.gray#register h1 {clear:none; margin:5px 25px 0 25px; padding:0; position:relative}

.gray#register h1 em { padding:25px 16px; background:url(../images-wgp/author-ico.png) no-repeat; position:absolute; right:0px; }

.register table tr td { padding-left:50px; color:#111}

.register .login-button { right:37px; }

.register table tr td input.textinp { width:550px; font-size:24px; height:33px; background:#ddd; border:none; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:7px; margin-bottom:5px;}

.register p.terms { font-size:12px; padding:10px 0px; float:left}



/* ---------- Upload Avatar Picture Popup ---------- */

.upload-avatar-picture { padding:30px;}

.upload-avatar-picture h1 { font-size:16px; padding:10px 0;}