style/freggies/css/styles.css

   1 /* Created by http://freehtml5templates.com */
   2 /* reset */
   3 * {
   4 margin: 0;
   5 padding: 0;
   6 }
   7
   8 /* render html5 elements as block */
   9 header, footer, section, aside, nav, article {
  10 display: block;
  11 }
  12
  13 body {
  14 line-height: 1;
  15 background: #eee;
  16 font-family: Verdana, Arial, Helvetica, sans-serif;
  17 color: #000;
  18 font-size: 14px;
  19 line-height: 18px;
  20 }
  21
  22 /* layout */
  23
  24 #wrapper {
  25 width: 940px;
  26 margin: 0 auto;
  27 margin-top: 5px;
  28 margin-bottom: 5px;
  29 -webkit-box-shadow: 3px 3px 7px #777;
  30 -moz-box-shadow: 3px 3px 7px #777;
  31 border-left: 1px #777 solid;
  32 }
  33
  34 nav {
  35 width: 940px;
  36 height: 50px;
  37 margin: 0 auto;
  38 background: #110E0F;
  39 }
  40
  41 header {
  42 width: 940px;
  43 height: 200px;
  44 margin: 0 auto;
  45 background: #fff url(images/headerimg.jpg) no-repeat left top;
  46 }
  47
  48 #main {
  49 width: 940px;
  50 margin: 0 auto;
  51 padding-top: 30px;
  52 background: #FFF;
  53 overflow: hidden;
  54 }
  55
  56 #content {
  57 float: left;
  58 width: 640px;
  59 margin-left: 30px;
  60 padding-right: 20px;
  61 border-right: 1px #ddd solid;
  62 }
  63
  64 #sidebar {
  65 float: right;
  66 padding-left: 20px;
  67 width: 220px;
  68 }
  69
  70 footer {
  71 width: 940px;
  72 margin: 0 auto;
  73 clear: both;
  74 }
  75
  76 /* basics */
  77
  78 h1,h2,h3,h4,h5,h6 {
  79 font-weight: bold;
  80 clear: both;
  81 color: #808080;
  82 }
  83
  84 a:link, a:visited {
  85 color:#597b00;
  86 }
  87
  88 a:hover, a:active {
  89 color: #333;
  90 }
  91
  92 hr {
  93 background-color: #E7E7E7;
  94 border: 0;
  95 height: 1px;
  96 margin-bottom: 18px;
  97 clear: both;
  98 }
  99
 100 p {
 101 margin-bottom: 18px;
 102 }
 103
 104 li {
 105 padding-left: 5px;
 106 }
 107
 108 /* nav */
 109
 110 nav .menu {
 111 font-size: 16px;
 112 font-weight: bold;
 113 }
 114
 115 nav .menu ul {
 116 margin: 0;
 117 padding: 17px 0 0 20px;
 118 list-style: none;
 119 line-height: normal;
 120 }
 121
 122 nav .menu li {
 123 display: block;
 124 float: left;
 125 }
 126
 127 nav .menu a {
 128 display: block;
 129 float: left;
 130 margin-right: 5px;
 131 padding: 0px 15px;
 132 text-decoration: none;
 133 color: #FFF;
 134 }
 135
 136 nav .menu a:hover {
 137 border-top: #FFF 1px solid;
 138 border-bottom: #FFF 1px solid;
 139 }
 140
 141 /** HEADER */
 142
 143 header h1, #header h2 {
 144 margin: 0;
 145 padding: 0 0 0 30px;
 146 line-height: normal;
 147 }
 148
 149 header h1 {
 150 float: left;
 151 padding-top: 20px;
 152 font-size: 48px;
 153 }
 154
 155 header h1 a:link, header h1 a:visited {
 156 text-decoration: none;
 157 color: #FFF;
 158 }
 159
 160 header h1 a:hover {
 161 color: #ddd;
 162 }
 163
 164 header h2 {
 165 padding: 20px 0 0 30px;
 166 font-style: italic;
 167 font-size: 14px;
 168 color: #FFFFFF;
 169 }
 170
 171 /** ARTICLES **/
 172 article img {
 173 border: none;
 174 -webkit-box-shadow: 3px 3px 7px #777;
 175 -moz-box-shadow: 3px 3px 7px #777;
 176 }
 177
 178 #content p, ul, ol, hr {
 179 margin-bottom: 24px;
 180 }
 181
 182 #content ul ul, ol ol, ul ol, ol ul {
 183 margin-bottom: 0;
 184 }
 185
 186 #content h1, h2, h3, h4, h5, h6 {
 187 color: #808080;
 188 margin: 0 0 20px 0;
 189 line-height: 1.5em;
 190 }
 191
 192 #content h2, h2, h3 {
 193 text-shadow: 0px 2px 3px #ddd;
 194 }
 195
 196 .alignleft, img.alignleft {
 197 display: inline;
 198 float: left;
 199 margin-right: 24px;
 200 margin-top: 4px;
 201 }
 202
 203 .alignright, img.alignright {
 204 display: inline;
 205 float: right;
 206 margin-left: 24px;
 207 margin-top: 4px;
 208 }
 209
 210 .aligncenter, img.aligncenter {
 211 clear: both;
 212 display: block;
 213 margin-left: auto;
 214 margin-right: auto;
 215 }
 216
 217 img.alignleft, img.alignright, img.aligncenter {
 218 margin-bottom: 12px;
 219 }
 220
 221 /* sidebar and footer widget blocks */
 222
 223 aside h3 {
 224 font-size: 18px;
 225 text-shadow: 0px 2px 3px #ddd;
 226 }
 227
 228 aside ul {
 229 list-style: none;
 230 margin-bottom: 20px;
 231 margin-top: -15px;
 232 }
 233
 234 aside li a {
 235 text-decoration: none;
 236 }
 237
 238 #sidebar li a:hover {
 239 border-top: #333 1px solid;
 240 border-bottom: #333 1px solid;
 241 }
 242
 243 #footer-area {
 244 background: #597b00;
 245 color: #FFF;
 246 font-size: 90%;
 247 padding: 18px 0;
 248 overflow: hidden;
 249 }
 250
 251 .footer-segment {
 252 float: left;
 253 margin-right: 20px;
 254 margin-left: 20px;
 255 width: 190px;
 256 }
 257
 258 footer aside h4 {
 259 color: #FFF;
 260 font-size: 16px;
 261 line-height: 1.5em;
 262 }
 263
 264 footer a:link, footer a:visited {
 265 color: #FFF;
 266 }
 267
 268 footer a:hover {
 269 text-decoration: underline;
 270 }
 271
 272 .footerbottom {
 273 width: 940px;
 274 background: #000;
 275 }
 276
 277 .footerbottom p {
 278 color: #fff;
 279 font-size: 10px;
 280 text-align: right;
 281 padding-right: 20px;
 282 }
 283
 284 /* inline blocks of images and captions */
 285
 286 .benefits {
 287         display: inline-block;
 288         vertical-align: top;
 289         width: 120px;
 290         text-align: center;
 291         background: #ddd;
 292         border: 6px solid #808080;
 293 /* curved border radius */
 294         -moz-border-radius: 5px;
 295         -webkit-border-radius: 5px;
 296         margin: 2.3em;
 297         padding: .2em;
 298 }
 299
 300 .benefits .thumbnail {
 301         width: 64px;
 302         border: none;
 303 }
 304
 305 .benefits .caption {
 306         display: block;
 307 }
 308
 309 .benefitsheading {
 310 display: block;
 311 color: #597b00;
 312 font-size: 16px;
 313 font-style: italic;
 314 border-bottom: 1px #333 dotted;
 315 }
 316
 317