*{
margin:0;
padding:0;
}

body{
background:#ccc;
text-align:center;
font:14px trebuchet ms, sans-serif;
margin:20px 0;
line-height:1.4em;
}
.container, #footer{
width:976px;
margin:0 auto;
}
.container{
text-align:left;
background:#fff url(images/top.jpg) no-repeat top center;
padding-top:10px;
}
#footer{
background:#fff url(images/bottom.jpg) no-repeat bottom center;
padding:20px 0;
font-size:11px;
}

/* --------------------- */
/* ---->>> BASICS <<<----*/
/* --------------------- */
a, a:visited:hover{
color:#00A2AF;
}
a:active{
color:#EFDC0E;
}
a:hover, a:visited{
color:#666;
}
a:focus{
outline:none;
}
h1{}
h2{}
h3{
font-size:16px;
letter-spacing:1px;
color:#6DAF2B;
}


/* --------------------- */
/* ---->>> HEADER <<<----*/
/* --------------------- */
.header{
background: url(images/header.jpg) no-repeat top center;
height:218px;
border-bottom:15px solid #C9EFA4;
width:955px;
margin:0 10px 2px 11px;
}
.navlinks{
text-align:center;
margin:0;
padding:0;
margin-right:25px;
}
.navlinks li{
display:inline;
}
.navlinks li a{
width:107px;
height:100px;
display:block;
background: url(images/link.gif) no-repeat bottom left;
float:right;
margin-left:-8px;
text-decoration:none;
color:white;
font-size:10px;
font-family:arial;
}
.navlinks li a:hover, .navlinks li a.current{
background-position: bottom right;
color:#666;
}
.navlinks li a em{
font-style:normal;
padding-left:12px;
padding-top:50px;
display:block;
}

.links{
background:#C9EFA4;
margin-top:-3px;
text-align:right;
width:955px;
margin-left:11px;
font-size:11px;
color:#89BB5A;
}
.morelinks a{
text-decoration:none;
color:#5FBF00;
padding:0 3px;
background: url(images/star.jpg) no-repeat left;
padding-left:10px;
}

.morelinks a:hover, .current2{
background: url(images/star-hover.jpg) no-repeat left !important;
padding-left:10px;
color:#666 !important;
}

.morelinks{
padding-right:10px;
}
.morelinks li{
display:inline;
margin-left:5px;
}

.current2{
cursor:default;
}

/* ---------------------- */
/* ---->>> CONTENT <<<----*/
/* ---------------------- */

.content{
width:955px;
margin-left:11px;
background:#EAFCD7;
}

.left{
width:48%;
float:left;

}
.right{
width:52%;
float:right;

}
.clear{
clear:both;
height:0;
}

.inner{
padding:20px;
}
.content p{
padding-bottom:20px;
}

.tiny-thumbs{
padding-bottom:0;
}
.tiny-thumbs img{
width:50px;
height:50px;
border:1px solid gray;
}

.tiny-thumbs a{
text-decoration:none;
width:50px;
height:50px;
font-size:16px;
color:black;
font-family:serif;
float:left;
margin-right:10px;
font-weight:bold;
}
.tiny-thumbs a span{
display:none;
}
.tiny-thumbs a:hover span{
display:block;
position:absolute;
background-color:white;
height:150px;
width:200px;
padding:10px;
margin-top:-235px;
margin-left:-50px;
border:1px solid gray;
}

.portfolio{
background: url(images/portfolio-hover.jpg) no-repeat bottom center;
}
.sturdy{
background: url(images/sturdy-hover.jpg) no-repeat bottom center;
}
.novella{
background: url(images/novella-hover.jpg) no-repeat bottom center;
}
.lou{
background: url(images/lou-hover.jpg) no-repeat bottom center;
}
.fam{
background: url(images/fam-hover.jpg) no-repeat bottom center;
}
.weather{
background: url(images/weather-hover.jpg) no-repeat bottom center;
}


/* --->>> DESIGN PAGE <<<---*/

#design .left{
width:25%;
}
#design .left a{
display:block;
line-height:1.8em;
color:#666;
text-decoration:None;
padding-left:14px;
background: url(images/arrow.png) no-repeat left;
}
#design .left a:hover{
color:black !important;
background-color:#E8DD5D;
}
#design .right{
width:68%;
float:right !important;
}
.active{
color:black !important;
background-color:#CBDFB5 !important;
}
.active:hover{
color:black !important;
background:#CBDFB5 !important;
cursor:default;
}
/* -- LABELS -- */
.label em{
font-size:12px;
color:black;
letter-spacing:0;
}
.label{
padding:2px;
padding-left:30px;
}
.lj .label{
background: url(images/label-lj.jpg) no-repeat left;
}
.blogger .label{
background: url(images/label-blogger.jpg) no-repeat left;
margin-bottom:15px;
}
.web .label{
background: url(images/label-web.jpg) no-repeat left;
}
.sc .label{
background: url(images/label-sc.jpg) no-repeat left;
}
.wp .label{
background: url(images/label-wp.jpg) no-repeat left;
margin-bottom:15px;
}
.xanga .label{
background: url(images/label-xanga.jpg) no-repeat left;
margin-bottom:15px;
}



/* -- THUMBS -- */
.thumbs{
list-style:none;
margin:0 auto;
padding: 10px 0;
}
.thumbs li{
float:left;
padding-right:5px;
}
.thumbs img{
width:50px;
height:50px;
border:0;
border:1px solid #8EC05D;
}
.thumbs img:hover{
position:relative;
border:1px solid black;
}

.note{
font-size:12px;
background: url(images/note.gif) no-repeat top left;
padding-left:18px;
}


/* -- WEB TEMPLATES -- */
.web .thumbs{
margin-left:20px;
}



/* --- TUTORIALS PAGE --- */
#tutorials .left{
width:25%;
}
#tutorials .left a{
display:block;
line-height:1.8em;
color:#666;
text-decoration:None;
padding-left:14px;
background: url(images/arrow.png) no-repeat left;
}
#tutorials .left a:hover{
color:black !important;
background-color:#E8DD5D;
}
#tutorials .right{
width:68%;
float:right !important;
}
#tutorials .left h4{
font-weight:normal;
font-size:15px;
margin-top:12px;
}
#tutorials code{
margin:40px  10px;
display:block;
background:white;
border:1px dashed;
padding:10px;
}
.gir{
background:url(images/giraffe.jpg) no-repeat bottom right;
height:340px;
margin:0 30px;
}
.single{
margin:0 30px;
}
.buttons{
width:400px;
margin-left:80px;
margin-bottom:30px;
}

.flower, .sheep{
display:block;
width:16px;
height:16px;
float:left;
padding:6px 6px 0 0;
}
.flower{
background: url(images/flower1.png) no-repeat left;
}
.sheep{
background: url(images/flower2.png) no-repeat left;
}
.boxmodel{
margin:10px 20px 60px 20px;
}
#tutorials .right h4, #links h4{
background: url(images/arrow2.png) no-repeat left;
padding-left:16px;
font-size:14px;
margin-top:20px;
}
p{
clear:both;
padding:0 25px;
}
#home p{
padding-left:0;
padding-right:0;
}

.linklist{
margin-bottom:20px;
}
.linklist li{
list-style:none;
padding:3px 20px;
}