/****** RESET BROWSER DEFAULTS******/
html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, ul, ol, li, header, fieldset, pre, code{
margin:0;
padding:0;
border:0;
}
/*** render html5 elements as block in non-supported browsers ****/
header, footer, section, nav, article {
display: block;
}
/******GENERAL STYLING******/
body{
background:#04486f;
font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif;
font-size:.875em;
text-align:center;
color:#333;
}
#wrapper{
width:980px;
margin:0 auto;
}
#content{
background:#fff;
padding:20px 20px 40px 20px;
text-align:left;
margin-bottom:30px;
}
section#steps, section#finished{
margin:30px 0;
padding:10px 20px;
background:#f1f1e3;
-webkit-box-shadow: 0 0 2px rgba(0,0,0, .3); 
-moz-box-shadow: 0 0 2px rgba(0,0,0, .3); 
box-shadow: 0 0 2px rgba(0,0,0, .3);
-webit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
.codebox{
overflow-x: auto;
width:850px;
background:#2b2b2b;
padding:0 10px 10px 10px;
margin:0 auto;
margin-bottom:20px;
color:#fff;
}
.comment{
color:#8e8e8e;
font-size:90%;
}
.codebox a:link, .codebox a:visited{
color:#8e8e8e;
}

.selector{
color:#d7b5d6;
}

hr{
margin:50px 0 30px 0;
border: 0;
height: 2px;
background: #a84c3d;
background: -webkit-linear-gradient(left, #e9e6cd, #a84c3d, #e9e6cd); 
background: -moz-linear-gradient(left, #e9e6cd, #a84c3d, #e9e6cd); 
background: -ms-linear-gradient(left, #e9e6cd, #a84c3d, #e9e6cd); 
background: -o-linear-gradient(left, #e9e6cd, #a84c3d, #e9e6cd);
background: linear-gradient(left, #e9e6cd, #a84c3d, #e9e6cd);
}
/*** GENERAL FONTS***/
p{
line-height:1.5em;
margin-bottom:10px;
font-size:1.1em;
}
li{
font-size:1.1em;
}
.codebox ul{
padding:5px 0 0 20px;
}
.codebox li{
list-style-type:none;
font-size:1em;
line-height:1.1em;
margin-bottom:6px;
letter-spacing:.1em;
}
/*headings*/
h1,h2,h3,h4,h5{
font-family: 'Open Sans Condensed', serif;
color:#ba2553;
text-transform:uppercase;
}
header{
width:980px;
height:98px;
margin:20px 0 30px 0;
}
header h1{
display:block;
text-indent:-9999px;
height:98px;
width:980px;
background:url(header.jpg) center no-repeat;
}
header h1:hover{
text-indent:-9999px;
height:98px;
width:980px;
background:url(header-hover.jpg) center no-repeat;
cursor:pointer;
}
header h1 a{
color: #e1d7ce;
text-decoration:none;
}
header h1 a:hover, header h1 a:focus{
color: #c3ba6d;
outline:0;
}
h2{
font-size:2.5em;
letter-spacing:-.05em;
margin:10px 0 5px 0;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
}
h2 span.demoname{
display: block;
color:#525252;
font-size:80%;
font-weight:400;
letter-spacing:normal;
text-transform:lowercase;
padding-left:15px;
text-shadow:none;
font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif;
}
h3{
font-size:1.8em;
letter-spacing:-.02em;
margin:0;
text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);
}
h3 span.sub{
display: block;
color:#747463;
font-size:80%;
font-weight:400;
letter-spacing:.05em;
padding-left:10px;
}
h4{
font-size:1.6em;
margin-top:10px;
color:#4f676a;
}
h5{
font-size:1.2em;
color:#4f676a;
}
/**Links**/
#content p.moredemos{
text-align:center;
}
#content .moredemos a{
text-decoration:none;
text-transform:uppercase;
margin:0 30px;
padding:10px 10px;
background:#ba2553; 
border:none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius:10px;
-webkit-box-shadow: inset 0px 1px 0px #bd2c59, 0px 3px 0px 0px #ab244e, 0px 4px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #bd2c59, 0px 3px 0px 0px #ab244e, 0px 4px 5px #999;
box-shadow: inset 0px 1px 0px #bd2c59, 0px 3px 0px 0px #ab244e, 0px 4px 5px #999;
color:#f3f3f3;
font-size:.9em;
}
#content .moredemos a:hover{
background:#ac3359;
color:#fff;
-webkit-box-shadow: inset 0px 1px 0px #9a2a4d, 0px 2px 0px 0px #912446, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #9a2a4d, 0px 2px 0px 0px #912446, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #9a2a4d, 0px 2px 0px 0px #912446, 0px 2px 5px #999;
}
#content .moredemos a:focus{
background:#4fa3ad;
color:#fff;
-webkit-box-shadow: inset 0px 1px 0px #4fa3ad, 0px 2px 0px 0px #3f919b, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #4fa3ad, 0px 2px 0px 0px #3f919b, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #4fa3ad, 0px 2px 0px 0px #3f919b, 0px 2px 5px #999;
}

/*****SHARE******/
#share{
text-align:right;
margin:-10px 30px 30px 0;
}
#share ul{
list-style-type:none;
}
#share li{
display:inline-block;
margin:0 10px;
}