style.css

   1 /*
   2 Theme Name: RefreshWP
   3 Theme URI: http://www.exguides.org/
   4 Description: Wordpress theme based on Refresh open source web template by StyleShout. Supports Gravatar2 Plugin and Wordpress 2.1 compatible.
   5 Version: 1.5
   6 Author: StyleShout, ported by Navjot Singh
   7 Author URI: http://www.exguides.org/
   8 */
   9
  10
  11 /********************************************
  12    HTML ELEMENTS
  13 ********************************************/
  14
  15 /* Top Elements */
  16 * { margin: 0; padding: 0; }
  17
  18 body {
  19         background: #CCCCCC;
  20         font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
  21         color: #333;
  22         text-align: center;
  23 }
  24
  25 /* links */
  26 a, a:visited {
  27         text-decoration: none;
  28         color: #4F82CB;
  29
  30 }
  31 a:hover {
  32         color: #4EBF37;
  33
  34 }
  35
  36 /* headers */
  37 h1, h2, h3 {
  38         font-family: Tahoma, Verdana, 'Trebuchet MS', Sans-serif;
  39         font-weight: Bold;
  40 }
  41 h1 {
  42         font-size: 120%;
  43 }
  44 h2 {
  45         font-size: 110%;
  46         text-transform: uppercase;
  47         color: #88ac0b;
  48 }
  49 h3 {
  50         font-size: 110%;
  51         color: #666666;
  52 }
  53
  54 /* images */
  55 img {
  56         border: 0px solid #CCC;
  57 }
  58
  59 img.float-right {
  60   margin: 5px 0px 10px 10px;
  61 }
  62 img.float-left {
  63   margin: 5px 10px 10px 0px;
  64 }
  65
  66 h1, h2, h3, p {
  67         padding: 10px;
  68         margin: 0;
  69 }
  70 ul, ol {
  71         margin: 5px 20px;
  72         padding: 0 20px;
  73         color: #88ac0b;
  74 }
  75 ul span, ol span {
  76         color: #666666;
  77 }
  78
  79 code {
  80   margin: 5px 0;
  81   padding: 10px;
  82   text-align: left;
  83   display: block;
  84   overflow: auto;
  85   font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  86   /* white-space: pre; */
  87   background: #FAFAFA;
  88   border: 1px solid #f2f2f2;
  89 }
  90 acronym {
  91   cursor: help;
  92   border-bottom: 1px solid #777;
  93 }
  94 blockquote {
  95         margin: 10px;
  96         padding: 0 0 0 28px;
  97    border: 1px solid #f2f2f2;
  98         background: #FAFAFA url(images/quote.gif) no-repeat 5px 5px;
  99 }
 100
 101 /* form elements */
 102 form {
 103         margin:10px; padding: 0 5px;
 104         border: 1px solid #f2f2f2;
 105         background-color: #FAFAFA;
 106 }
 107 label {
 108         display:block;
 109         font-weight:bold;
 110         margin:5px 0;
 111 }
 112 input {
 113         padding:2px;
 114         border:1px solid #eee;
 115         font: normal 1em Verdana, sans-serif;
 116         color:#777;
 117 }
 118 textarea {
 119         width:400px;
 120         padding:2px;
 121         font: normal 1em Verdana, sans-serif;
 122         border:1px solid #eee;
 123         height:100px;
 124         display:block;
 125         color:#777;
 126 }
 127 input.button {
 128         margin: 0;
 129         font: bolder 12px Arial, Sans-serif;
 130         border: 1px solid #CCC;
 131         padding: 2px 3px;
 132         background: #FFF;
 133         color: #88ac0b;
 134 }
 135
 136 /* search */
 137 form.search {
 138 //      position: absolute;
 139         top: 35px; right: 25px;
 140         background: transparent;
 141         border: none;
 142 }
 143 form.search input.textbox {
 144         margin: 0; padding: 1px 2px;
 145         width: 120px;
 146         background: #FFF;
 147         color: #333;
 148 }
 149 form.search input.button {
 150         background: #CCC url(images/headerbg.gif) repeat-x;
 151         color: #333;
 152         border: none;
 153         width: 70px; height: 21px;
 154 }
 155
 156 /********************************************
 157    LAYOUT
 158 ********************************************/
 159 #wrap {
 160         width: 820px;
 161         background: #CCC url(images/content.jpg) repeat-y center top;
 162         margin: 0 auto;
 163         text-align: left;
 164 }
 165 #content-wrap {
 166         clear: both;
 167         width: 760px;
 168         padding: 0;
 169         margin: 0 auto;
 170 }
 171 #header {
 172         width: 820px;
 173         position: relative;
 174         height: 106px;
 175         background: #CCC url(images/header.jpg) no-repeat center top;
 176         padding: 0;
 177         font-size: 14px;
 178         color: #FFF;
 179 }
 180 #header h1#logo-text {
 181         position: absolute;
 182         margin: 0; padding: 0;
 183         font: bolder 3.0em 'Trebuchet MS', Arial, Sans-serif;
 184         letter-spacing: -2px;
 185         color: #FFF;
 186         text-transform: none;
 187
 188         /* change the values of top and left to adjust the position of the logo*/
 189         top: 28px; left: 50px;
 190 }
 191
 192 #header h1#logo-text a{
 193         color: #FFF;
 194         }
 195
 196 #header h2#slogan {
 197         position: absolute;
 198         margin: 0; padding: 0;
 199         font: normal .8em 'Trebuchet MS', Arial, Sans-serif;
 200         text-transform: none;
 201         color: #FFF;
 202
 203         /* change the values of top and left to adjust the position of the slogan*/
 204         top: 74px; left: 58px;
 205 }
 206
 207 /* Menu */
 208 #menu {
 209         clear: both;
 210         margin: 0; padding: 0px 40px 5px 0;
 211         background: url(images/menu.jpg) repeat-y center top;
 212         font: bold 12px/26px Verdana, Arial, Tahoma, Sans-serif;
 213         height: 26px;
 214 }
 215 #menu ul {
 216         float: left;
 217         list-style: none;
 218         margin:5px; padding: 20;
 219 }
 220 #menu ul li {
 221         display: inline;
 222 }
 223 #menu ul li a {
 224         display: block;
 225         float: left;
 226         padding: 0 8px;
 227         color: #FFF;
 228         text-decoration: none;
 229 }
 230 #menu ul li a:hover {
 231         background-color: #ECECEC;
 232         color: #333;
 233 }
 234 #menu ul li#current a {
 235         background-color: #FFF;
 236         color: #333;
 237 }
 238
 239 /* Main Column */
 240 #main {
 241         float: right;
 242         width: 72%;
 243         padding: 0; margin: 0;
 244 }
 245
 246 #main h1 {
 247         margin-top: 10px;
 248         font: Bold 125% Verdana, 'Trebuchet MS', Sans-serif;
 249         color: #88ac0b;
 250         padding: 5px 0 5px 25px;
 251         border-bottom: 1px solid #EFF0F1;
 252         background: #FFF url(images/square-green.png) no-repeat 3px 50%;
 253 }
 254
 255 .post-footer {
 256         background-color: #FAFAFA;
 257         padding: 5px; margin: 20px 10px 0 10px;
 258         border: 1px solid #f2f2f2;
 259         font-size: 95%;
 260 }
 261 .post-footer .date {
 262         background: url(images/clock.gif) no-repeat left center;
 263         padding-left: 20px; margin: 0 10px 0 5px;
 264 }
 265 .post-footer .comments {
 266         background: url(images/comment.gif) no-repeat left center;
 267         padding-left: 20px; margin: 0 10px 0 5px;
 268 }
 269 .post-footer .readmore {
 270         background: url(images/page.gif) no-repeat left center;
 271         padding-left: 20px; margin: 0 10px 0 5px;
 272 }
 273
 274 /* Sidebar */
 275 #sidebar {
 276         float: left;
 277         width: 26.5%;
 278         padding: 0; margin: 0;
 279 }
 280 #sidebar h1 {
 281         margin-top: 10px;
 282         padding: 5px 0 5px 10px;
 283         font: bold 1.1em Verdana, 'Trebuchet MS', Sans-serif;
 284         color: #555;
 285         background: #EEF0F1 url(images/headerbg.gif) repeat-x left bottom;
 286         border: 1px solid #EFF0F1;
 287 }
 288 #sidebar .left-box {
 289         border: 1px solid #EFF0F1;
 290         margin: 0 0 5px 0;
 291 }
 292 #sidebar ul.sidemenu {
 293         list-style: none;
 294         text-align: left;
 295         margin: 5px 5 8px 0; padding: 0;
 296         text-decoration: none;
 297 }
 298 #sidebar ul.children {
 299         list-style: none;
 300         text-align: left;
 301         margin: 3px 0 8px 0; padding: 0;
 302         text-decoration: none;
 303 }
 304 #sidebar ul.sidemenu li {
 305         border-bottom: 1px solid #EFF0F1;
 306         background: url(images/go.gif) no-repeat 5px 5px;
 307         padding: 5px 0 2px 25px;
 308         margin: 0 2px;
 309 }
 310 #sidebar ul.sidemenu a {
 311         font-weight: bolder;
 312         text-decoration: none;
 313         background-image: none;
 314 }
 315
 316 /* Footer */
 317 #footer {
 318         color: #666666;
 319         background: #CCC url(images/footer.jpg) no-repeat center top;
 320         clear: both;
 321         width: 820px;
 322         height: 55px;
 323         text-align: center;
 324         font-size: 92%;
 325 }
 326 #footer a { text-decoration: none; }
 327
 328 /* alignment classes */
 329 .float-left  { float: left; }
 330 .float-right { float: right; }
 331 .align-left  { text-align: left; }
 332 .align-right { text-align: right; }
 333
 334 /* display and additional classes */
 335 .clear { clear: both; }
 336 .gray { color: #CCC; }
 337