/* ------ This project was created by Mario Hernandez of http://designsdrive.com
for the purpose of Socal Code Camp 2011.
Feel free to use it as you wish.  All I ask is that if you use this code you post
a quick tweet to your follower letting them know you are using my code.  Please add
my twitter name to your tweet which is @designsdrive

Thank you and enjoy the code!

/* `Basic HTML
----------------------------------------------------------------------------------------------------*/
body {
  font: 12px/18px 'lucida grande', 'Helvetica Neue', Verdana, Arial, sans-serif;
  background: url(../images/texture.gif) 0 0 repeat;
  border-top: 10px solid #262626;
  color: #4e4e4e;
}
a, a:link {
color: #D06759;
text-decoration: none;
border: none;
outline: none;
}
a:hover {
text-decoration: underline;
}

/* `Headings
----------------------------------------------------------------------------------------------------*/

h1 {
  font-size: 30px;
  line-height: 36px;
}

h2 {
  font-size: 28px;
  line-height: 34px;
}

h3 {
  font-size: 20px;
  line-height: 24px;
}

h4 {
  font-size: 19px;
  line-height: 24px;
}

h5 {
  font-size: 17px;
  line-height: 22px;
 
}

h6 {
  font-size: 15px;
line-height: 20px;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Oswald', sans-serif;
text-transform: uppercase;
text-shadow: 1px 1px 0 #FFFFFF;
font-weight: normal;
}
/* `Spacing
----------------------------------------------------------------------------------------------------*/

ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset,
figure {
  margin-bottom: 10px;
}
/* ----------------------------------------------------------------------------------*/
/*------ site structure ----- */
#container {
margin-top: 40px;
margin-bottom: 25px;
}
#header {
margin-bottom: 75px;
}

/* ---- logo ---- */
#logo a {
display: block;
width: 133px;
height: 133px;
margin: 0 auto;
background: url(../images/logo.gif) no-repeat 0 0;
text-indent: -99999px;
-moz-transition: opacity 0.3s ease-in-out 0s;
-webkit-transition: opacity 0.3s ease-in-out 0s;
-o-transition: opacity 0.3s ease-in-out 0s;
transition: opacity 0.3s ease-in-out 0s;
opacity: 1.0;
}
#logo a:hover {
opacity: 0.85;
}

/* ---- navigation ---- */
#nav-left, #nav-right {
padding-top: 50px;
}
#nav-left a, #nav-right a {
text-decoration: none;
font-family: 'Oswald', sans-serif;
font-size: 24px;
text-transform: uppercase;
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
font-weight: normal;
padding: 5px 15px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.98);
color: rgba(48, 48, 48, 0.98);
}
#nav-left a:hover, #nav-left a.active, #nav-right a:hover, #nav-right a.active {
color: rgba(208, 103, 89, 0.98);
}
#nav-left ul, #nav-right ul {
margin: 0;
padding: 0;
list-style: none;
}
#nav-left ul li, #nav-right ul li {
display: block;
float: left;
}
#nav-left ul {
float: right;
}
#nav-left a, #nav-right a {
display: block;
height: 24px;
padding: 8px 16px;
}

/*------ preface ----------- */
#preface {
margin-top: 0;
margin-bottom: 70px;
}
#preface span {
display: block;
width: 775px;
height: 219px;
margin: 0 auto;
background: url(../images/preface-heading.gif) no-repeat 0 0;
text-indent: -99999px;
}

/* ---- intro section of site ---- */
#intro h1 {
color: #d06759;
text-shadow: 2px 2px 0 #ccc;
}
#intro p {
text-align: justify;
}

/* ---- featured work images ---- */
#sidebar h3 {
border-bottom: 2px solid #60ABC1;
text-align: right;
padding-bottom: 2px;
margin-bottom: 6px;
}
#sidebar h4 {
text-transform: none;
}
#sidebar ul#featured {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar ul#featured li {
display: block;
float: left;
margin: 2px 10px 20px 10px;
}
#sidebar .image {
padding: 4px;
background: #fff;
z-index: 1;
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.27);
-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.27);
-o-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.27);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.27);
-moz-transition: opacity 0.5s ease-in-out 0s;
-webkit-transition: opacity 0.5s ease-in-out 0s;
-o-transition: opacity 0.5s ease-in-out 0s;
transition: opacity 0.5s ease-in-out 0s;
opacity: 1.0;
cursor: pointer;
}
#sidebar .image:hover {
opacity: .7;
}


/* content at bottom of the page, just above footer --------- */
#content-bottom {
margin-top: 30px;
}

/* ---- left and right teasers ---- */
.teaser1 {
border-top: 2px solid #60ABC1;
padding-top: 5px;
}
.teaser2 {
border-top: 2px solid #D06759;
padding-top: 5px;
}
.teaser1 h3 a, .teaser2 h3 a {
display: block;
line-height: 30px;
color: #4e4e4e;
}
.teaser1 h3 a:hover, .teaser2 h3 a:hover {
text-decoration: none;
}

/* ---- twitter block ---- */
#twitter-block {
color: #fff;
margin-bottom: 0;
padding: 0;
}
#twitter-block #inner {
padding: 16px 12px 10px 12px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
background: #60ABC1;
margin: 0;
}
#twitter-block h4 {
text-shadow: none;
text-transform: none;
}
.twitter-bottom {
background: url(../images/twitter-bg.gif) 175px top no-repeat;
height: 58px;
margin-top: 0;
padding: 0;
}
#twitter-block a {
text-decoration: none;
color: #fff;
}
#twitter-block .url {
font-style: italic;
text-decoration: underline;
}
#twitter-block .url:hover {
text-decoration: none;
}
#twitter-block .timeline {
display: block;
width: 100%;
clear: both;
text-align: right;
margin: 0;
}
#twitter-block .follow  a {
display: block;
padding: 4px 10px 4px 5px;
color: #60ABC1;
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 13px;
margin: 0;
}
#twitter-block a:hover {
text-decoration: underline;
}
#twitter-block h4 {
font: italic normal 24px/30px Georgia, 'Times New Roman', Serif, san-serif;
}

/* ---- footer ---- */
#footer {
width: 100%;
background: #262626;
padding: 20px 0;
color: #777;
}
#footer h5 {
height: 28px;
text-shadow: 0 1px 2px #000;
text-indent: 38px;
padding: 10px 0 0 0;
color: #60ABC1;
}
#footer #about h5 {
background: url(../images/about-image.gif) left bottom no-repeat;
}
#footer #contact h5 {
background: url(../images/contact-image.gif) left bottom no-repeat;
}
#footer ul {
margin: 0 0 0 10px;
padding: 0;
list-style: none;
}
#footer ul li  {
display: block;
height: 24px;
margin-bottom: 8px;
}
#footer ul li a {
display: block;
-moz-transition: opacity 0.1s ease-in-out 0s;
-webkit-transition: opacity 0.1s ease-in-out 0s;
-o-transition: opacity 0.1s ease-in-out 0s;
transition: opacity 0.1s ease-in-out 0s;
}
#footer ul li a:hover {
opacity: .6;
text-decoration: none;
}
#footer ul li .email {
height: 14px;
background: url(../images/contact-icons.gif) left 0 no-repeat;
text-indent: 32px;
padding: 0;
}
#footer ul li .twitter {
height: 19px;
background: url(../images/contact-icons.gif) left -19px no-repeat;
text-indent: 32px;
padding: 0;
}
#footer ul li .facebook {
height: 23px;
background: url(../images/contact-icons.gif) left -43px no-repeat;
text-indent: 32px;
padding: 0;
}
#footer ul li .phone {
height: 24px;
background: url(../images/contact-icons.gif) left -74px no-repeat;
text-indent: 32px;
padding: 0;
}
#footer #author {
margin: 20px 0 12px 0;
text-align: center;
}
#footer #codedownload {
text-align: center;
}
#footer #author span {
font-family: Georgia, 'Times New Roman', Sans-serif;
font-style: italic;
font-weight: normal;
font-size: 13px;
}
#footer #codedownload .download {
display: block;
width: 200px;
margin: 0 auto;
padding: 5px 14px;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
-o-border-radius: 14px;
border-radius: 14px;
color: rgba(0, 0, 0, .8);
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
background: url(../images/download.png) 8px 3px no-repeat #e4e4e4;
background: url(../images/download.png) 8px 3px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4e4e4), color-stop(100%,#8d8d8d));
background: url(../images/download.png) 8px 3px no-repeat, -moz-linear-gradient(top, #e4e4e4 0%, #8d8d8d 100%);
text-indent: 20px;
border: none;
}
#footer #codedownload .download:hover {
text-decoration: none;
background: url(../images/download.png) 8px 3px no-repeat #e4e4e4;
background: url(../images/download.png) 8px 3px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e4e4e4), color-stop(100%,#7d7d7d));
background: url(../images/download.png) 8px 3px no-repeat, -moz-linear-gradient(top, #e4e4e4 0%, #7d7d7d 100%);
}

/* ------ contact us form styling -------- */
#form-holder {
width: 85%;
margin: 20px 0;
padding: 20px;
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.27), 0 0 20px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.27), 0 0 20px rgba(0, 0, 0, 0.06) inset;
-o-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.27), 0 0 20px rgba(0, 0, 0, 0.06) inset;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.27), 0 0 50px rgba(0, 0, 0, 0.06) inset;
border-radius: 8px;
background: rgba(255, 255, 255, 0.25);
border: 1px solid #fff;
}
label {
display: block;
text-shadow: 0 1px 1px #FFFFFF;
line-height: 1.4;
font-size: 16px;
text-indent: 10px;
}
input[type="text"], #comments {
    background: #fff;
    border: 0 none;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
    box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.15) inset;
    color: rgba(17, 17, 17, 0.6);
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding: 10px 20px;
    width: 400px;
    margin-bottom: 14px;
}
input[type="text"]:hover, input[type="text"]:focus, #comments:hover, #comments:focus {
box-shadow: 0 0 0 2px rgba(96, 171, 193, 0.5) inset;
}
input[type="submit"] {
	display: block;
	margin-top: 20px;
	position: relative;
	left: 210px;
	background: #c55b4c;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,), color-stop(100%,#D06759));
	background: -moz-linear-gradient(top, #c55b4c 0%, #c55b4c 100%);
    border: none;
    -moz-border-radius: 25px;
    -webkit-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    color: #f4f4f4;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.4;
    padding: 6px 35px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}
input[type="submit"]:hover {
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c55b4c), color-stop(100%,#D06759));
	background: -moz-linear-gradient(top, #c55b4c 0%, #D06759) 100%);
}
/* ---- latest blog posts block ---- */
#sidebar .blog-heading {
font-family: 'lucida grande', 'Helvetica Neue', Verdana, Arial, sans-serif;
letter-spacing: -.14px;
font-size: 16px;
margin-bottom: 5px;
}
.post {
margin: 0 auto;
padding: 0 0 25px 0;
width: 90%;
}
.top {
border-bottom: 1px solid #ccc;
margin-bottom: 0;
}
.bottom {
margin-top: 0;
border-top: 1px solid #fff;
padding-top: 25px;
}