/* This CSS File contains styles for useful, often used elements - the goal being to simply copy and paste the markup and styles into a new site */

/* Tabbed Navigation - the site's main navigation menu. Set horizontally and made of tabs */
[role="navigation"]             { float:left; font-size:1.3em; }
[role="navigation"] ul			{ float:left; }
[role="navigation"] li			{ float:left; }
[role="navigation"] a			{ display:block; text-decoration:none; }
[role="navigation"] a:hover		{ }

/*  Set the current tab based on what page/section you are on
    Each page has a unique identifier by setting the body tag's ID attribute 
    Each section has at least one class set, again on the body tag - this is more useful than the ID for avoiding lots of selectors
*/
.root .tab-home a,
.about .tab-about a,
.resources .tab-resources a,
.guidelines .tab-guidelines a,
.docs .tab-docs a,
.contact .tab-contact a
 { background: white; color: #757575; }
 
 /* A secondary nav in a sidebar -  */
 [role="complementary"] nav a { display:block; padding:4px 1em; line-height: 2; color:#444; font-weight: bold; text-decoration:none; border-bottom: 1px solid #ccc; border-left: 5px solid #eee; }
 [role="complementary"] nav a:hover { color:#c00; border-left: 5px solid #c00; }
 /* Set the current tab */
 #buttons .tab-buttons a,
 #css3 .tab-css3 a, 
 #tables .tab-tables a,
 #tags .tab-tags a,
 #typography .tab-typography a
 { color: #999; border-left: 5px solid #444; }
 
/* Quick contact fields - typically in the header we include a phone numner and links to social media */
.quick-contact { text-align: right; }
.quick-contact ul { float: right; }
.quick-contact li { list-style: none; float: left; margin-left: .5em; line-height: 32px; /* This is equal to the height of the largest image so that the text can match the image vertical-align: middle and be centred */ }
.quick-contact li p { margin: 0; }

/* Contact Form */
.contact-form .required { color: #c00; }
.contact-form label { display: block; margin-bottom: .5em; }
.contact-form fieldset  { margin-bottom: 1em; }
/* For all tyoes of input except for radio buttons, */
.contact-form input:not([type=submit]),
.contact-form textarea
{ 
    background: #fff;
    border: 1px solid #ccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    outline: none;
    margin-right: 5px;
    padding: 5px;
    width: 300px;
    font-size: 1.5em;
}
.contact-form textarea { height: 100px; }
.contact-form input:not([type=submit]):focus,
.contact-form textarea:focus {
    background: #eaeaea;
}

/* Feedback messages */
div.error, div.success { border: 1px solid #c00; background: #ffebe8; padding: .5em 1em; text-align: center; }
div.success { border-color: #9cc63c; background: #d4e2b5; }
div.error ul, div.success ul { list-style: none; }
 
/* Standard Data Tables */
[role="main"] table { width: 100%; }
[role="main"] table caption { font-style: italic; margin-bottom: .25em; }
[role="main"] th, [role="main"] td { text-align: center; /* Set this for _most_ cells' alignment */ border-left: 1px dotted #999; padding: .25em; }
[role="main"] table :first-child,
[role="main"] table .first 
    { border-left: 0; }
[role="main"] th { background: #444; color: #fff; }
[role="main"] thead th { font-size: 1.2em; padding: .5em .25em; }
/* To support older browsers, you will need to put the alternate class on every other row */
[role="main"] tr:nth-child(even), 
[role="main"] tr.alternate 
    { background: #ccc; }

/* Pre-formatted excerpts of code */
[role="main"] pre code { overflow: auto; display: block; background: #333; color: #eee; border: 5px solid #ccc; border-radius: 6px; padding: 1em; white-space: pre; }
[role="main"] pre code .comment { color: green; }
.rgba [role="main"] pre code { background: rgba(0,0,0,.75); } /* Gets rgba class from Modernizr */

/* Button styling */
/* Link button, no images */
a.button { 
    display: inline-block;
    border: 2px solid #000;
    border-radius: 6px;
    background: #333;
    color: White;
    padding: .25em .5em;
    text-decoration: none;
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1em;
}
a.button:hover { background: #999; }
/*.contactForm .submit {
    line-height: 1.8;
    margin: 0 0 1em;
    padding: 0.3em 0;
    text-align: center;
    text-decoration: none;
    width: 120px;
}
.contactForm .submit:hover {
    background: none repeat scroll 0 0 #C7009F;
}*/
/* Pill submit button */
@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(51,204,255,.2);
    }
    50% {
        -webkit-box-shadow: 0 0 12px rgba(51,204,255,.9);
    }
    100% {
        -webkit-box-shadow: 0 0 12px rgba(51,204,255,.2);
    }
}
input.pill {
    padding: 8px 15px;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    line-height: 1;
    color: #444;
    border: none;
    background-color: #fff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
    text-shadow: 0 1px 1px rgba(255,255,255,.85);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#bbb));
    background-image: -moz-linear-gradient(0% 100% 90deg, #bbb, #fff);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px rgba(0,0,0,.5);
}
input.pill:hover,
input.pill:focus 
    { color: #222; box-shadow: 0 0 0 .75em rgba(51,204,255,.5); -webkit-animation: pulse 1.5s infinite ease-in-out; }