/*
  Hello source code curious person from the Interwebs!
  What you're doing is (in my opinion) the BEST way to learn and advance,
  that is, viewing the source. It's how I learnt, and how I'm still learning.
  So go ahead, dig away and ask any questions. (see the contact page)
		
  Techniques used on this site are all in the public domain, 
  but the unique combination of CSS and images are what make this site's design. 
		
  Please don't steal wholesale, thats all I'm saying.
		

---------------------------------------------------

Info:       Darren Jones - Mail Style Sheet
Author:     Darren Jones
Created:    02/03/2010

Contents:  
            1. Core Elements
            2. Navigation
            3. Content
                3.1 Home
                3.2 Work
                3.3 About
                3.4 Contact
                3.5 Tinkery
            4. Footer	
				
---------------------------------------------------
	IMPORTS
-------------------------------------------------*/
@import 'reset.css' ; /* Resets the browser - pretty important! */

/*-------------------------------------------------
	1. Core Elements
-------------------------------------------------*/
body {
    background: #0C0C0C;
    color: #FFF;
    font-family: "Lucida Sans","Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 15px;
}
a {
	color: #FFF;
	text-decoration: underline;
}
a:hover {
	color: #92cef0;
	cursor:pointer;
	text-decoration: none;
}
#header {
    background: url('../images/core/header.png') repeat-x;
    height: 106px; 
    padding-top: 25px;
    width: 100%;
}
#woodwrap {
    background: url('../images/core/background.jpg') repeat-x;
    height: 780px;
    width: 100%;
}
.wrapper {
    margin: 0 auto;
    width: 960px;   
}
.clear {
    clear: both;   
}
/*-------------------------------------------------
	2. Navigation
-------------------------------------------------*/
#nav {
    float: right;   
    margin-top: 70px;
}
#nav li {
    float: left;
    font-size: 15px;
    height: 36px;
    margin-left: 35px;
}
#nav li a {
    color: #FFF;
    text-decoration: none;   
}
#nav li.active {
    background: url('../images/core/active.png') no-repeat 50% bottom;   
}
/*-------------------------------------------------
	3. Content
-------------------------------------------------*/
.content {
    padding-top: 75px;   
}
/*-------------------------------------------------
	3.1 Home
-------------------------------------------------*/
.home #hithere {
    float: left;   
}
.home #scroller {
    float: right;   
    margin-right: -22px;
    margin-top: -25px;
}
.home #hbreak {
    float: left;
    margin-top: -70px;   
}
.home #cando {
    float: left;
    line-height: 19px;
    margin-top: -50px;
    width: 350px;
}
.home #cando .header {
    margin: 20px 0;   
}
.home #social {
    float: left;
    line-height: 19px;
    margin-top: -50px;
    margin-right: 30px;
    width: 260px;
}
.home #social .header {
    display: block;
    margin: 20px 0;   
}
.home #social #followme {
    float: right; 
    margin-bottom: 30px;
    margin-top: 10px;
}
.home #social #visit {
    float: right;
    margin-top: 10px;
}
.home #contact {
    background: url('../images/home/vbreak.png') no-repeat;
    display: block;
    float: left;
    height: 396px;
    line-height: 19px;
    margin-top: -50px;
    padding-left: 30px;
    width: 280px;
}
.home #contact .header {
    margin: 20px 0;   
}
.home #contact #intouch{
    float: right;
    margin-top: 10px;
}
/*-------------------------------------------------
	3.2 Work
-------------------------------------------------*/
.work img.thumb {
    margin-bottom: -70px;
    margin-left: -20px;
    margin-right: -65px;
}
.work #portfolio {
    width: 960px;
}
.work #portfolio2 {
    margin-left: -10px;   
}
.work #portfolio2 img {
    float: left;   
}
.work #portfolio2 #jennies {
    margin-left: 2px;
    margin-top: -8px;   
}
.work #portfolio2 #tinytravel {
    margin-left: -15px;
    margin-top: -8px;   
}
.work #portfolio2 #charity {
    margin-left: -25px;
    margin-top: -8px;   
}
.work .clientlist {
    float: left;
    margin-top: 50px;   
}
.work .clientlist .block {
    float: left;
    font-size: 18px;
    margin-top: 20px;
    line-height: 1.2em;
    width: 230px;
}
/*-------------------------------------------------
	3.3 About
-------------------------------------------------*/
.about #text {
    float: left;
    margin-top: 30px;
    width: 500px;
}
.about #text p {
    line-height: 17px;
    margin-bottom: 1em;   
}
.about img#polaroid {
    float: right;   
}
/*-------------------------------------------------
	3.4 Contact
-------------------------------------------------*/
.contact #details{
    float: left;
    margin-top: 40px;    
    width: 410px;
}
.contact #details p {
    font-size: 19px;
    margin-bottom: 30px;
    margin-top: 5px;   
}
.contact #contactform  {
    float: right;
    margin-top: 40px;
}
.contact #contactform label {
    display: block;
    float: left;
    width: 240px;
}
.contact #contactform input {
    font-family: Georgia, "Times New Roman", Times, serif;
    height: 26px;
    margin-bottom: 10px;
    padding: 8px 5px 0 5px;
    width: 250px;
    /* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity:0.8;
}
.contact #contactform textarea {
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    height: 155px;
    padding: 10px 5px;
    width: 290px;
     /* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity:0.8;
}
.contact #contactform button {
    background: url('../images/contact/buttons/send.png') no-repeat;
    border: none;
    cursor: pointer;
    float: left;
    height: 45px;
    margin-left: 240px;
    margin-top: 20px;
    width: 182px;
}
.success    { padding: .8em; margin-top: 1em; border: 2px solid #ddd; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; opacity: 0.8; }
.success a  { color: #264409; }

/*-------------------------------------------------
	3.5 Tinkery
-------------------------------------------------*/
.tinkery .download{
    background: url('../images/download.png');
    display: block;
    height: 22px;
    margin: 3px 0 0 730px;
    text-indent: -99999px;
    width: 90px;
}
.tinkery .download:hover {
    background-position: 0 -22px;
}
.tinkery .download:active {
    background-position: 0 -44px;
}
.tinkery p {
    float: left;
    width: 700px;
}
.tinkery h1 {
    clear: both;
    margin: 20px 0 10px 0;
}

/*-------------------------------------------------
	4. Footer
-------------------------------------------------*/
#footer {
    background: #000;
    font-size: 13px;
    height: 40px;  
    width: 100%;
}
#footer p {
    margin-top: 18px;   
}
#footer p span {
    color: #bbb;
}
#footer a {
    color: #666;
    float: right;
    font-size: 13px;
}