@import url(//fonts.googleapis.com/css?family=Stint+Ultra+Condensed);

/*****************
RESETS AND HTML5
*****************/
html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, ul, li, header{
margin:0;
padding:0;
border:0;
}
header, footer, section, nav, article {
display: block;
}

/**************
GENERAL LAYOUT
***************/
body{
background:#444540;
font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif;
font-size:.875em;
text-align:center;
color:#333;
}
#wrapper{
width:980px;
margin:0 auto;
}
hr{
margin:50px 0 30px 0;
border: 0;
height: 2px;
background: #a84c3d;
background: -webkit-linear-gradient(left, #cfbbb2, #a84c3d, #cfbbb2); 
background: -moz-linear-gradient(left, #cfbbb2, #a84c3d, #cfbbb2); 
background: -ms-linear-gradient(left, #cfbbb2, #a84c3d, #cfbbb2); 
background: -o-linear-gradient(left, #cfbbb2, #a84c3d, #cfbbb2);
background: linear-gradient(left, #cfbbb2, #a84c3d, #cfbbb2);
}

/********
HEADER
********/
header{
width:980px;
height:98px;
margin:20px 0 10px 0;
}
header h1{
text-align:left;
font-family:"Stint Ultra Condensed", Arial, Helvetica, sans-serif;
font-size:5.2em;
line-height: .9em;
text-transform:lowercase;
text-shadow: 1px 1px 1px #82857E;
}
header h1 a{
color: #EAF0E6;
text-decoration:none;
}
header h1 a:hover, header h1 a:focus{
color:#BAC9BA;
}
header h1 span.tag{
display:block;
color:#BDC2B0;
font-family:"Yanone Kaffeesatz", Arial, Helvetica, sans-serif;
font-size:25%;
font-weight:normal;
letter-spacing:-1px;
line-height:0.4em;
text-indent:25px;
text-shadow: none;
text-transform:lowercase;
}

/**********
MAIN NAVIGATION
***********/
nav#main{
width: 100%;
margin:10px 0 0 0;
padding:10px 0;
font-weight: 700;
text-align: center;
text-transform: uppercase;
background:#fff;
}
nav#main ul{
list-style-type:none;
}
nav#main li{
display: inline-block;
margin: 0 1em;
font-size:1em;
}
nav#main li:first-child{
margin-left:0;
}
nav#main li:last-child{
margin-right:0;
}
nav#main li a{
display: block;
padding: 4px 16px 4px 8px;
border:2px solid #92AD4F;
border-radius:6px;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
transition: all .2s ease-in;
color:#637A27;
text-decoration: none;
}
nav#main a:focus{
color:#952255;
}
nav#main li:hover a{
background: #444540;
color: #fff;
border:2px solid #555;
}
nav#main li.now a{
background: #92AD4F;
color: #fff;
border:3px solid #92AD4F;

}
nav#main li.now a:focus{
color:#952255;
}


/************
CONTENT
*************/
#content{
background:#fff;
padding:20px 10px;
margin:0;
text-align:left;
}
/****CONTENT FONTS GENERAL*****/
#content h2{
font-family: 'Open Sans Condensed', serif;
color:#657346;
text-transform:uppercase;
font-size:2.5em;
letter-spacing:-.05em;
margin:10px 0 25px 0;
}
#content h2 span.lowercase{
text-transform:lowercase;
}
#content h3{
font-family: 'Open Sans Condensed', serif;
color:#657346;
text-transform:uppercase;
font-size:1.5em;
letter-spacing:-.05em;
margin:20px 0 5px 0;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
#content p{
line-height:1.4em;
margin-bottom:10px;
color:#333;
font-size:1.1em;
}
#content ul{
margin-left:20px;
}
#content ul.awesome{
list-style-type:none;
}
#content li{
line-height:1.2em;
margin-bottom:5px;
color:#333;
font-size:1.1em;
}
#content ul.awesome{
margin-left:10px;
}
#content ul.awesome i{
padding-right:10px;
}
#content a{
color:#1E6E6A;
}
#content a:hover, #content a:focus{
color:#952255;
text-decoration:none;
}
/******INDEX PAGE******/
/***INTRO****/
#intro{
background:#ededec;
margin:20px 0;
padding:10px;
border-radius:10px;
-webkit-box-shadow: 0 0 5px rgba(0,0,0, .3); 
-moz-box-shadow: 0 0 5px rgba(0,0,0, .3); 
box-shadow: 0 0 5px rgba(0,0,0, .3);
}
#intro p, #latest p{
color:#505050;
font-size:1.2em;
line-height:1.6em;
}
#intro a:link, #intro a:visited{
color:#505050;
}
#intro a:hover, #intro a:focus{
color:#fff;
background: #546268; 
}
/***LATEST***/
#latest{
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
padding:5px;
margin:10px 0 20px 0;
}
#content #latest span.date{
color: #435055;
font-family:'droid sans', sans-serif;
font-weight: 500;
text-shadow:1px 1px 2px rgba(34,34,34,.36);
}
/***DEMOLIST***/
#demolist{
width:auto;
overflow:hidden;
}
#content #demolist ul{
list-style-type:none;
margin-top:-5px;
margin-bottom:30px;
}
#content #demolist li{
margin:10px 0;
line-height:1.4em;
font-size:1.1em;
}
#content #demolist ul.box{
width: 100%;
margin:0 0 20px 0;
padding:0;
}
#content #demolist .box li{
width:400px;
display:inline-block;
margin:0 20px;
}
#demolist .column{
float:left;
width:400px;
margin:5px 60px 5px 0;
}
#content #demolist h4 span.sub{
display:block;
margin:-4px 0 5px 6px;
color:#868f90;
font-size: .85em;
text-transform:lowercase;
letter-spacing:-.05em;
line-height: 1em;
text-shadow:none;
}

/*******DEMO PAGES*******/
/**Internal Navigation**/
nav#pagelinks{
text-align:center;
margin:15px 0 20px 0;
}
nav#pagelinks ul{
list-style-type:none;
}
nav#pagelinks li{
display:inline;
padding:0 20px;
line-height:1em;
margin-bottom:10px;
}

#finished, #examples, #fullcode, #support, #syntax{
background:#f7f7f1;
margin:10px 0 40px 0;
padding:10px;
-webkit-box-shadow: 0 0 5px rgba(0,0,0, .3); 
-moz-box-shadow: 0 0 5px rgba(0,0,0, .3); 
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
#syntax ul{
margin:-12px 0 10px 10px;
}
#syntax li{
list-style-type:none;
font-size:1.1em;
line-height:1.3em;
}
#syntax li code, #syntax p code, #support code{
color:#28663f;
font-family:"Courier New", Courier, mono;
letter-spacing:-.05em;
font-size:1.05em;
}
#examples h3{
color:#4f676a;
font-size:1.8em;
}
#examples h4{
margin-top:15px;
margin-bottom:10px;
}
#examples span.sub, #finished span.sub{
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;
}
#examples span.sub span.note{
font-size:95%;
}
#examples hr{
margin:50px 0 30px 0;
border: 0;
height:4px;
background: #a84c3d;
background: -webkit-linear-gradient(left, #cfbbb2, #a84c3d, #cfbbb2); 
background: -moz-linear-gradient(left, #cfbbb2, #a84c3d, #cfbbb2); 
background: -ms-linear-gradient(left, #cfbbb2, #a84c3d, #cfbbb2); 
background: -o-linear-gradient(left, #cfbbb2, #a84c3d, #cfbbb2);
background: linear-gradient(left, #cfbbb2, #a84c3d, #cfbbb2);
}

/****CODEBOXES****/
#examples .codebox, #fullcode .codebox{
overflow-x: aut0;
width:850px;
background:#2b2b2b;
padding:10px;
margin:0 auto;
margin-bottom:10px;
color:#fff;
}
#examples{
padding-bottom:40px;
}
.codebox{
margin-bottom:20px;
}
.codebox ul{
padding:10px 0;
}
#content .codebox li{
list-style-type:none;
font-size:1em;
line-height:1.1em;
margin-bottom:3px;
letter-spacing:.1em;
color:#fff;
}
#content .codebox a:link, #content .codebox a:visited{
color:#8e8e8e;
}
.codebox .comment, .comment{
color:#8e8e8e;
font-size:90%;
}
.codebox .explain{
font-size:90%;
color:#646464;
}
#content .codebox .comment a:link, #content .codebox .comment a:visited{
color:#8e8e8e;
}
.selector{
color:#d7b5d6;
}
.declaration{
color:#c7ddbf;
}
.codebox hr{
margin:10px 0;
height:1px;
background: #e2d2cf;
background: -webkit-linear-gradient(left, #535353, #e2d2cf, #535353); 
background: -moz-linear-gradient(left, #535353, #e2d2cf, #535353); 
background: -ms-linear-gradient(left, #535353, #e2d2cf, #535353); 
background: -o-linear-gradient(left, #535353, #e2d2cf, #535353);
background: linear-gradient(left, #535353, #e2d2cf, #535353);
}
span.prop{
font-size:1.3em;
color:#1b5770;
margin-left:-5px;
text-shadow:1px 1px 2px rgba(34,34,34,.3);
}

/***Browser Support and Notes***/
#support{
padding-top:0;
}
#support pre{
font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif;
}
#support p{
margin-left:5px;
}
#support ul{
margin:5px 0 20px 5px;
list-style-type:none;
}
#support li{
color:#444;
line-height:1.1em;
margin-bottom:5px;
}
#support h4{
padding-top:10px;
margin-left:-5px;
}

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

/***More Demos Buttons***/
#content p.moredemos{
text-align:center;
}
#content .moredemos a{
text-decoration:none;
text-transform:uppercase;
padding:10px 10px;
background:#4F3959; 
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
transition: all .2s ease-in;
border:none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:5px;
-webkit-box-shadow: inset 0px 1px 0px #553C61, 0px 3px 0px 0px #3A2742, 0px 4px 1px #4d4d4d;
-moz-box-shadow: inset 0px 1px 0px #553C61, 0px 3px 0px 0px #3A2742, 0px 4px 1px #4d4d4d;
box-shadow: inset 0px 1px 0px #553C61, 0px 3px 0px 0px #3A2742, 0px 4px 1px #4d4d4d;
color:#fff;
font-size:.9em;
}
#content .moredemos a:hover{
background:#6D9124;
color:#fff;
-webkit-box-shadow: inset 0px 1px 0px #829A2A, 0px 2px 0px 0px #6D9124, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #829A2A, 0px 2px 0px 0px #6D9124, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #829A2A, 0px 2px 0px 0px #6D9124, 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 #4d4d4d;
-moz-box-shadow: inset 0px 1px 0px #4fa3ad, 0px 2px 0px 0px #3f919b, 0px 2px 5px #4d4d4d;
box-shadow: inset 0px 1px 0px #4fa3ad, 0px 2px 0px 0px #3f919b, 0px 2px 5px #4d4d4d;
}



/**********
FOOTER
**********/
footer{
width:980px;
margin:0 auto;
background:#BBC79F;
overflow:hidden;
padding:30px 20px;
}
footer h2{
font-family: 'Open Sans Condensed', serif;
text-transform:uppercase;
font-size:1.6em;
letter-spacing:-.05em;
margin:0 0 5px 0;
}
footer h3{
font-family: 'Open Sans Condensed', serif;
text-transform:uppercase;
font-size:1.3em;
letter-spacing:-.05em;
margin:20px 0 5px -10px;
}

/************
FEEDBACK FORM
************/
#feedback{
display:none;
width:450px;
float:left;
text-align:left;
padding:10px 0;
}
#feedback form{
width: 400px;
font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif;
padding:10px 15px;
margin:10px 0;
border-radius:5px;
}
#feedback label{
display:none;
}
#feedback input, #feedback textarea{
display:block;
width:400px;
padding:5px;
border-radius:5px;
border:1px solid #ccc;
margin-bottom:10px;
background:#f6f5f1;
font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif;
font-size:85%;
color:#5C5C5C;
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.1) inset;
}
#feedback input#AntiSpam{
display:inline-block;
width:50px;
}
#feedback input:focus, #feedback textarea:focus{
box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.1);
}
#feedback ::-webkit-input-placeholder {color:#555;}
#feedback ::-moz-placeholder {color:#555;} 
#feedback :-moz-placeholder {color:#555;}
#feedback :-ms-input-placeholder {color:#555;}
#feedback :placeholder {color:#555;}

#feedback input#form_submit_button{
cursor:pointer;
margin-top:5px;
padding:8px 10px;
background:#4F3959; 
border:none;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
transition: all .2s ease-in;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 0px #553C61, 0px 3px 0px 0px #3A2742, 0px 4px 1px #4d4d4d;
-moz-box-shadow: inset 0px 1px 0px #553C61, 0px 3px 0px 0px #3A2742, 0px 4px 1px #4d4d4d;
box-shadow: inset 0px 1px 0px #553C61, 0px 3px 0px 0px #3A2742, 0px 4px 1px #4d4d4d;
color:#fff;
font-size:1.1em;
}
#feedback input#form_submit_button:hover{
background:#6D9124;
color:#fff;
-webkit-box-shadow: inset 0px 1px 0px #829A2A, 0px 2px 0px 0px #6D9124, 0px 2px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #829A2A, 0px 2px 0px 0px #6D9124, 0px 2px 5px #999;
box-shadow: inset 0px 1px 0px #829A2A, 0px 2px 0px 0px #6D9124, 0px 2px 5px #999;
}
#feedback input#form_submit_button:focus{
background:#4fa3ad;
color:#fff;
-webkit-box-shadow: inset 0px 1px 0px #4fa3ad, 0px 2px 0px 0px #3f919b, 0px 2px 5px #4d4d4d;
-moz-box-shadow: inset 0px 1px 0px #4fa3ad, 0px 2px 0px 0px #3f919b, 0px 2px 5px #4d4d4d;
box-shadow: inset 0px 1px 0px #4fa3ad, 0px 2px 0px 0px #3f919b, 0px 2px 5px #4d4d4d;
}
.antispammessage{
font-size:.9em;
color:#3B3A3D;
}
.formcredit{
text-align:right;
padding-top:10px;
font-size:80%;
color:#7e7e7e;
}
.formcredit a{
color:#848285;
}
.formcredit a:hover, .formcredit a:focus{
color:#52385C;
}
/******FOOTER NAVIGATION LINKS******/
nav#footnav{
width:100%;
float:none;
text-align:left;
margin:0 10px 0 30px;
padding:10px 0;
}
nav#footnav ul{
list-style-type:none;
}
nav#footnav li{
display:inline-block;
padding:5px 10px;
margin:0 0 10px 0;
line-height:1.3em;
font-size:1em;
color:#49464A;
width:200px;
position:relative;
}
nav#footnav a{
text-decoration:none;
color:#49464A;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
transition: all .2s ease-in;
}
nav#footnav li:hover, nav#footnav li:focus{
color:#753C99;
cursor:pointer;
}
nav#footnav a:hover, nav#footnav a:focus{
color:#753C99;
}
footer h2{
color:#708042;
}

/*****FOOTER NAVIGATION SOCIAL*****/
nav#social{
display:none;
float:right;
margin:10px 20px 10px 0;
width:450px;
text-align:right;
}
nav#social ul{
list-style-type:none
}
nav#social li{
display:inline-block;
margin:0 20px 0 0;
font-size:1.4em;

}
nav#social a{
color:#49464A;
position:relative;
padding:5px 10px;
}
nav#social a:hover, nav#social a:focus{
color:#ececec;
top:-3px;
}

/***LAYOUTS****/
#layouts{
width:auto;
overflow:hidden;
}
#layouts img{
-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 2px;
-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 2px;
box-shadow: rgba(0, 0, 0, .25) 0 1px 8px;
}
article.lefthand{
float:left;
}
article.righthand{
float:left;
}
article.lefthand, article.righthand{
width:400px;
margin:0 0 20px 0;
padding:0 10px;
}
article.lefthand li, article.righthand li{
list-style-type:none;
padding:5px 0 10px 0;
}
article.lefthand h3, article.righthand h3{
margin-bottom:0;
margin-top:15px;
}

/************************************
FONT AWESOME ADDITIONAL STYLING
*************************************/
.fa{
text-decoration: none;
}
#welcome .fa{
margin-right:5px;
}
i.fa{
margin-left:5px;
}
.fa.smaller{
font-size:70%;
}
header .fa.smaller{
font-size:40%;
position:relative;
top:-.5em;
margin-left:-15px;
top:-20px;
}
.fa-1half{
font-size:1.5em;
}