851 lines
No EOL
12 KiB
CSS
851 lines
No EOL
12 KiB
CSS
/*
|
|
Theme Name: Versatility lite
|
|
Theme URI: http://www.thinkdesignblog.com
|
|
Description: Nice Lite Theme
|
|
Version: 1.6
|
|
Author: Design by Think Design. Coded by Qkin.
|
|
Author URI: http://www.thinkdesignblog.com and http://qkin.com/
|
|
Tags: fixed width, two columns, widgets
|
|
*/
|
|
|
|
body {
|
|
font-size: 85.5%; /* Resets 1em to 10px */
|
|
font-family: Tahoma,Arial,Helvetica,sans-serif;
|
|
background: #a8a9ad;
|
|
color: #333;
|
|
margin:0px 0 0 0;padding:0;
|
|
text-align: left;
|
|
}
|
|
|
|
a:link {
|
|
color:#1fa5de;
|
|
}
|
|
|
|
a:visited {
|
|
color:#1fa5de;
|
|
}
|
|
|
|
a:hover {
|
|
color: #000000;
|
|
}
|
|
|
|
a:active {
|
|
color:#1fa5de;
|
|
}
|
|
|
|
|
|
|
|
/*------------ Basic layout outline ------------ */
|
|
|
|
#page{
|
|
line-height: 20px;
|
|
width: 900px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.texture-top{
|
|
float:left;
|
|
width:900px;
|
|
height: 24px;
|
|
font-size:0px;
|
|
background:#ffffff url(images/texture-top.gif) no-repeat top left;
|
|
}
|
|
|
|
.wrap-middle{
|
|
padding:0;
|
|
float:left;
|
|
width: 900px;
|
|
background:#ffffff url(images/cont-wrap.gif) repeat-y top left;
|
|
}
|
|
|
|
|
|
|
|
/*-------------Header------------ */
|
|
|
|
.top-header{
|
|
width: 100%;
|
|
float:left;
|
|
background:#58595B;
|
|
position:relative;
|
|
}
|
|
|
|
#logo {
|
|
display:block;
|
|
padding:15px;
|
|
float:left;
|
|
}
|
|
|
|
.topmenu{
|
|
position:absolute;
|
|
top:10px;
|
|
right: 15px;
|
|
}
|
|
|
|
.topmenu ul{
|
|
margin:0;
|
|
padding:0;
|
|
list-style:none;
|
|
font-family:century gothic;
|
|
text-transform: uppercase;
|
|
letter-spacing:1px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.topmenu li{
|
|
display:inline;
|
|
}
|
|
|
|
.topmenu li a{
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.topmenu li a:visited{
|
|
color:#797a7d;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.topmenu li a:hover{
|
|
color:#1fa5de;
|
|
}
|
|
|
|
.topmenu li a{
|
|
color:#797a7d;
|
|
text-decoration:none;
|
|
}
|
|
|
|
|
|
|
|
/*featured block below logo*/
|
|
|
|
.top-right-splash{
|
|
width: 716px;
|
|
float:left;
|
|
height: 188px;
|
|
background:#e5e5e5 url(images/top-right-splash.gif) no-repeat top left;
|
|
}
|
|
|
|
.top-left-splash{
|
|
height: 188px;
|
|
background:#e5e5e5;
|
|
float:left;
|
|
overflow:hidden;
|
|
}
|
|
|
|
|
|
.featured-story{
|
|
float:right;
|
|
width: 530px;
|
|
padding-right: 15px;
|
|
font-size:11px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.featured-story h2.link{
|
|
font-size: 20px;
|
|
}
|
|
|
|
.featured-story .post-thumbnail{
|
|
float:left;
|
|
margin-left: 0px;
|
|
margin-right:8px;
|
|
margin-top:14px;
|
|
}
|
|
|
|
.featured-story .top-tools{
|
|
border-color:#cdcdcd;
|
|
}
|
|
|
|
|
|
#about-us{
|
|
float:left;
|
|
width: 110px;
|
|
padding: 10px 0px 0 10px;
|
|
color:#b9bbbd;
|
|
font-size:11px;
|
|
}
|
|
|
|
.blue-text{
|
|
text-transform:uppercase;
|
|
font-family:century gothic;
|
|
color:#0aa0d0;
|
|
font-size: 15px;
|
|
}
|
|
|
|
|
|
|
|
/* --------Sidebar------------*/
|
|
|
|
#sidebar-contain{
|
|
float:right;
|
|
padding: 0px;
|
|
width:339px;
|
|
padding:0 0 0 12px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
|
|
|
|
/*sidebar-searchbox*/
|
|
|
|
.search-box form{
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
.search-box{
|
|
height: 26px;
|
|
padding: 0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
input.search-field{
|
|
float: left;
|
|
border:1px solid #dedfe0;
|
|
margin:0;
|
|
padding: 4px 0px 1px 4px;
|
|
height:18px;background: #ffffff;
|
|
width: 250px;
|
|
}
|
|
|
|
input.search-go {
|
|
float:left;
|
|
border:0;
|
|
margin:0;
|
|
padding:0;
|
|
margin-left: 5px;
|
|
height: 25px;
|
|
width: 60px;
|
|
background: url(images/search.gif) no-repeat top left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
.side-box{
|
|
float:left;
|
|
margin-bottom: 25px;
|
|
width: 100%;
|
|
}
|
|
|
|
.side-box h3{
|
|
margin-right: 12px;
|
|
padding-left: 3px;
|
|
font-size: 0.9em;
|
|
text-transform:uppercase;
|
|
color:#63bbe4;
|
|
border-bottom: 1px solid #dbdcde;
|
|
padding-bottom: 5px;
|
|
margin-bottom: 5px;
|
|
font-family:century gothic;
|
|
font-weight: normal;
|
|
letter-spacing:1px;
|
|
}
|
|
|
|
|
|
.side-box a.rss{
|
|
margin-left: 20px;
|
|
padding-left: 30px;
|
|
margin-right: 30px;
|
|
background:url(images/rss.gif) no-repeat center left;
|
|
display:inline-block;
|
|
line-height: 28px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.side-box a.email{
|
|
padding-left: 30px;
|
|
background:url(images/email.gif) no-repeat center left;
|
|
display:inline-block;
|
|
line-height: 28px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
.side-box ul{
|
|
margin:0;
|
|
padding:0;
|
|
list-style:none;
|
|
margin-right: 11px;
|
|
}
|
|
|
|
.side-box ul ul {
|
|
margin-right: 0;
|
|
text-indent: 5px;
|
|
}
|
|
|
|
.side-box ul ul ul{
|
|
margin-right: 0;
|
|
text-indent: 10px;
|
|
}
|
|
|
|
.side-box li a:visited{
|
|
color:#7e7f81;
|
|
}
|
|
|
|
.side-box li a{
|
|
color:#7e7f81;
|
|
display:block;
|
|
line-height: 28px;
|
|
padding:0 0 0 3px;
|
|
list-style:none;
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
border-bottom: 1px solid #dbdcde;
|
|
}
|
|
|
|
|
|
.side-box li a:hover{
|
|
background:#e5e5e5;
|
|
color:#1fa5de;
|
|
}
|
|
|
|
|
|
|
|
.side-box .divide{
|
|
width: 169px;
|
|
float:left;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.side-box ul.sections{
|
|
margin: 0px;
|
|
}
|
|
|
|
.side-box ul.sections li {
|
|
float:left;
|
|
width:158px;
|
|
margin-top: 0px;
|
|
margin-right: 11px;
|
|
}
|
|
|
|
|
|
* html .side-box li a{
|
|
height: 28px;
|
|
}
|
|
|
|
|
|
|
|
/* --------Main Content------------*/
|
|
|
|
#content{
|
|
float:left;
|
|
padding: 0px;
|
|
width: 519px;
|
|
padding: 0 15px 0 15px;
|
|
overflow:hidden;
|
|
}
|
|
|
|
.post{
|
|
width: 469px;
|
|
padding-top: 7px;
|
|
margin-bottom: 25px;
|
|
color:#7f7f81;
|
|
float:left;
|
|
background: url(images/post-star.gif) no-repeat top left;
|
|
padding-left: 50px;
|
|
}
|
|
|
|
|
|
.post-thumbnail{
|
|
float:right;
|
|
margin-top: 20px;
|
|
margin-left: 5px;
|
|
border:1px solid #d5d5d5;
|
|
padding: 3px;
|
|
}
|
|
|
|
.post-thumbnail img{
|
|
vertical-align:bottom;
|
|
width: 125px;
|
|
height: 90px;
|
|
}
|
|
|
|
|
|
.entry{
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
.entry p{
|
|
margin:10px 0;
|
|
}
|
|
|
|
|
|
h2.link{
|
|
margin:0;
|
|
padding:0;
|
|
font-size: 1.6em;
|
|
font-weight:normal;
|
|
color:#1fa5de;
|
|
}
|
|
|
|
h2.link a:visited{
|
|
margin:0;
|
|
padding:0;
|
|
color:#1fa5de;
|
|
text-decoration:none;
|
|
}
|
|
|
|
h2.link a:hover{
|
|
color:#000000;
|
|
}
|
|
|
|
h2.link a{
|
|
margin:0;
|
|
padding:0;
|
|
color:#1fa5de;
|
|
text-decoration:none;
|
|
}
|
|
|
|
|
|
.top-tools{
|
|
clear:both;
|
|
font-size: 12px;
|
|
width: 100%;
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid #e3e3e4;
|
|
color:#bcbdc1;
|
|
}
|
|
|
|
.top-tools span{
|
|
color:#979799;
|
|
}
|
|
|
|
|
|
.tools a:visited {
|
|
color:#6e6f71;
|
|
}
|
|
|
|
.tools a{
|
|
text-decoration:none;
|
|
color:#6e6f71;
|
|
}
|
|
|
|
.tools span{
|
|
color:#bcbdc1;
|
|
text-transform:uppercase;
|
|
font-size:11px;
|
|
}
|
|
|
|
.tools{
|
|
font-size: 12px;
|
|
float:left;
|
|
border-top: 1px solid #e3e3e4;
|
|
border-bottom: 1px solid #e3e3e4;
|
|
line-height: 28px;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
.no-border{
|
|
border-bottom: 0;
|
|
}
|
|
|
|
|
|
.list-items {
|
|
margin:0;
|
|
padding:0;
|
|
list-style:none;
|
|
width: 350px;
|
|
float:left;
|
|
}
|
|
|
|
.share{
|
|
width: 110px;
|
|
float:right;
|
|
}
|
|
|
|
|
|
.list-items li a:visited{
|
|
color:#7e7f81;
|
|
}
|
|
|
|
.list-items li a{
|
|
color:#7e7f81;
|
|
display:block;
|
|
line-height: 28px;
|
|
padding:0 0 0 3px;
|
|
list-style:none;
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
border-top: 1px solid #dbdcde;
|
|
}
|
|
|
|
.list-items li a:hover{
|
|
background:#e5e5e5;
|
|
color:#1fa5de;
|
|
}
|
|
|
|
|
|
* html .list-items li a{
|
|
height: 28px;
|
|
}
|
|
|
|
|
|
|
|
/* ---------------Comments----------------*/
|
|
|
|
.commentlist{
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
.comment{
|
|
background:#F1F1F1;
|
|
margin-bottom: 5px;
|
|
display:block;
|
|
padding: 10px;
|
|
}
|
|
|
|
.comment .avatar{
|
|
float:right;
|
|
border:1px solid #e5e5e5;
|
|
padding:1px;
|
|
}
|
|
|
|
.alt{
|
|
background: #F1F1F1;
|
|
}
|
|
|
|
.admin{
|
|
background:#E1F3FD;
|
|
}
|
|
|
|
#respond{
|
|
margin-top: 18px;
|
|
}
|
|
|
|
|
|
textarea{
|
|
width: 500px;
|
|
}
|
|
|
|
|
|
|
|
/* --------Others------------*/
|
|
|
|
h1{
|
|
font-family:palatino;
|
|
font-size: 1.6em;
|
|
margin: 0px 0px 25px 0px;
|
|
color:#929699;
|
|
}
|
|
|
|
h2{
|
|
font-family:palatino;
|
|
margin:0;
|
|
padding:0;
|
|
font-size: 1.6em;
|
|
font-weight:normal;
|
|
color:#1fa5de;
|
|
}
|
|
|
|
h3{
|
|
font-family:palatino;
|
|
font-size: 1.6em;
|
|
margin: 0px 0px 15px 0px;
|
|
}
|
|
|
|
h4{
|
|
font-family:palatino;
|
|
font-size: 1.6em;
|
|
margin: 0px 0px 15px 0px;
|
|
}
|
|
|
|
|
|
img{
|
|
border:none;
|
|
}
|
|
|
|
|
|
|
|
blockquote {
|
|
background:url(images/bquote.gif) no-repeat top left;
|
|
padding:18px 0 0 26px;
|
|
margin-left: 0px;
|
|
}
|
|
|
|
blockquote p{
|
|
background:#E1F3FD;
|
|
padding:20px;
|
|
margin:0;
|
|
}
|
|
|
|
|
|
.navigation {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 10px;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
|
|
.float-left{
|
|
float:left;
|
|
}
|
|
|
|
.float-right{
|
|
float:right;
|
|
}
|
|
|
|
|
|
.clear-fix{
|
|
height:0px;
|
|
line-height: 0px;
|
|
}
|
|
|
|
|
|
|
|
/*post navigation */
|
|
|
|
.older-newer a:visited{
|
|
color:#77787b;
|
|
}
|
|
|
|
.older-newer a:hover{
|
|
color:#1fa5de;
|
|
}
|
|
|
|
.older-newer a{
|
|
font-weight: bold;
|
|
text-decoration:none;
|
|
font-size: 12px;
|
|
color:#77787b;
|
|
}
|
|
|
|
.older-left a{
|
|
float:left;
|
|
display:block;
|
|
padding: 5px 0 4px 20px;
|
|
background:url(images/older-left.gif) no-repeat center left;
|
|
}
|
|
|
|
.newer-right a{
|
|
float:right;
|
|
display:block;
|
|
padding: 5px 20px 4px 0px;
|
|
background:url(images/newer-right.gif) no-repeat center right;
|
|
}
|
|
|
|
|
|
|
|
|
|
/*-------------Drop Down Menu Based on http://htmldog.com/articles/suckerfish/dropdowns/------------ */
|
|
|
|
#nav {
|
|
letter-spacing:1px;
|
|
font-family:century gothic;
|
|
background:#D1D2D4;
|
|
font-weight:normal;
|
|
text-transform:uppercase;
|
|
width:100%;
|
|
border-top:1px solid #d5d6d7;
|
|
}
|
|
|
|
#nav, #nav ul {
|
|
float:left;
|
|
list-style:none;
|
|
|
|
line-height:36px;
|
|
padding:0;
|
|
|
|
font-size: 11px;
|
|
margin:0;
|
|
width:900px;
|
|
padding: 0px 0px 0px 0px;
|
|
}
|
|
|
|
#nav a {
|
|
|
|
display:block;
|
|
color:#747475;
|
|
text-decoration:none;
|
|
padding:0px 13px;
|
|
}
|
|
|
|
#nav li {
|
|
float:left;
|
|
margin-right: 1px;
|
|
padding:0;
|
|
}
|
|
|
|
#nav ul {
|
|
position:absolute;
|
|
left:-999em;
|
|
height:auto;
|
|
width:150px;
|
|
font-weight:normal;
|
|
margin:0;
|
|
line-height:1;
|
|
border:0;
|
|
border-bottom:1px solid #949596;
|
|
border-right:1px solid #949596;
|
|
padding:0;
|
|
}
|
|
|
|
|
|
#nav li li {
|
|
width:150px;
|
|
border:0;
|
|
font-weight:bold;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
#nav li li a {
|
|
padding:8px 13px;
|
|
width:124px;
|
|
margin:0;
|
|
font-size:12px;
|
|
color:#747475;
|
|
font-weight: normal;
|
|
}
|
|
|
|
|
|
#nav li ul ul {
|
|
margin:-28px 0 0 151px;
|
|
padding:0;
|
|
}
|
|
|
|
#nav li li:hover {
|
|
background:#c2c3c4;
|
|
}
|
|
|
|
|
|
#nav li ul li:hover a, #nav li ul li li:hover a, #nav li ul li li li:hover a, #nav li ul li li li:hover a {
|
|
color:#747475;
|
|
}
|
|
|
|
|
|
#nav li:hover a, #nav li.sfhover a {
|
|
color:#747475;
|
|
}
|
|
|
|
|
|
#nav li:hover li a, #nav li li:hover li a, #nav li li li:hover li a, #nav li li li li:hover li a {
|
|
color:#747475;
|
|
}
|
|
|
|
|
|
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul, #nav li.sfhover ul ul ul ul {
|
|
left:-999em;
|
|
}
|
|
|
|
|
|
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul, #nav li li li li.sfhover ul {
|
|
left:auto;
|
|
background:#babbbd;
|
|
}
|
|
|
|
|
|
#nav li:hover, #nav li.sfhover {
|
|
background:#babbbd;
|
|
}
|
|
|
|
|
|
#nav li li.sfhover {
|
|
background:#c2c3c4;
|
|
}
|
|
|
|
|
|
#nav .current-cat{
|
|
background:#c7c8c9;
|
|
}
|
|
|
|
|
|
|
|
/* Begin Images */
|
|
p img {
|
|
padding: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Using 'class="alignright"' on an image will align the image to the right. And using 'class="centered',
|
|
will of course center the image. This is much better than using
|
|
align="center", being much more futureproof (and valid) */
|
|
|
|
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
|
|
}
|
|
/* End Images */
|
|
|
|
|
|
|
|
/* --------Footer------------*/
|
|
|
|
#footer{
|
|
background:#59595B url(images/texture-bottom.gif) no-repeat top left;
|
|
padding: 60px 0 40px 0;
|
|
float:left;
|
|
width: 100%;
|
|
text-align:center;
|
|
}
|
|
|
|
#footer p{
|
|
color:#86878a;
|
|
margin-bottom: 0;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#footer ul{
|
|
list-style:none;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
|
|
#footer li{
|
|
display:inline;
|
|
}
|
|
|
|
#footer li a{
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#footer a:visited{
|
|
color:#797a7d;
|
|
text-decoration:none;
|
|
}
|
|
|
|
#footer a:hover{
|
|
color:#1fa5de;
|
|
}
|
|
|
|
#footer a{
|
|
color:#797a7d;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.footerpages{
|
|
border-bottom: 1px solid #666666;
|
|
padding-bottom: 10px;
|
|
margin-bottom: 10px;
|
|
letter-spacing:1px;
|
|
font-family:century gothic;
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
} |