Day by day blog
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CoolBlue</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Erwin Aligam - styleshout.com" />
<meta name="description" content="Site Description Here" />
<meta name="keywords" content="keywords, here" />
<meta name="robots" content="index, follow, noarchive" />
<meta name="googlebot" content="noarchive" />
<style type='text/css'>
/* -----------------------------------------------------------------------------
Template Name : CoolBlue
Template Code : S-0031
Version : 1.0
Author : Erwin Aligam
Author URI : http://www.styleshout.com/
Last Date Modified : March 10, 2010
-------------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------------
G E N E R A L
--------------------------------------------------------------------------------- */
body {
font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
color: #777;
margin: 0; padding: 0;
background: url(coolblue-images/bg.jpg);
}
/* links */
a:link, a:visited {
text-decoration: none;
color: #FF409F;
}
a:hover { color: #147DB6; }
a:link.more, a:visited.more {
float: left;
margin-top: 20px;
margin-right: 5px;
padding: 6px 8px;
border: 1px solid #2177A5;
background-color: #227bad;
text-transform: lowercase;
text-decoration: none;
font-weight: bold;
color: #fff;
}
a:hover.more {
border: 1px solid #FF2B95;
background-color: #FF3399;
}
/* Headers */
h1, h2, h3, h4 {
font: bold 1em/1.5em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
color: #555;
margin: 8px 25px;
}
h1 { font-size: 3.7em; font-weight: normal; letter-spacing: -2px; }
h2 { font-size: 2.8em; font-weight: normal; }
h3 { font-size: 2.2em; font-weight: normal; letter-spacing: -0.5px; padding-top: 15px; }
h4 { font-size: 1.5em; }
/* lists */
ul, ol {
margin: 10px 25px;
padding: 0 20px;
}
ul { list-style: disc; }
ol { list-style: decimal; }
dt {
font-weight: bold;
color: #1980AF;
}
dd {
padding-left: 20px;
}
p, dl { margin: 10px 25px; }
/* images */
img {
background: #F3F4F5;
border: 1px solid #E2E4E7;
padding: 10px;
}
img.float-right { margin: 5px 0px 10px 10px; }
img.float-left { margin: 5px 10px 10px 0px; }
code {
margin: 3px 0;
padding: 20px;
text-align: left;
display: block;
overflow: auto;
font: 500 1em/1.5em 'Lucida Console', 'Courier New', Monospace;
/* white-space: pre; */
border: 1px solid #F0F0F0;
background: #F8F8F8;
color: #555;
}
acronym {
cursor: help;
border-bottom: 1px dotted #777;
}
blockquote {
margin: 10px 25px;
padding: 10px 20px 10px 32px;
border: 1px solid #F0F0F0;
background: #f8f8f8 url(coolblue-images/quote.gif) no-repeat 12px 12px;
font-weight: normal;
font-size: 17px;
line-height: 1.5em;
font-style: italic;
font-family: Georgia, 'Times New Roman', Times, Serif;
color: #555;
}
strong { font-weight: bold; }
/* table */
table {
border-collapse: collapse;
margin: 10px 25px;
}
tr { background: #FFF; }
th, td {
text-align: left;
border-width: 1px;
border-style: solid;
}
th {
padding: .8em 1em;
background: #2C76A6;
border-color: #308ABA #308ABA #246F97 #308ABA;
color: #fff;
font-weight: bold;
}
td {
border-color: #E9E9E9;
padding: .7em 1em;
}
/* form elements */
form {
margin: 10px 25px 10px 25px;
padding: 10px 25px 25px 25px;
background: #F3F4F5;
border: 1px solid #E2E4E7;
width: 477px;
}
form p {
border-bottom: 1px solid #E6E6E6;
padding: 12px 0 5px 0; margin: 0;
color: #2C76A6;
}
label {
font-weight: bold;
color: #666666;
}
input, select, textarea {
margin: 5px 0;
padding: 7px 6px;
color: #6A6969;
border-width: 1px;
border-style: solid;
border-color: #D4D4D4 #EBEBEB #EBEBEB #D4D4D4;
font: 11px 'Lucida Grande', Verdana, Helvetica, sans-serif;
}
input:focus, select:focus, textarea:focus {
color: #19465D;
background: #EEF8FB;
}
#name, #email, #message, #website {
width: 460px;
}
input.button {
font: bold 12px Arial, Sans-serif;
height: 30px;
margin: 0;
padding: 2px 3px;
color: #FFF;
background: #2C76A6;
border-width: 1px;
border-style: solid;
border-color: #86BBDF #245F86 #245F86 #86BBDF;
cursor: pointer;
}
/* ------------------------------------------------------------------------------
L A Y O U T
--------------------------------------------------------------------------------- */
/* header */
#header-wrap {
float: left;
height: 200px;
width: 100%;
background: url(coolblue-images/header-bg.jpg) repeat-x;
}
#header {
position: relative;
margin: 0 auto;
width: 1000px;
}
#header h1#logo-text { margin: 0; padding: 0; }
#header h1#logo-text a {
position: absolute;
margin: 0; padding: 0 5px 0 0;
font: bold 55px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-Serif;
letter-spacing: -4px;
color: #333;
text-decoration: none;
/* change the values of top and left to adjust the position of the logo*/
top: 82px; left: 25px;
}
#header p#slogan {
position: absolute;
margin: 0; padding: 0 5px 0 0;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
font-weight: bold;
font-size: 11px;
line-height: 1.8em;
font-style: normal;
letter-spacing: -.5px;
color: #0d6684;
/* change the values of top and left to adjust the position */
top: 142px; left: 30px;
}
/* RSS */
#header p#rss {
position: absolute;
width: 175px;
height: 50px;
top: 15px; right: 17px;
padding: 0; margin: 0;
text-align: right;
}
#header p#rss a {
background: transparent url(coolblue-images/rss.gif) no-repeat left center;
color: #baa7a7;
height: 30px;
font: bold 12px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
margin: 0;
padding: 10px 0 0 30px;
display: block;
}
#header p#rss a:hover { color: #fff; }
/* Quick Search */
form#quick-search {
position: absolute;
top: 95px; right: 12px;
background: transparent;
border: none;
margin: 0; padding: 0;
width: 250px;
}
fieldset.search {
border: none;
width: 250px; height: 40px;
padding: 0; margin: 0;
background: url(coolblue-images/search.gif) no-repeat;
}
.search input {
border: none;
float: left;
padding: 0; margin: 0;
}
.search button {
border: none;
float: right;
padding: 0; margin: 0;
}
.search label { display: none; }
.search input.tbox {
color: #7d8285;
font-weight: bold;
margin: 15px 0 10px 10px;
background: transparent;
width: 200px;
}
.search button.btn {
width: 40px;
height: 40px;
cursor: pointer;
text-indent: -9999px;
background: #fbc900 url(coolblue-images/search.gif) no-repeat top right;
}
/* navigation */
#header #nav {
position: absolute;
left: 15px; top: 25px;
margin: 0; padding: 0;
width: 750px;
}
#header #nav ul {
float: left;
list-style: none;
margin: 0; padding: 0;
height: 45px;
}
#header #nav ul li {
float: left;
margin: 0; padding: 0;
}
#header #nav ul li a {
float:left;
margin: 0;
padding: 0 15px 29px 15px;
color: #baa7a7;
font: bold 12px 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
}
#header #nav ul li a:hover,
#header #nav ul li a:active {
border: none;
color: #fff;
}
#header #nav ul li#current a {
background: transparent url(coolblue-images/current.jpg) no-repeat center bottom;
color: #fff;
}
/* content */
#content-wrap {
clear: both;
margin: 0; padding: 0;
background: #fff;
width: 100%;
float: left;
}
#content {
width: 1000px;
margin: 0 auto;
padding: 0 0 20px 0;
background: #FFF url(coolblue-images/content.gif) repeat-y center top;
overflow: hidden;
}
/* columns */
#main {
float: left;
margin: 0;
padding: 25px 0 0 0;
width: 740px;
}
#sidebar {
width: 245px;
float: right;
margin: 0;
padding: 15px 0;
font-size: .95em;
}
#main h2 {
font: bold 3.2em/1em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
color: #333;
letter-spacing: -2.0px;
margin-bottom: 0;
padding-bottom: 0;
}
#main h2 a { color: #333; }
#sidebar h3 {
font: bold 1.7em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
letter-spacing: .2px;
margin-left: 10px;
color: #333;
}
#sidebar h3, #sidebar p {
margin-left: 10px;
}
#sidebar img { padding: 8px; }
/* sidemenu */
.sidemenu ul {
text-align: left;
margin: 10px 15px 10px 8px;
padding: 0;
border-top: 1px solid #EFEFEF;
}
.sidemenu ul li {
list-style: none;
font-size: 11px;
margin: 0;
padding: 7px 5px;
border-bottom: 1px solid #EFEFEF;
}
* html body .sidemenu ul li { height: 1%; }
.sidemenu ul li a:link,
.sidemenu ul li a:visited {
color: #33799B;
padding-left: 0;
font-weight: bold;
text-transform: uppercase;
}
.sidemenu ul li a span {
color: #959595;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
font-style: normal;
font-weight: normal;
text-transform: none;
}
.sidemenu ul li a:hover { color: #000; }
.sidemenu ul ul { margin: 0 0 0 5px; padding: 0; }
.sidemenu ul ul li { border: none; }
/* popular */
.popular ul {
text-align: left;
margin: 10px 15px 10px 8px;
padding: 0;
border-top: 1px solid #EFEFEF;
}
.popular ul li {
list-style: none;
border-bottom: 1px solid #EFEFEF;
font-size: 12px;
line-height: 1.5em;
padding: 8px 5px 8px 20px;
margin: 0;
background: url(coolblue-images/document.gif) no-repeat 3px 11px;
}
* html body .popular ul li { height: 1%; }
.popular ul li a:link,
.popular ul li a:visited {
color: #33799B;
padding-left: 0;
font-weight: bold;
text-transform: none;
}
.popular ul li span {
color: #888;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
font-size: 10px;
line-height: 1.7em;
}
.popular ul li a:hover { color: #000; }
/* footer */
#footer-outer {
clear: both;
text-align: left;
width: 100%;
font-size: .9em;
color: #C2DBE7;
padding-bottom: 30px;
border-top: #1a5d8a;
}
#footer-wrap {
width: 1000px;
margin: 0 auto;
}
#footer-wrap a:link,
#footer-wrap a:visited { color: #fff; }
#footer-wrap a:hover { color: #99CCFF; }
#footer-wrap h3 {
font: bold 1.7em 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
letter-spacing: .2px;
margin-bottom: 15px;
color: #fff;
}
/* gallery */
#footer-wrap #gallery {
padding: 0 0 10px 0;
margin: 0;
width: 100%;
background: url(coolblue-images/footer-line.gif) repeat-x left bottom;
/* border-bottom: 1px solid #326B8D; */
}
#footer-wrap #gallery h3 {
float: left;
display: inline;
width: 200px;
margin: 30px 0 0 20px;
padding: 0;
}
#footer-wrap #gallery p.thumbs {
float: right;
display: inline;
width: 730px;
margin: 20px 0 0 0;
padding: 0;
}
p.thumbs img {
position: relative;
padding: 8px;
margin: 10px 10px 10px 0;
background: #FAFAFA;
border: 1px solid #EDEDED;
}
/* footer columns */
#footer-wrap .col-a {
width: 250px;
float: left;
}
#footer-wrap .col-b {
width: 245px;
float: right;
}
/* recent comments */
.recent-comments ul {
text-align: left;
margin-left: 20px;
padding: 0;
background: url(coolblue-images/footer-line.gif) repeat-x left top;
}
.recent-comments ul li {
list-style: none;
font-size: 12px;
line-height: 1.5em;
padding: 7px 5px 7px 20px;
background: url(coolblue-images/speech_bubble.gif) no-repeat 3px 11px;
}
* html body .recent-comments ul li { height: 1%; }
.recent-comments ul li a:link,
.recent-comments ul li a:visited { padding-left: 0; }
.recent-comments ul li cite {
font-size: .9em;
font-style: normal;
}
/* footer-list */
.footer-list ul {
background: url(coolblue-images/footer-line.gif) repeat-x left top;
list-style: none;
padding: 0;
margin-left: 20px;
}
.footer-list ul li { border-bottom: 1px solid #326B8D; }
.footer-list ul li a:link,
.footer-list ul li a:visited {
display: block;
width: 98%;
line-height: 2em;
padding: 5px 0 5px 5px;
margin-left: 0;
color: #fff;
}
.footer-list ul li a:hover { color: #99CCFF; }
/* subscribe stuff */
ul.subscribe-stuff {
list-style: none;
margin: 0 0 0 20px; padding: 0;
}
ul.subscribe-stuff li {
float: left;
margin: 0 3px 0 0; padding: 0;
}
ul.subscribe-stuff li img {
padding: 0; margin: 0;
border: none;
background: none;
}
/* footer-bottom */
#footer-bottom {
clear: both;
width: 1000px;
font-size: .9em;
margin: 0 auto;
padding-top: 10px;
font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
font-size: .9em;
color: #C2DBE7;
overflow: hidden;
background: url(coolblue-images/footer-line.gif) repeat-x left top;
}
#footer-bottom a { color: #fff; }
#footer-bottom a:hover { color: #99CCFF; }
#footer-bottom p.bottom-left {
float: left;
display: inline;
margin: 0 0 30px 20px;
padding: 0;
width: 600px;
text-align: left;
}
#footer-bottom p.bottom-right {
float: right;
display: inline;
margin: 0 30px 30px 0;
padding: 0;
width: 320px;
text-align: right;
}
/* ------------------------------------------------------------------------------
B L O G P O S T
--------------------------------------------------------------------------------- */
.post {
margin: 5px 0 20px 0;
padding: 0 0 20px 0;
width: 740px;
overflow: hidden;
border-bottom: 1px solid #eee;
}
.right {
width: 560px;
float: right;
display: inline;
padding-right: 15px;
}
.left {
position: relative;
width: 150px;
float: right;
display: inline;
}
.right .image-section {
clear: both;
display: block;
margin: 25px 0 10px 20px;
padding: 0;
}
.right .image-section img {
background: #F3F4F5;
border: 1px solid #E2E3E7;
padding: 12px;
}
.right h2 { margin-top: 0; }
/* share */
.right .share-box {
margin: 20px 12px 0 20px;
padding: 0 10px 10px 20px;
background: #FAFAFA;
border: 1px solid #EAECEE;
overflow: hidden;
width: 494px;
}
.right .share-box h4 {
margin-left: 0;
}
.right .share-box ul {
list-style: none;
margin: 0; padding: 0;
}
.right .share-box ul li {
float: left;
margin-right: 5px;
}
.right .share-box ul li a:hover { cursor: pointer; }
.right .share-box ul li img {
margin: 0;
padding: 5px;
background: #fff;
}
/* dateinfo */
.left p.dateinfo {
background: url(coolblue-images/date-bg.gif) no-repeat;
height: 83px;
width: 68px;
margin: 12px 0 0 70px;
padding: 8px 0 0 1px;
font: bold 15px Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
letter-spacing: 2px;
color: #fff;
}
.left p.dateinfo span {
font: bold 30px Arial, Helvetica, sans-serif;
display: block;
color: #555;
margin: 8px 0 0 0;
padding: 0;
letter-spacing: 0;
}
/* post meta */
.left .post-meta {
width: 140px;
font-size: .9em;
margin: 5px 0 20px 0;
padding: 0;
}
.left .post-meta h4 {
text-align: right;
margin: 0 5px 10px 5px;
padding: 0;
color: #555;
}
.left .post-meta ul {
list-style: none;
margin: 0; padding: 0;
border-top: 1px solid #F1F1F1;
}
.left .post-meta ul li {
list-style: none;
border-bottom: 1px solid #F1F1F1;
padding: 3px 5px;
margin: 0;
text-align: right;
color: #147DB6;
}
* html body .left .post-meta ul li { height: 1%; }
.left .post-meta ul.tags li { background: url(coolblue-images/tag.gif) no-repeat 2px center; }
.left .post-meta ul li.user { background: url(coolblue-images/user.gif) no-repeat 2px center; }
.left .post-meta ul li.time { background: url(coolblue-images/clock.gif) no-repeat 2px center; }
.left .post-meta ul li.comment { background: url(coolblue-images/comment.gif) no-repeat 2px center; }
.left .post-meta ul li.permalink { background: url(coolblue-images/permalink.gif) no-repeat 2px center; }
.left .post-meta ul li a { color: #147DB6; }
.left .post-meta ul li a:hover { color: #333; }
/* post bottom */
.post-bottom-section {
position: relative;
margin: 10px 0 20px 0;
padding: 0 0 20px 0;
width: 740px;
overflow: hidden;
border-bottom: 1px solid #eeeeee;
}
.post-bottom-section h4 {
position: absolute;
left: 0px; top: 5px;
text-align: right;
width: 135px;
}
.post-bottom-section .right form {
position: relative;
top: 15px; left: 20px;
margin: 0 0 20px 0 ;
}
/* post info */
.post-info { margin-top: 3px; }
.post .post-info a:link,
.post .post-info a:visited {
color: #1372a8;
border: none;
font-size: .9em;
}
/* comments list */
ol.commentlist {
margin: 12px 12px 12px 20px;
padding: 0;
background: #FAFAFA;
border-top: 1px solid #EAECEE;
}
.commentlist li {
list-style: none;
margin: 0;
padding: 12px 0 0 0;
border: 1px solid #EAECEE;
border-width: 0 1px 1px 1px;
overflow: hidden;
}
.commentlist li a:link,
.commentlist li a:visited {
color: #227bad;
}
.commentlist li .comment-info {
width: 99%;
margin: 0; padding: 0;
overflow: hidden;
}
.commentlist li .comment-info img {
float: right;
margin: 3px 13px 0 0;
background: #fff;
border: 1px solid #E8EAEC;
display: inline;
}
.commentlist li .comment-info cite {
display: block;
margin: 0; padding: 5px 65px 5px 20px;
font-style: normal;
font-weight: bold;
}
.commentlist li .comment-info cite .comment-data {
font-size: .8em;
font-weight: normal;
}
.commentlist li .comment-text {
clear: both;
margin: 0; padding: 0 20px 25px 20px;
}
.commentlist li .comment-text p {
margin: 5px 0 20px 0;
padding: 0;
}
.commentlist li .comment-text .reply a {
padding: 5px;
border: 1px solid #2177A5;
background-color: #227bad;
font-weight: bold;
font-size: 11px;
color: #fff;
}
.commentlist li ul.children { margin:0; padding: 0; }
.commentlist li ul.children li.depth-2,
.commentlist li ul.children li.depth-3 {
margin-left: 40px;
border-style: solid;
border-color: #E1E6E8;
border-width: 1px 0 0 1px;
}
.commentlist li.thread-alt {
background: #F3F4F5;
border-color: #E2E4E7;
}
/* ------------------------------------------------------------------------------
A R C H I V E S
--------------------------------------------------------------------------------- */
ul.archive {
margin: 10px 30px 10px 20px;
padding: 0;
border-top: 1px solid #eeeeee;
}
ul.archive li {
margin: 0;
padding: 12px 5px;
border-bottom: 1px solid #eeeeee;
list-style: none;
}
ul.archive li .post-title {
margin: 0; padding: 0;
font-size: 1.2em;
font-weight: bold;
}
ul.archive li .post-title a:link,
ul.archive li .post-title a:visited {
color: #444;
}
ul.archive li .post-title a:hover {
border: none;
color: #000;
}
ul.archive li .post-details {
margin-left: 0;
margin-top: 0;
font-size: .9em;
}
ul.archive li .post-details a:link,
ul.archive li .post-details a:visited {
color: #1372a8;
}
/* pagenavigation */
.navigation {
margin: 10px 20px; padding: 0;
width: 560px;
}
.navigation a:link,
.navigation a:visited {
float: left;
display: block;
margin: 10px 10px 0 0;
padding: 5px 7px;
text-transform: lowercase;
text-decoration: none;
font-weight: bold;
color: #fff;
background: #2C76A6;
border-width: 1px;
border-style: solid;
border-color: #86BBDF #245F86 #245F86 #86BBDF;
}
.navigation a:hover {
background: #FF3399;
border-width: 1px;
border-style: solid;
border-color: #FF75BA #EA0075 #EA0075 #FF75BA;
}
/* ------------------------------------------------------------------------------
M I S C
--------------------------------------------------------------------------------- */
/* alignment classes & additional classes */
.float-left { float: left; }
.float-right { float: right; }
.align-left { text-align: left; }
.align-right { text-align: right; }
.no-border { border: none; }
.no-bg { background: none; }
/* clearing */
.fix {
clear: both;
height: 1px;
margin: -1px 0 0;
overflow: hidden;
}
.clear { display:inline-block; }
.clear:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content: " ";
}
/* ------------------------------------------------------------------------------
E N H A N C E M E N T S
--------------------------------------------------------------------------------- */
/* css3 design enhancements */
a:link.more, a:visited.more {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
img {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#header h1#logo-text a {
text-shadow: 1px 1px 0 #fff;
}
#header #nav ul,
#header p#rss a {
text-shadow: 1px 2px 0 rgba(0,0,0,0.9);
}
#footer-outer,
#footer-bottom {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
p.thumbs img {
-moz-box-shadow: 1px 1px 3px #184569 ;
-webkit-box-shadow: 1px 1px 3px #184569;
box-shadow: 1px 1px 3px #184569;
}
.right .image-section img {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 3px 3px 3px #F3F4F5, -3px -3px 3px #F3F4F5;
-webkit-box-shadow: 3px 3px 3px #F3F4F5, -3px -3px 3px#F3F4F5;
box-shadow: 3px 3px 3px#F3F4F5, -3px -3px 3px #F3F4F5;
}
.left p.dateinfo { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); }
.left p.dateinfo span { text-shadow: none; }
/* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
/* theme screen stylesheets */
/* import stylesheets and hide from IE/Mac \*/
@import url("reset.css");
@import url("coolblue.css");
@import url("enhancements.css");
/* end import/hide */
</style>
</head>
<body>
<!--header -->
<div id="header-wrap"><div id="header">
<a name="top"></a>
<h1 id="logo-text"><a href="index.html" title="">coolblue</a></h1>
<p id="slogan">Just Another Styleshout CSS Template... </p>
<div id="nav">
<ul>
<li id="current"><a href="index.html">Home</a></li>
<li><a href="style.html">Style Demo</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="archives.html">Archives</a></li>
<li><a href="index.html">Support</a></li>
<li><a href="index.html">About</a></li>
</ul>
</div>
<p id="rss">
<a href="index.html">Grab the RSS feed</a>
</p>
<form id="quick-search" method="get" action="index.html">
<fieldset class="search">
<label for="qsearch">Search:</label>
<input class="tbox" id="qsearch" type="text" name="qsearch" value="Search..." title="Start typing and hit ENTER" />
<button class="btn" title="Submit Search">Search</button>
</fieldset>
</form>
<!--/header-->
</div></div>
<!-- content-outer -->
<div id="content-wrap" class="clear" >
<!-- content -->
<div id="content">
<!-- main -->
<div id="main">
<div class="post">
<div class="right">
<h2><a href="index.html">Read Me First</a></h2>
<p class="post-info">Filed under <a href="index.html">templates</a>, <a href="index.html">
internet</a></p>
<div class="image-section">
<img src="images/img-post.jpg" alt="image post" height="200" width="500"/>
</div>
<p><strong>CoolBlue</strong> is a free, W3C-compliant, CSS-based
website template by <a href="http://www.styleshout.com/">
styleshout.com</a>. This work is distributed under the <a rel="license" href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5 License</a>, which means
that you are free to use and modify it for any purpose. All I ask
is that you give me credit by including a <strong>link back</strong>
to
<a href="http://www.styleshout.com/">my website</a>.
</p>
<p>
You can find more of my free template designs at <a href="http://www.styleshout.com/">
my website</a>. For premium commercial designs, you can check out
<a href="http://www.dreamtemplate.com" title="Website Templates">
DreamTemplate.com</a>.
</p>
<p><a class="more" href="index.html">continue reading >></a></p>
</div>
<div class="left">
<p class="dateinfo">JAN<span>31</span></p>
<div class="post-meta">
<h4>Post Info</h4>
<ul>
<li class="user"><a href="#">Erwin</a></li>
<li class="time"><a href="#">12:30 PM</a></li>
<li class="comment"><a href="#">2 Comments</a></li>
<li class="permalink"><a href="#">Permalink</a></li>
</ul>
</div>
</div>
</div>
<div class="post">
<div class="right">
<h2><a href="index.html">Aliquam Risus Justo</a></h2>
<p class="post-info">Filed under <a href="index.html">templates</a>, <a href="index.html">
internet</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec libero. Suspendisse bibendum. Cras id urna. Morbi
tincidunt, orci ac <a href="index.html">convallis aliquam</a>,
lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
<p>
Donec mattis, purus nec placerat bibendum, <a href="index.html">
dui pede condimentum</a>
odio, ac blandit ante orci ut diam. Cras fringilla magna.
Phasellus suscipit, leo a pharetra condimentum, lorem tellus
eleifend magna, <a href="index.html">eget fringilla velit</a>
magna id neque. Curabitur vel urna. In tristique orci
porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec libero. Suspendisse bibendum. Cras id
urna. Morbi tincidunt, orci ac convallis aliquam, lectus
turpis varius lorem, eu posuere nunc justo tempus leo.</p>
<p><a class="more" href="index.html">continue reading >></a></p>
</div>
<div class="left">
<p class="dateinfo">JAN<span>29</span></p>
<div class="post-meta">
<h4>Post Info</h4>
<ul>
<li class="user"><a href="#">Erwin</a></li>
<li class="time"><a href="#">10:30 PM</a></li>
<li class="comment"><a href="#">5 comments</a></li>
<li class="permalink"><a href="#">Permalink</a></li>
</ul>
</div>
</div>
</div>
<div class="post">
<div class="right">
<h2><a href="index.html">Lorem Ipsum Dolor Sit Amet</a></h2>
<p class="post-info">Filed under <a href="index.html">templates</a>, <a href="index.html">
internet</a></p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Donec libero. Suspendisse bibendum. Cras id urna. Morbi
tincidunt, orci ac <a href="index.html">convallis aliquam</a>,
lectus turpis varius lorem, eu posuere nunc justo tempus leo.</p>
<p>
Donec mattis, purus nec placerat bibendum, <a href="index.html">
dui pede condimentum</a>
odio, ac blandit ante orci ut diam. Cras fringilla magna.
Phasellus suscipit, leo a pharetra condimentum, lorem tellus
eleifend magna, <a href="index.html">eget fringilla velit</a>
magna id neque. Curabitur vel urna. In tristique orci
porttitor ipsum. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Donec libero. Suspendisse bibendum. Cras id
urna. Morbi tincidunt, orci ac convallis aliquam, lectus
turpis varius lorem, eu posuere nunc justo tempus leo.</p>
<p><a class="more" href="index.html">continue reading >></a></p>
</div>
<div class="left">
<p class="dateinfo">JAN<span>25</span></p>
<div class="post-meta">
<h4>Post Info</h4>
<ul>
<li class="user"><a href="#">Erwin</a></li>
<li class="time"><a href="#">11:30 AM</a></li>
<li class="comment"><a href="#">7 comments</a></li>
<li class="permalink"><a href="#">Permalink</a></li>
</ul>
</div>
</div>
</div>
<!-- /main -->
</div>
<!-- sidebar -->
<div id="sidebar">
<div class="about-me">
<h3>About Me</h3>
<p>
<a href="index.html"><img src="images/gravatar.jpg" width="40" height="40" alt="firefox" class="float-left" /></a>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
libero. Suspendisse bibendum. Cras id urna. Morbi tincidunt, orci
ac convallis aliquam, lectus turpis varius lorem, eu posuere nunc
justo tempus leo <a href="index.html">Learn more...</a>
</p>
</div>
<div class="sidemenu">
<h3>Sidebar Menu</h3>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html#TemplateInfo">TemplateInfo</a></li>
<li><a href="style.html">Style Demo</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="archives.html">Archives</a></li>
<li>
<a href="http://www.buywebtemplates.net" title="Web Templates">
Web Templates</a></li>
</ul>
</div>
<div class="sidemenu">
<h3>Sponsors</h3>
<ul>
<li><a href="http://www.dreamtemplate.com" title="Website Templates">
DreamTemplate <br />
<span>Over 6,000+ Premium Web Templates</span></a>
</li>
<li><a href="http://www.themelayouts.com" title="WordPress Themes">
ThemeLayouts <br />
<span>Premium WordPress & Joomla Themes</span></a>
</li>
<li><a href="http://www.imhosted.com" title="Website Hosting">
ImHosted.com <br />
<span>Affordable Web Hosting Provider</span></a>
</li>
<li><a href="http://www.dreamstock.com" title="Stock Photos">
DreamStock <br />
<span>Download Amazing Stock Photos</span></a>
</li>
<li><a href="http://www.evrsoft.com" title="Website Builder">
Evrsoft <br />
<span>Website Builder Software & Tools</span></a>
</li>
<li><a href="http://www.ehostinfo.com/" title="Web Hosting">
Web Hosting <br />
<span>Top 10 Hosting Reviews</span></a>
</li>
</ul>
</div>
<div class="popular">
<h3>Most Popular</h3>
<ul>
<li><a href="index.html">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.</a>
<br /><span>Posted on December 22, 2010</span>
</li>
<li><a href="index.html">Cras fringilla magna. Phasellus
suscipit.</a>
<br /><span>Posted on December 20, 2010</span>
</li>
<li><a href="index.html">Morbi tincidunt, orci ac convallis
aliquam.</a>
<br /><span>Posted on December 15, 2010</span>
</li>
<li><a href="index.html">Ipsum dolor sit amet, consectetuer
adipiscing elit.</a>
<br /><span>Posted on December 14, 2010</span>
</li>
<li><a href="index.html">Morbi tincidunt, orci ac convallis
aliquam, lectus turpis varius lorem</a>
<br /><span>Posted on December 12, 2010</span>
</li>
</ul>
</div>
<!-- /sidebar -->
</div>
<!-- content -->
</div>
<!-- /content-out -->
</div>
<!-- footer-outer -->
<div id="footer-outer" class="clear"><div id="footer-wrap">
<div id="gallery" class="clear">
<h3>Flickr Photos </h3>
<p class="thumbs">
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
<a href="index.html"><img src="images/thumb.jpg" width="40" height="40" alt="thumbnail" /></a>
</p>
</div>
<div class="col-a">
<h3>Contact Info</h3>
<p>
<strong>Phone: </strong>+1234567<br/>
<strong>Fax: </strong>+123456789
</p>
<p><strong>Address: </strong>123 Put Your Address Here</p>
<p><strong>E-mail: </strong>me@coolblue.com</p>
<p>Want more info - go to our <a href="#">contact page</a></p>
<h3>Updates</h3>
<ul class="subscribe-stuff">
<li><a title="RSS" href="index.html" rel="nofollow">
<img alt="RSS" title="RSS" src="images/social_rss.png" /></a>
</li>
<li><a title="Facebook" href="index.html" rel="nofollow">
<img alt="Facebook" title="Facebook" src="images/social_facebook.png" /></a>
</li>
<li><a title="Twitter" href="index.html" rel="nofollow">
<img alt="Twitter" title="Twitter" src="images/social_twitter.png" /></a>
</li>
<li><a title="E-mail this story to a friend!" href="index.html" rel="nofollow">
<img alt="E-mail this story to a friend!" title="E-mail this story to a friend!" src="images/social_email.png" /></a>
</li>
</ul>
<p>Stay up to date. Subscribe via
<a href="index">RSS</a>, <a href="index">Facebook</a>,
<a href="index">Twitter</a> or <a href="index">Email</a>
</p>
</div>
<div class="col-a">
<h3>Site Links</h3>
<div class="footer-list">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="index.html">Style Demo</a></li>
<li><a href="index.html">Blog</a></li>
<li><a href="index.html">Archive</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Template Info</a></li>
<li><a href="index.html">Site Map</a></li>
</ul>
</div>
<h3>Friends</h3>
<div class="footer-list">
<ul>
<li><a href="index.html">consequat molestie</a></li>
<li><a href="index.html">sem justo</a></li>
<li><a href="index.html">semper</a></li>
<li><a href="index.html">magna sed purus</a></li>
<li><a href="index.html">tincidunt</a></li>
<li><a href="index.html">consequat molestie</a></li>
<li><a href="index.html">magna sed purus</a></li>
</ul>
</div>
</div>
<div class="col-a">
<h3>Credits</h3>
<div class="footer-list">
<ul>
<li><a href="http://jasonlarose.com/blog/110-free-classy-social-media-icons">
110 Free Classy Social Media Icons by Jason LaRose
</a>
</li>
<li><a href="http://wefunction.com/2009/05/free-social-icons-app-icons/">
Free Social Media Icons by WeFunction
</a>
</li>
<li><a href="http://www.famfamfam.com/lab/icons/">
Free Icons by FAMFAMFAM
</a>
</li>
</ul>
</div>
<h3>Recent Comments</h3>
<div class="recent-comments">
<ul>
<li><a href="index.html" title="Comment on title">Whoa! This one is
really cool...</a><br /> - <cite>Erwin</cite></li>
<li><a href="index.html" title="Comment on title">Wow. This theme is
really awesome...</a><br /> - <cite>John Doe</cite></li>
<li><a href="index.html" title="Comment on title">Type your comment
here...</a><br />- <cite>Naruto</cite></li>
<li><a href="index.html" title="Comment on title">And don't forget
this theme is free...</a><br /> - <cite>Shikamaru</cite></li>
<li><a href="index.html" title="Comment on title">Just a simple reply
test. Thanks...</a><br /> - <cite>ABCD</cite></li>
</ul>
</div>
</div>
<div class="col-b">
<h3>Archives</h3>
<div class="footer-list">
<ul>
<li><a href="index.html">January 2010</a></li>
<li><a href="index.html">December 2009</a></li>
<li><a href="index.html">November 2009</a></li>
<li><a href="index.html">October 2009</a></li>
<li><a href="index.html">September 2009</a></li>
</ul>
</div>
<h3>Recent Bookmarks</h3>
<div class="footer-list">
<ul>
<li><a href="index.html">5 Must Have Sans Serif Fonts for Web
Designers</a></li>
<li><a href="index.html">The Basics of CSS3</a></li>
<li><a href="index.html">10 Simple Tips for Launching a Website</a></li>
<li><a href="index.html">24 ways: Working With RGBA Colour</a></li>
<li><a href="index.html">30 Blog Designs with Killer Typography</a></li>
<li><a href="index.html">The Principles of Great Design</a></li>
</ul>
</div>
</div>
<!-- /footer-outer -->
</div></div>
<!-- footer-bottom -->
<div id="footer-bottom">
<p class="bottom-left">
2010 <strong>Copyright Info</strong>
Design by <a href="http://www.styleshout.com/">styleshout</a> |
<a href="http://www.ehostinfo.com/">Web Hosting </a>
</p>
<p class="bottom-right">
<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> |
<a href="http://validator.w3.org/check/referer">XHTML</a> |
<a href="index.html">Home</a> |
<a href="index.html">Sitemap</a> |
<a href="index.html">RSS Feed</a> |
<strong><a href="#top">Back to Top</a></strong>
</p>
<!-- /footer-bottom-->
</div>
</body>
</html>
Related examples in the same category