/* 
    These styles are defined by effect, not by purpose
    See this URL for details why: http://coding.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/
    There's no formal spec for this "Atomic CSS" style, so we'll have to make up the naming conventions as we go
    This framework is designed in the Atomic CSS style, so look here for inspiration: http://www.cascade-framework.com/ src: https://github.com/jslegers/cascadeframework/tree/master/assets/css/cascade/development
*/

/* Positioning (float, position, left, right, etc.) */
/*Fl-start/Fl-end are for text, in case we want to flip the site for RTL languages*/
.Fl-start { float: left; }
.Fl-end {float: right;}
/*Fl-left/Fl-right are for non-text layout that shouldn't be flipped for RTL languages*/
.Fl-left {float: left;}
.Fl-right {float: right;}
.Fl-right-i {float: right !important;}
.Fl-none { float: none; }

.Pos-rel { position: relative; }
.Pos-abs { position: absolute; }
.Pos-abs-i { position: absolute !important; }
.Pos-abs-vcenter { position: absolute; top:0;bottom:0;margin-top:auto;margin-bottom:auto; }

.D-IB { display:inline-block; }
.D-N { display: none; }
.D-B-i { display: block !important; }

.VA-T { vertical-align: top; }

/* Box model (margin, border, padding, etc.) */
.BoxSz-border {
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box;
}
.Brd-rad10 {
    -webkit-border-radius: 10px;
     -khtml-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
}
.Brd-rad5 {
    -webkit-border-radius: 5px;
     -khtml-border-radius: 5px;
       -moz-border-radius: 5px;
            border-radius: 5px;
}
.Brd-rad3 {
    -webkit-border-radius: 3px;
     -khtml-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;
}
.Brd-1black { border: 1px solid black; }
.Brd-1red-i { border: 1px solid red !important; }
.Brd-1grey { border: 1px solid grey; }
.Brd-none { border: none; }

/* Size (width, height) */
.H40 { height: 40px; }
.W40-i { width: 40px !important; }
.W65-i { width: 65px !important; }
.W100 { width: 100px; }
.W200 { width: 200px; }
.W40pc {width: 40%;}
.W100pc { width: 100%; }
.W100vw { width: 100vw; }
.Wauto { width: auto; }
.Wauto-i { width: auto !important; }
.LH42 {line-height: 42px;}

/* Colors */
.Color-grey {color: #999;}
.Color-white { color: #FFFFFF; }
.BGColor-ltgrey { background-color: #CCC; }
.BGColor-FFF { background-color: #FFF; }
.BGColor-EEE { background-color: #EEE; }
.BGColor-E0E0E0 { background-color: #E0E0E0; }



/* Texts */
.Anti-alias { -webkit-text-stroke-width: 0.25px; }
.FS14-i { font-size: 14px !important; }
.Uppercase { text-transform: uppercase; }
.TextOverflow-Clip {
    white-space: nowrap;
    text-overflow: clip;
}
.FontStyle-normal { font-style: normal; }
.FontWeight-bold { font-weight: bold; }
.FontWeight-bold-i { font-weight: bold !important; }

/* Misc */
.List-none {
    list-style-type: none;
    outline: none;
}
/* .Link looks like an <a href='...'> element, but doesn't have to be an <a> or have a [href] */
.Link { color: #c3480f; text-decoration: underline; cursor: pointer; }
.Link:hover, .Link.hover { color: #c3480f; text-decoration: none; }
.Link:active, .Link.active { color: #c3480f; }
.Link:focus, .Link.focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
input[type=button].Link, button.Link { background-color: transparent; }

.Min-width-0 {min-width: 0;}
.Min-width-120 {min-width: 120px;}

.Max-width-960 { max-width: 960px }

.P-15 { padding: 15px; }
.P-30 { padding: 30px; }

.Cur-ptr { cursor: pointer; }
.Pt-0  { padding-top: 0px; }
.Pt-1  { padding-top: 1px; }
.Pt-2  { padding-top: 2px; }
.Pt-3  { padding-top: 3px; }
.Pt-4  { padding-top: 4px; }
.Pt-5  { padding-top: 5px; }
.Pt-6  { padding-top: 6px; }
.Pt-7  { padding-top: 7px; }
.Pt-8  { padding-top: 8px; }
.Pt-9  { padding-top: 9px; }
.Pt-10 { padding-top: 10px; }

.Pl-0  { padding-left: 0px; }
.Pl-1  { padding-left: 1px; }
.Pl-2  { padding-left: 2px; }
.Pl-3  { padding-left: 3px; }
.Pl-4  { padding-left: 4px; }
.Pl-5  { padding-left: 5px; }
.Pl-6  { padding-left: 6px; }
.Pl-7  { padding-left: 7px; }
.Pl-8  { padding-left: 8px; }
.Pl-9  { padding-left: 9px; }
.Pl-10 { padding-left: 10px; }
.Pl-11  { padding-left: 11px; }
.Pl-12  { padding-left: 12px; }
.Pl-13  { padding-left: 13px; }
.Pl-14  { padding-left: 14px; }
.Pl-15  { padding-left: 15px; }
.Pl-16  { padding-left: 16px; }
.Pl-17  { padding-left: 17px; }
.Pl-18  { padding-left: 18px; }
.Pl-19  { padding-left: 19px; }
.Pl-20 { padding-left: 20px; }
.Pl-40 { padding-left: 40px; }

.Pl-0-i  { padding-left: 0px !important; }
.Pl-1-i  { padding-left: 1px !important; }
.Pl-2-i  { padding-left: 2px !important; }
.Pl-3-i  { padding-left: 3px !important; }
.Pl-4-i  { padding-left: 4px !important; }
.Pl-5-i  { padding-left: 5px !important; }
.Pl-6-i  { padding-left: 6px !important; }
.Pl-7-i  { padding-left: 7px !important; }
.Pl-8-i  { padding-left: 8px !important; }
.Pl-9-i  { padding-left: 9px !important; }
.Pl-10-i { padding-left: 10px !important; }

.Pr-0  { padding-right: 0px; }
.Pr-1  { padding-right: 1px; }
.Pr-2  { padding-right: 2px; }
.Pr-3  { padding-right: 3px; }
.Pr-4  { padding-right: 4px; }
.Pr-5  { padding-right: 5px; }
.Pr-6  { padding-right: 6px; }
.Pr-7  { padding-right: 7px; }
.Pr-8  { padding-right: 8px; }
.Pr-9  { padding-right: 9px; }
.Pr-10 { padding-right: 10px; }
.Pr-15 { padding-right: 15px; }

.Pb-0  { padding-bottom: 0px; }
.Pb-1  { padding-bottom: 1px; }
.Pb-2  { padding-bottom: 2px; }
.Pb-3  { padding-bottom: 3px; }
.Pb-4  { padding-bottom: 4px; }
.Pb-5  { padding-bottom: 5px; }
.Pb-6  { padding-bottom: 6px; }
.Pb-7  { padding-bottom: 7px; }
.Pb-8  { padding-bottom: 8px; }
.Pb-9  { padding-bottom: 9px; }
.Pb-10 { padding-bottom: 10px; }


.Mt-0  { margin-top: 0px; }
.Mt-1  { margin-top: 1px; }
.Mt-2  { margin-top: 2px; }
.Mt-3  { margin-top: 3px; }
.Mt-4  { margin-top: 4px; }
.Mt-5  { margin-top: 5px; }
.Mt-6  { margin-top: 6px; }
.Mt-7  { margin-top: 7px; }
.Mt-8  { margin-top: 8px; }
.Mt-9  { margin-top: 9px; }
.Mt-10 { margin-top: 10px; }
.Mt-11 { margin-top: 11px; }
.Mt-12 { margin-top: 12px; }
.Mt-13 { margin-top: 13px; }
.Mt-14 { margin-top: 14px; }
.Mt-15 { margin-top: 15px; }
.Mt-45 { margin-top: 45px; }

.Mt-0-i { margin-top: 0 !important; }

.Ml-0  { margin-left: 0px; }
.Ml-1  { margin-left: 1px; }
.Ml-2  { margin-left: 2px; }
.Ml-3  { margin-left: 3px; }
.Ml-4  { margin-left: 4px; }
.Ml-5  { margin-left: 5px; }
.Ml-6  { margin-left: 6px; }
.Ml-7  { margin-left: 7px; }
.Ml-8  { margin-left: 8px; }
.Ml-9  { margin-left: 9px; }
.Ml-10 { margin-left: 10px; }
.Ml-11 { margin-left: 11px; }
.Ml-12 { margin-left: 12px; }
.Ml-13 { margin-left: 13px; }
.Ml-14 { margin-left: 14px; }
.Ml-15 { margin-left: 15px; }
.Ml-16 { margin-left: 16px; }
.Ml-17 { margin-left: 17px; }
.Ml-18 { margin-left: 18px; }
.Ml-19 { margin-left: 19px; }
.Ml-20 { margin-left: 20px; }
.Ml-21 { margin-left: 21px; }
.Ml-22 { margin-left: 22px; }
.Ml-23 { margin-left: 23px; }
.Ml-24 { margin-left: 24px; }
.Ml-25 { margin-left: 25px; }
.Ml-26 { margin-left: 26px; }
.Ml-27 { margin-left: 27px; }
.Ml-28 { margin-left: 28px; }
.Ml-29 { margin-left: 29px; }
.Ml-30 { margin-left: 30px; }

.Ml-0-i  { margin-left: 0px !important; }
.Ml-1-i  { margin-left: 1px !important; }
.Ml-2-i  { margin-left: 2px !important; }
.Ml-3-i  { margin-left: 3px !important; }
.Ml-4-i  { margin-left: 4px !important; }
.Ml-5-i  { margin-left: 5px !important; }
.Ml-6-i  { margin-left: 6px !important; }
.Ml-7-i  { margin-left: 7px !important; }
.Ml-8-i  { margin-left: 8px !important; }
.Ml-9-i  { margin-left: 9px !important; }
.Ml-10-i { margin-left: 10px !important; }

.Mr-0  { margin-right: 0px; }
.Mr-1  { margin-right: 1px; }
.Mr-2  { margin-right: 2px; }
.Mr-3  { margin-right: 3px; }
.Mr-4  { margin-right: 4px; }
.Mr-5  { margin-right: 5px; }
.Mr-6  { margin-right: 6px; }
.Mr-7  { margin-right: 7px; }
.Mr-8  {margin-right: 8px;}
.Mr-9  { margin-right: 9px; }
.Mr-10 { margin-right: 10px; }
.Mr-20 { margin-right: 20px; }

.Mb-0  { margin-bottom: 0px; }
.Mb-1  { margin-bottom: 1px; }
.Mb-2  { margin-bottom: 2px; }
.Mb-3  { margin-bottom: 3px; }
.Mb-4  { margin-bottom: 4px; }
.Mb-5  { margin-bottom: 5px; }
.Mb-6  { margin-bottom: 6px; }
.Mb-7  { margin-bottom: 7px; }
.Mb-8  { margin-bottom: 8px; }
.Mb-9  { margin-bottom: 9px; }
.Mb-10 { margin-bottom: 10px; }
.Mb-15 { margin-bottom: 15px; }
.Mb-20 { margin-bottom: 15px; }