@import 'vars.scss';
@import 'mixins/collection.scss';
@import "compass/css3/box-shadow";
/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* =============================================================================
   HTML5 element display
   ========================================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block
}
audio[controls],
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}
/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Force vertical scrollbar in non-IE
 * 3. Remove Android and iOS tap highlight color to prevent entire container being highlighted
 *    www.yuiblog.com/blog/2010/10/01/quick-tip-customizing-the-mobile-safari-tap-highlight-color/
 * 4. Prevent iOS text size adjust on device orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */
html {
    font-size: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-size: 0.75em;
    line-height: 1.3;
}
body,
button,
input,
select,
textarea {
    font-family:$arial;
    color: #6f6f6f;
}
/* 
 * These selection declarations have to be separate
 * No text-shadow: twitter.com/miketaylr/status/12228805301
 * Also: hot pink!
 */
::-moz-selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}
::selection {
    background: #fe57a1;
    color: #fff;
    text-shadow: none;
}
/* =============================================================================
   Links
   ========================================================================== */
a {
    color: $orange;
    text-decoration:none;
}

a:focus {
    outline: thin dotted
}
/* Improve readability when focused and hovered in all browsers: people.opera.com/patrickl/experiments/keyboard/test */
a:hover,
a:active {
    outline: 0;
    text-decoration:underline;
}
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] {
    border-bottom: 1px dotted
}
b,
strong {
    font-weight: bold
}
blockquote {
    margin: 1em 40px
}
dfn {
    font-style: italic
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
ins {
    background: #ff9;
    color: #000;
    text-decoration: none;
}
mark {
    background: #ff0;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
/* Redeclare monospace font family: en.wikipedia.org/wiki/User:Davidgothberg/Test59 */
pre,
code,
kbd,
samp {
    font-family: monospace, monospace;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}
/* Improve readability of pre-formatted text in all browsers */
pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}
q {
    quotes: none
}
q:before,
q:after {
    content: "";
    content: none;
}
small {
    font-size: 85%
}
/* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em
}
sub {
    bottom: -0.25em
}


h1, h2, h3, h4, h5, h6 {
    margin:0 0 .5em;
    font-family:$chunkFive;
    font-weight:normal;
    color:#616f8b;
}

h1 {
    font-size:3.5em;
}

h2 {
    font-size:2.5em;
    color:$orange;
}

h3 {
    font-size:2em;
}

h4, h5, h6 {
    font-size:1.167em;
}

p {
    margin:0 0 1.25em;
}

address {
    margin:0;

    p {
        margin:0;
    }
}
/* =============================================================================
   Lists
   ========================================================================== */
ul,
ol {
    margin: 1em 0;
    padding: 0 0 0 40px;
}
dd {
    margin: 0 0 5px;
}
nav ul,
nav ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
dl {
    margin:0;
}
dt {
    font-weight:bold;
    margin:20px 0 5px;
    padding:5px;
    background:lighten($blue,15);
    color:#fff;
    font-size:1.167em;
    @include border-radius(3px);

    &:first-child {
        margin-top:0;
    }
}
/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * Improve image quality when scaled in IE7
 * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
    border: 0;
    -ms-interpolation-mode: bicubic;
}
/*
 * Correct overflow displayed oddly in IE9 
 */
svg:not(:root) {
    overflow: hidden
}
/* =============================================================================
   Figures
   ========================================================================== */
figure {
    margin: 15px 0;
    text-align:center;
    overflow:hidden;

    img,video {
        max-width:100%;
    }

    figcaption {
        font-family:Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;
        font-style:italic;
        font-size:1.5em;
    }
}
/* =============================================================================
   Forms
   ========================================================================== */
form {
    margin: 0;
    background:#f4f4f4;
    border:1px solid #c9c9c9;
    @include box-shadow(0 1px 0 #fff inset);
    @include border-radius(3px);
    padding:0 0 15px;


    a.btn, .btn, button, input[type=button], input[type=submit] {
        font-size:1.167em;
        padding:8px 10px;

        &:active,
        &:hover {
            padding-bottom:6px;
        }

        &:active {
            top:2px;
            padding-bottom:4px;
        }
    }
}
form ul {
    list-style:none;
    margin:0;
    padding:0;
    clear:both;

    li {
        border-top:1px solid #fff;
        border-bottom:1px solid #e4e4e4;

        padding:15px 0;

        &:first-child {
            border-top:none;
            padding-top:none;
        }

        &:last-child {
            border-bottom:none;
            padding-bottom:none;
        }
    }
}
    
fieldset {
    margin: 0 0 0;
    padding:0 15px;
    background:transparent;
    border:none;
}
/* 
 * 1. Correct color not inheriting in IE6/7/8/9 
 * 2. Correct alignment displayed oddly in IE6/7 
 */
legend {
    border: 0;
    padding: 10px;
    background:#fff;
    color:$orange;
    border:1px solid #c9c9c9;
    border-top:none;
    @include border-bottom-radius(3px);
}

.ie6 legend,
.ie7 legend {
    margin-left: -7px;
    width:auto;
}

/* Indicate that 'label' will shift focus to the associated form element */
label {
    cursor: pointer;
    width:auto;
    display:block;
    margin:0 0 10px;
    font-weight:700;
    

    &.singleChoiceLabel {
        @include inline-block;
    }

    &.multiChoiceLabel {
        
    }
}

.multicheckboxOptions,
.radioOptions {
    label {
        width:auto;
        margin:0 15px 5px 0;
        font-weight:normal;
    }

    input {
        margin:2px 5px 0 0;
    }
}

input[type=radio],
input[type=checkbox] {
    position:relative;
    top:2px;
}

/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */
button,
input,
select,
textarea {
    font-size: 100%;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle;
}
/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 * 2. Correct inner spacing displayed oddly in IE6/7
 */
button,
input {
    line-height: normal;
    *overflow: visible;
}
/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    cursor: pointer;
    -webkit-appearance: button;
}

input, select {
    width:220px;
}
/*
 * Consistent box sizing and appearance
 */
input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    width:auto;
}
input[type="search"] {
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
/* 
 * Remove inner padding and border in FF3/4
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ 
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}
/* Remove default vertical scrollbar in IE6/7/8/9 */
textarea {
    overflow: auto;
    vertical-align: top;
    width:425px;
    height:160px;
    min-height:160px;
    min-width:425px;
    max-height:400px;
    max-width:500px;
}
/* Colors for form validity */
input:valid,
textarea:valid {

}
input:invalid,
textarea:invalid {
    background-color: #f0dddd
}

input, select, textarea {
    padding:6px;
    border-top:1px solid #9a9a9a;
    border-left:1px solid #a8a8a8;
    border-right:1px solid #a8a8a8;
    border-bottom:1px solid #bbbbbb;
    @include vertical-gradient(#fff,#fcfcfc,20px,'fff','fcfcfc');
    @include border-radius(3px);
    @include box-shadow(0 1px 0 0 #fff);
}

input[type="checkbox"],
input[type="radio"] {
    padding:none;
    background:none;
    @include box-shadow(none);
    border:none;
}

form ul .description {
    float: left;
    margin-left: -205px;
    margin-top: -25px;
    width: 190px;

    span {
        font-weight:bold;
    }
}

form.descriptions li {
    padding-left:205px;
    @include clearfix;
}

input[type=text],input[type=password],input[type=email], select, textarea {
    &:focus {
        border-color:$orange;
    }
}

/* =============================================================================
   Tables
   ========================================================================== */
table {
    margin-bottom:20px;
    border-spacing: 0;
    width:100%;
    table-layout:fixed;
    border-bottom:2px solid #f07208;

    .ie7 & {
        border-collapse: collapse;
        width:auto;
        zoom:1;
    }

    caption {
        text-align:left;
        font-size:1.5em;
        color:$orange;
        font-family:$arial;
        font-weight:normal;
        letter-spacing:-0.05em;
        margin-bottom:10px;
    }
}


thead {
    font-size:1.167em;

    th {
        color:#fff;
        font-weight:bold;
        text-shadow:0 1px 1px rgba(0,0,0,0.3);
        @include vertical-gradient(#ffb400,#f07208,33px,'ffb400','f07208');
    }
}

tbody {
    tr {
        &:nth-child(2n){
            td {
                background:#f7fafd;   
            }
        }
    }

    td {
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
        background:#ebf2fa;

        &:last-child {
            border-right:none;
        }
    }
}

th {
    text-align:left;
}

td, th {
    vertical-align:top;
    padding:4px 8px;
    word-wrap:break-word;
}

.recaptchatable {
    width:auto;
    table-layout:auto;
    background:#fff;

    td {
        background:#fff !important;
    }
}