/*
Theme Name: Arthemia Premium
Theme URI: http://colorlabsproject.com/
Description: Designed by Michael Jubel Hutagalung of Colorlabs Project.
Version: 1.0
Author: Michael Jubel Hutagalung
Author URI: http://colorlabsproject.com/
Tags: thumbnails, newspaper, magazine, widgets, admin panel
Copyright 2008, Michael Jubel Hutagalung
View detailed license info in license.txt file
TABLE OF CONTENTS
HTML Elements
Structure
Navigation Bar
Text
Index Page
Content Page
Sidebar
Form Elements
Comments
Footer
Clear
Sociable
*/
/* HTML Elements */
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Tahoma, Arial;
font-size: 100%;
background: #ffffff;
color: #505050;
}
p {
margin: 10px 0;
}
ul, ol {
margin: 5px 35px;
}
a:link, a:visited {
color: #000000;
text-decoration: none;
}
a:hover, a:active {
color: #808080;
text-decoration: underline;
}
a img {
border: 0;
}
code {
font: 1.0em 'Courier New', Courier, Fixed;
background: #ececec;
}
acronym, abbr, span.caps {
font-size: 0.9em;
letter-spacing: .07em;
cursor: help;
}
acronym, abbr {
border-bottom: 1px dashed #999;
}
blockquote {
padding: 5px 0px 5px 10px;
border-top: 1px #000000 dotted;
border-bottom: 1px #000000 dotted;
background: #ececec;
font-size: 1.0em;
line-height: 1.5em;
margin: 10px 0px 10px 20px;
}
select {
width: 130px;
}
/* Structure */
#head {
width: 930px;
margin: 0px auto;
padding: 5px 5px 0px 5px;
font-size: 0.7em;
background: #fff;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
#page {
width: 920px;
margin: 0px auto;
padding: 10px;
background: #eeeeee url(images/bg_stripe.gif);
font-size: 0.7em;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
.left {
float: left;
}
.right {
float: right;
}
/* Navigation Bar*/
#navbar {
margin: 0 auto;
padding: 0px 10px 0px 10px;
text-transform: uppercase;
background: #fff url(images/navbar.png) no-repeat;
width: 920px;
font-size: 0.6em;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
#page-bar {
padding: 0px;
}
#page-bar ul {
list-style: none;
margin: 0px 10px;
}
#page-bar li {
float: left;
list-style: none;
cursor: pointer;
display: block;
border-right: 1px solid #303030;
}
#page-bar li:hover {
background: #6699cc;
}
#page-bar a, #page-bar a:visited {
margin: 0px;
padding: 4px 10px;
font-weight: bold;
color: #eeeeee;
display: block;
}
#page-bar a:hover {
text-decoration: none;
display: block;
}
#page-bar p {
margin: 0;
padding: 0;
}
#searchform {
width: 184px;
float: right;
text-align: right;
padding-top: 3px;
margin-right: 10px;
}
/* Dropdown Menus */
#page-bar li {
float: left;
margin: 0px;
padding: 0px;
}
#page-bar li li {
float: left;
margin: 0px;
padding: 0px;
width: 132px;
text-transform: none;
}
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
width: 122px;
float: none;
margin: 0px;
padding: 4px 10px 4px 10px;
background: #3399cc url(images/dots_nav.gif) repeat-x top;
}
#page-bar li li a:hover, #page-bar li li a:active {
background: #3399ff;
padding: 4px 10px 4px 10px;
}
#page-bar li ul {
position: absolute;
width: 10em;
left: -999em;
}
#page-bar li:hover ul {
left: auto;
display: block;
}
#page-bar li:hover ul, #page-bar li.sfhover ul {
left: auto;
}
/* Text*/
h1 {
font-size: 3.5em;
font-weight: bold;
letter-spacing: -0.08em;
}
h2 {
font-size: 1.8em;
font-weight: bold;
}
h3 {
font-size: 1.3em;
margin-bottom: 3px;
color: #303030;
font-weight: bold;
}
h4 {
font-size: 1.0em;
}
h3.cat_title, h3.cat_title a {
color: #333333;
letter-spacing: -0.05em;
}
h3#respond {
margin-top: 0px;
padding-top: 20px;
}
h3#comments {
margin-top: 32px;
padding-left: 0px;
margin-bottom: 15px;
}
h3.authors {
margin-top: 15px;
}
h5 {
font-size: 1.0em;
}
h6 {
font-size: 1.0em;
}
/* Index Page*/
#logo {
width: 200px;
height: 100px;
background: #fff;
margin-left: -4px;
}
#tagline {
margin-top: 10px;
font-size: 1em;
color: #1d3566;
font-weight: bold;
}
#top {
margin: 0 auto;
padding: 0px 10px 0px 0px;
background: #ffffff;
width: 930px;
font-size: 0.7em;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
#headline {
width: 560px;
float: left;
padding: 0px 12px 10px 25px;
font-size: 1.05em;
line-height: 1.5em;
margin: 0;
background: #ffffff;
color: #000000;
overflow: hidden;
}
#headline a {
color: #000000;
}
#headline a:hover {
color: #808080;
}
#top div.label {
font-size: 1.2em;
font-weight: bold;
text-transform: lowercase;
letter-spacing: -0.05em;
line-height: 0.9em;
display: block;
padding-bottom: 5px;
padding-top: 15px;
}
#headline div.title {
font-size: 1.9em;
font-weight: bold;
letter-spacing: -0.05em;
line-height: 1em;
display: block;
padding-bottom: 5px;
padding-top: 15px;
}
#headline div.meta {
display: block;
padding: 4px 0px 4px 0px;
color: #808080;
font-size: 0.85em;
}
#headline p {
padding-bottom: 25px;
}
#featured {
width: 310px;
float: right;
padding: 0px 10px 0px 10px;
font-size: 1.05em;
}
#featured .clearfloat {
margin-top: 0px;
margin-bottom: 7px;
}
#featured .info {
margin-top: 5px;
padding-top: 0px;
float: right;
width: 193px;
font-size: 0.9em;
}
#featured .meta {
margin-top: 5px;
font-size: 0.8em;
}
#featured .title {
font-weight: bold;
}
#featured .divider {
margin-left: 95px;
}
#headline a img, #featured a img {
margin-top: 5px;
}
#featured a {
color: #000000;
}
#featured a:hover {
color: #808080;
}
#featured a img {
border: 1px solid #333333;
margin-right: 10px;
}
#headline a img {
border: 2px solid #000;
margin-right: 15px;
margin-bottom: 10px;
}
#single_head {
width: 195px;
float: left;
padding: 15px 12px 20px 25px;
margin: 0;
background: #ffffff;
color: #000000;
}
#single_head a img {
border: 2px solid #000000;
}
#single_desc {
width: 675px;
float: right;
padding: 0px 10px 5px 10px;
font-size: 1.05em;
line-height: 1.5em;
}
#single_desc div.title {
font-size: 1.9em;
font-weight: bold;
letter-spacing: -0.05em;
line-height: 0.9em;
display: block;
padding-bottom: 5px;
padding-top: 10px;
}
#single_desc div.meta {
display: block;
padding-bottom: 5px;
font-size: 0.85em;
}
#single_desc p {
margin: 0px;
padding-bottom: 10px;
}
#single_desc a {
color: #000000;
}
#single_desc a:hover {
color: #808080;
}
#mores {
margin: 0 auto;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
border-bottom: 5px solid #fff;
width: 940px;
font-size: 0.7em;
}
#more-head {
background: #333333;
text-align: center;
float: left;
width: 560px;
padding: 0px 12px 10px 25px;
}
#more-feat {
background: #dedede;
text-align: center;
float: right;
width: 320px;
padding: 0px 10px 10px 13px;
}
#more-head a {
background: #404040;
color: #b0b0b0;
}
#more-feat a {
background: #d0d0d0;
color: #505050;
}
#more-head a, #more-feat a {
display: block;
font-weight: bold;
padding: 3px;
}
#more-feat a:hover {
text-decoration: none;
background: #b0b0b0;
}
#more-head a:hover {
text-decoration: none;
background: #505050;
}
#middle {
margin: 0 auto;
padding: 10px 10px 0px 10px;
background: #fff;
width: 920px;
font-size: 0.7em;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
.category {
width: 164px;
float: left;
border-top: 8px solid #333333;
margin: 0px;
padding: 5px 10px 15px 10px;
background: #fff;
}
.category p {
margin: 0;
}
.category span.cat_title, #front-popular h3, #front-list .cat_title, #gallery h3 {
text-transform: lowercase;
margin: 0;
font-weight: bold;
font-size: 1.5em;
letter-spacing: -0.05em;
}
#front-list .cat_title {
font-size: 1.1em;
}
#front-popular h3 {
color: #fff;
}
.more-link {
display: block;
margin: 15px 0px;
}
.category a {
color: #333333;
display: block;
background: none;
}
.category a:hover {
background: none;
color: #fff;
text-decoration: none;
}
#bottom {
width: 920px;
}
#bottom-left {
float: left;
}
#bottom-left .meta, #content.archive .meta {
font-size: 0.85em;
}
#front-list {
width: 570px;
padding: 10px;
background: #fff;
font-size: 1.05em;
line-height: 1.75em;
margin-bottom: 10px;
border-top: 1px solid #ececec;
}
#front-list blockquote {
padding: 0px 10px 0 10px;
}
#front-list .title {
font-size: 1.5em;
font-weight: bold;
letter-spacing: -0.05em;
}
#front-list .divider {
margin-left: 216px;
margin-top: 0px;
margin-bottom: 0px;
}
.author {
font-size: 0.8em;
font-weight: bold;
}
.meta {
color: #333333;
font-weight: bold;
}
#headline p, #featured p {
margin: 0;
}
#paged-list {
width: 570px;
padding: 0px 10px;
background: #fff;
font-size: 1.05em;
line-height: 1.75em;
border-top: 1px solid #ececec;
}
#paged-list .clearfloat {
background: url(images/dots_content.gif) repeat-x bottom;
padding-bottom: 1px;
}
.onecolumn {
line-height: 1.5em;
padding: 10px 0px;
margin: 0;
}
.onecolumn img {
float: left;
margin: 8px 10px 7px 0px;
border: 1px solid #ccc;
padding: 2px;
}
.tanbox {
width: 275px;
line-height: 1.5em;
padding: 10px 0px;
margin: 0;
}
.archive .tanbox {
width: 570px;
background: url(images/dots_content.gif) repeat-x bottom;
padding-bottom: 1px;
}
.tanbox img {
float: left;
margin: 8px 10px 7px 0px;
border: 1px solid #ccc;
padding: 2px;
}
.tanbox span.title a, .onecolumn span.title a {
font-size: 1.2em;
font-weight: bold;
}
.tanbox p, .onecolumn p {
margin: 5px 0px;
}
#navigation {
padding: 15px 10px;
background: #fff;
font-size: 1.05em;
text-align: center;
width: 550px;
}
/* Content Page*/
#content {
width: 570px;
background: #fff;
padding: 10px;
font-size: 1.05em;
line-height: 1.75em;
float: left;
border-top: 1px solid #ececec;
}
.post {
font-size: 1.05em;
line-height: 1.75em;
}
.post p {
margin-top: 0px;
}
.post .clearfloat {
border-bottom: 1px solid #e2e2e2;
}
.entry ul, .post ol {
margin-bottom: 15px;
}
#content h2.title {
letter-spacing: -0.05em;
border-bottom: 0px solid #e2e2e2;
border-top: 2px solid #e2e2e2;
margin-bottom: 0px;
padding: 3px 0px;
color: #000000;
line-height: 1em;
}
.entry ul li {
list-style: square;
margin-left: 3px;
}
.entry ol li {
list-style: decimal;
margin-left: 3px;
}
.entry ol li ul li {
list-style: square;
margin-left: 20px;
}
.entry img, .post a img, #front-list img {
border: 1px solid #ccc;
margin: 0 10px 5px 0;
padding: 2px;
}
.entry a {
text-decoration: underline;
color: darkblue;
}
.post .ads {
margin-top: 10px;
}
.post .afflinks {
font-color: red;
text-decoration: none;
}
#stats {
margin-bottom: 15px;
padding: 0px 5px;
font-size: 0.8em;
display: block;
border-bottom: 1px solid #e2e2e2;
font-weight: bold;
}
span#map {
font-size: 0.9em;
}
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 7px;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 7px 2px 0;
display: inline;
}
.alignright {
float: right;
}
.alignleft {
float: left;
}
/* Sidebar*/
#sidebar {
width: 320px;
float: right;
margin: 0px 0px 0px 0px;
overflow: hidden;
}
.spoiler {
padding: 0px 12px 12px 12px;
background: #fff;
border-top: 1px solid #ececec;
margin-bottom: 12px;
overflow: hidden;
}
.spoiler img {
border: 1px solid #ccc;
padding: 2px;
margin-right: 10px;
margin-bottom: 5px;
}
.spoiler h3 {
font-size: 1.1em;
font-weight: bold;
color: #fff;
margin: 0px 0px 8px 0px;
padding: 3px 10px;
border-bottom: 1px solid #ececec;
}
.spoiler h3 a {
color: #fff;
text-decoration: none;
}
.spoiler p {
margin: 0;
color: #6d6d6d;
}
.spoiler h4 {
font-size: 1.05em;
font-weight: bold;
margin-bottom: 5px;
}
.spoiler h4 a {
color: #333333;
}
#sidebar h3 {
font-size: 1.1em;
font-weight: bold;
background: #3366cc;
color: #fff;
margin: 10px 0px 5px 0px;
padding: 3px 10px;
}
#sidebar-top, #sidebar-bottom {
width: 300px;
float: right;
padding: 0px 10px 10px 10px;
background: #fff;
border-top: 1px solid #ececec;
}
#sidebar-bottom, #sidebar-middle {
margin-top: 10px;
}
#sidebar-middle {
width: 320px;
float: right;
}
#sidebar-left {
width: 135px;
padding: 0px 10px 10px 10px;
float: left;
background: #fff;
border-top: 1px solid #ececec;
}
#sidebar-right {
width: 135px;
padding: 0px 10px 10px 10px;
float: right;
background: #fff;
border-top: 1px solid #ececec;
}
#sidebar li {
list-style: none;
border-bottom: 1px dotted #bbbbbb;
display: block;
padding: 2px 0px 2px 13px;
background: url(images/sub.png) no-repeat 0 0px;
margin-left: -30px;
margin-right: -30px
}
#sidebar li ul li {
border-bottom: 0px;
}
#sidebar-ads {
width: 300px;
float: right;
margin-bottom: 10px;
padding: 10px;
background: #fff;
}
#sidebar h3 img {
margin-top: 1px;
}
/* Form Elements */
select {
border: 1px solid #333333;
width: 100%;
}
.submitbutton {
padding: 1px;
border: 1px solid #aaa;
background: #fff;
font-size: 0.9em;
color: #aaa;
cursor: pointer;
}
.field {
padding: 2px;
margin-top: 2px;
border-top: 1px solid #bbbbbb;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
background: #fff;
font-size: 1.0em;
}
#search .searchbutton {
padding: 1px;
border: 1px solid #333333;
background: #fff;
font-size: 1.0em;
}
#commentform input {
width: 140px;
margin: 5px 5px 0px 0;
}
#commentform textarea {
width: 99%;
margin-top: 5px;
border-top: 1px solid #bbbbbb;
border-left: 1px solid #bbbbbb;
border-right: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
/* Comments*/
#comments {
line-height: 1.5em;
font-size: 0.9em;
}
#comments h3 {
padding-top: 10px;
}
.commentlist cite {
font-style: italic;
margin-bottom: 0px;
display: inline;
/* font-size: 0.9em; */
}
.commentlist blockquote {
background: #ededed;
}
.commentlist li {
color: #4d4d4d;
padding: 10px 14px 10px 14px;
/* background: #f2f2f2; */
border-bottom: 1px #dcdbd7 dotted;
list-style: decimal;
margin-bottom: 3px;
line-height: 1.0em;
}
.commentlist li li {
background: none;
border: none;
list-style: square;
margin: 3px 0 3px 20px;
padding: 3px 0;
}
.commenttext {
width: 482px;
float: right;
line-height: 1.5em;
}
li.my_comment {
background: #fff;
}
li cite strong {
font-size: 1.1em;
color: #313228;
}
#commentform small {
background: #FFF;
font-weight: bold;
padding: 0;
}
.commentmetadata {
color: #4d4d4d;
display: block;
margin-top: 3px;
text-align: right;
font-size: 0.9em;
}
.commentmetadata a, .commentmetadata a:visited {
color: #959382;
line-height: 2em;
}
.commentlist small {
background: #e9e9e9;
}
.avatar {
border: 1px solid #ccc;
margin: 0 0 0 5px;
float: right;
padding: 2px;
width: 32px;
height: 32px;
}
#comment {
width: 590px;
background: #fff;
}
/* Footer*/
#carousel {
font-size: 0.7em;
color: #fff;
width: 910px;
background: #fff;
margin: 0 auto;
padding: 15px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
.carousel-item {
width: 131px;
float: left;
padding: 0px 20px;
border-right: 1px dotted #ccc;
}
.carousel-item img {
border: 1px solid #ccc;
padding: 2px;
margin-bottom: 5px;
}
.carousel-item .info {
font-weight: bold;
}
#gallery {
font-size: 0.7em;
color: #333;
width: 925px;
background: #cc9900;
margin: 0 auto;
padding: 15px 0px 0px 15px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
#gallery #random {
float: right;
width: 613px;
padding-bottom: 5px;
}
#gallery #random img {
padding: 2px;
border: 1px solid #ccc;
margin-right: 16px;
margin-bottom: 15px;
background: #fff;
}
#gallery #video {
float: left;
width: 281px;
padding-right: 15px;
margin-bottom: 15px;
border-right: 1px solid #b0b0b0;
}
#gallery h3 {
display: block;
padding-bottom: 5px;
}
#front-popular {
font-size: 0.7em;
color: #fff;
width: 910px;
background: #000033;
margin: 0 auto;
padding: 15px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
#recentpost, #mostcommented {
width: 276px;
float: left;
padding: 0px 20px 0px 0px;
border-right: 1px solid #808080;
}
#mostcommented {
margin-left: 20px;
}
#recent_comments {
width: 276px;
float: right;
padding: 0px;
}
#recentpost a, #mostcommented a, #recent_comments a {
color: #fff;
}
#recentpost ul, #mostcommented ul, #recent_comments ul {
margin-top: 5px;
}
#recentpost ol, #mostcommented ol, #recent_comments ol {
margin-top: 5px;
}
#recentpost li, #mostcommented li, #recent_comments li {
list-style: none;
background: url(images/dots_footer.gif) repeat-x top;
padding-top: 1px;
}
#recentpost ul li a, #mostcommented ul li a, #recent_comments ul li a {
padding: 5px;
display: block;
text-decoration: none;
}
#recentpost ul li a:hover, #mostcommented ul li a:hover, #recent_comments ul li a:hover {
background: #000000;
color: #fff;
}
#recentpost ul li:first-child, #mostcommented ul li:first-child, #recent_comments ul li:first-child {
background: none;
}
#recentpost ol li a, #mostcommented ol li a, #recent_comments ol li a {
padding: 5px;
display: block;
text-decoration: none;
}
#recentpost ol li a:hover, #mostcommented ol li a:hover, #recent_comments ol li a:hover {
background: #000000;
color: #fff;
}
#recentpost ol li:first-child, #mostcommented ol li:first-child, #recent_comments ol li:first-child {
background: none;
}
#footer {
margin: 0 auto;
width: 920px;
font-size: 0.6em;
background: #fff;
color: #333333;
padding: 5px 10px;
border-left: 5px solid #fff;
border-right: 5px solid #fff;
}
#footer a:hover {
color: #808080;
}
/* Float Properties*/
.clearfloat:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfloat {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfloat {
height: 1%;
}
* + html .clearfloat {
height: 1%;
}
.clearfloat {
display: block;
}
/* Sociable CSS */
div.sociable { margin: 16px 0; }
span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: none;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 1px 10px 1px 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;
width: 32px;
height: 32px;
border: 0;
margin: 0;
padding: 0;
}
.sociable-hovers {
opacity: .4;
-moz-opacity: .4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}