/*
   Blan.css
   Blanc CSS Styles - EpicSuperAwesome Toolkit
   © 2012 - Blanc Ltd. All rights reserved
*/

/* CSS Reset
----------------------------------------------------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus { outline: 0; }

/* remember to highlight inserts somehow! */
ins { text-decoration: none; }
del { text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Basic Grid
----------------------------------------------------------------------------------------------------*/

.grid_1  {width: 80px;}
.grid_2  {width: 160px;}
.grid_3  {width: 240px;}
.grid_4  {width: 320px;}
.grid_5  {width: 400px;}
.grid_6  {width: 480px;}
.grid_7  {width: 560px;}
.grid_8  {width: 640px;}
.grid_9  {width: 720px;}
.grid_10 {width: 800px;}
.grid_11 {width: 880px;}
.grid_12 {width: 960px;}

.column {
    margin: 0 0px 0 0px;
    float: left;
    display: inline;
}
.row {
    width: 960px;
    margin: 0 auto;
}
.row .row {
    margin: 0 -0px 0 -0px;
    width: auto;
    display: inline-block;
}

/* Basic HTML
----------------------------------------------------------------------------------------------------*/

body { font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; }

a:focus { outline: 1px dotted; }

hr {
	border: 0 #ccc solid;
	border-top-width: 1px;
	clear: both;
	height: 0;
}

/* Headings
----------------------------------------------------------------------------------------------------*/

h1 { font-size: 25px; }
h2 { font-size: 23px; }
h3 { font-size: 21px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 15px; }

/* Spacing
----------------------------------------------------------------------------------------------------*/

ol { list-style: decimal;}
ul { list-style: disc; }
p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset { margin-bottom: 20px; }

/* The meaty bit!
----------------------------------------------------------------------------------------------------------------------------------------------------*/

/* colour sets */
@A1: #92d7a8; @A2: #83cf9a; @A3: #78c990; @A4: #83cf9a; @A5: #74c68b; @A6: #69bf80; @A7: #66b27b; @A8: #59a56c; @A9: #4f9b61;
@B1: #92d7bf; @B2: #83cfb3; @B3: #78c9aa; @B4: #83cfb4; @B5: #74c6a7; @B6: #69bf9d; @B7: #66b294; @B8: #59a585; @B9: #4f9b7a;
@C1: #92d7d4; @C2: #83cfcb; @C3: #78c9c5; @C4: #83cfcc; @C5: #74c6c2; @C6: #69bfbb; @C7: #66b2ae; @C8: #59a5a0; @C9: #4f9b96;
@D1: #92c5d7; @D2: #83bacf; @D3: #78b2c9; @D4: #83bacf; @D5: #74aec6; @D6: #69a5bf; @D7: #669cb2; @D8: #598da5; @D9: #4f829b;
@E1: #92aed7; @E2: #83a1cf; @E3: #7897c9; @E4: #83a1cf; @E5: #7493c6; @E6: #6988bf; @E7: #6682b2; @E8: #5973a5; @E9: #4f689b;
@F1: #9297d7; @F2: #8388cf; @F3: #787dc9; @F4: #8388cf; @F5: #7479c6; @F6: #696ebf; @F7: #666bb2; @F8: #595da5; @F9: #4f539b;
@G1: #a892d7; @G2: #9a83cf; @G3: #9078c9; @G4: #9a83cf; @G5: #8b74c6; @G6: #8069bf; @G7: #7b66b2; @G8: #6c59a5; @G9: #614f9b;
@H1: #bf92d7; @H2: #b383cf; @H3: #aa78c9; @H4: #b483cf; @H5: #a774c6; @H6: #9d69bf; @H7: #9466b2; @H8: #8559a5; @H9: #7a4f9b;
@I1: #d492d7; @I2: #d492d7; @I3: #d492d7; @I4: #cc83cf; @I5: #c274c6; @I6: #bb69bf; @I7: #ae66b2; @I8: #a059a5; @I9: #964f9b;
@J1: #d792c7; @J2: #cf83bc; @J3: #c978b4; @J4: #cf83bd; @J5: #c674b1; @J6: #bf69a8; @J7: #b2669e; @J8: #a5598f; @J9: #9b4f84;
@K1: #d792af; @K2: #cf83a2; @K3: #c97898; @K4: #cf83a2; @K5: #c67494; @K6: #bf6989; @K7: #b26683; @K8: #a55974; @K9: #9b4f69;
@L1: #d79294; @L2: #cf8385; @L3: #c9787a; @L4: #cf8385; @L5: #c67476; @L6: #bf696b; @L7: #b26668; @L8: #a5595a; @L9: #9b4f50;
@M1: #d7a092; @M2: #cf9283; @M3: #c98778; @M4: #cf9283; @M5: #c68374; @M6: #bf7869; @M7: #b27366; @M8: #a56559; @M9: #9b5b4f;
@N1: #d7ae92; @N2: #cfa083; @N3: #c99678; @N4: #cfa083; @N5: #c69274; @N6: #bf8769; @N7: #b28166; @N8: #a57259; @N9: #9b674f;
@O1: #d7b992; @O2: #cfad83; @O3: #c9a478; @O4: #cfae83; @O5: #c6a074; @O6: #bf9669; @O7: #b28e66; @O8: #a57f59; @O9: #9b744f;
@P1: #d7c492; @P2: #cfb983; @P3: #c9b178; @P4: #cfb983; @P5: #c6ad74; @P6: #bfa469; @P7: #b29a66; @P8: #a58b59; @P9: #9b804f;
@Q1: #d7cd92; @Q2: #cfc483; @Q3: #c9bd78; @Q4: #cfc583; @Q5: #c6ba74; @Q6: #bfb269; @Q7: #b2a666; @Q8: #a59859; @Q9: #9b8d4f;
@R1: #d7d592; @R2: #cfcd83; @R3: #c9c778; @R4: #cfcd83; @R5: #c6c474; @R6: #bfbd69; @R7: #b2af66; @R8: #a5a259; @R9: #9b984f;
@S1: #9b984f; @S2: #c6cf83; @S3: #bfc978; @S4: #c7cf83; @S5: #bcc674; @S6: #b4bf69; @S7: #a9b266; @S8: #9ba559; @S9: #919b4f;
@T1: #bbd792; @T2: #afcf83; @T3: #a6c978; @T4: #afcf83; @T5: #a2c674; @T6: #98bf69; @T7: #8fb266; @T8: #80a559; @T9: #759b4f;
@U1: #a2d792; @U2: #94cf83; @U3: #89c978; @U4: #94cf83; @U5: #85c674; @U6: #7abf69; @U7: #75b266; @U8: #67a559; @U9: #5d9b4f;

@pink1: #fc467f; @pink2: #fb2668; @pink3: #ef2565; @pink4: #ef497e; @pink5: #eb1c5e; @pink6: #db1a58; @pink7: #df1d62; @pink8: #d21853; @pink9: #c7174f;

/* base theme colour */
@theme1: @pink1;
@theme2: @pink2;
@theme3: @pink3;
@theme4: @pink4;
@theme5: @pink5;
@theme6: @pink6;
@theme7: @pink7;
@theme8: @pink8;
@theme9: @pink9;

/* base greys */
@base1: #ffffff; @base2: #f6f6f6; @base3: #eaebeb; @base4: #e0e0e2; @base5: #d3d3d5; @base6: #cacacd; @base7: #d1d1d1; @base8: #c0c0c0; @base9: #b3b3b3;

/* dark canvas backgrounds */
@canvas1: #48494b; @canvas2: #2e2f32; @canvas3: #26272a; @canvas4: #2e2f32; @canvas5: #252628; @canvas6: #1d1e20;

/* detail */
@detail1: #545670; @detail2: #424359; @detail3: #37384c;

/* yellow highlight colour */
@yellow1: #ffe118; @yellow2: #fdcf02; @yellow3: #fdc502;

/* we use pink as the main colour by default */
.fgtheme1 { color: @theme1; }
.fgtheme2 { color: @theme2; }
.fgtheme3 { color: @theme3; }
.fgtheme4 { color: @theme4; }
.fgtheme5 { color: @theme5; }
.fgtheme6 { color: @theme6; }
.fgtheme7 { color: @theme7; }
.fgtheme8 { color: @theme8; }
.fgtheme9 { color: @theme9; }

.bgtheme1 { background-color: @theme1; }
.bgtheme2 { background-color: @theme2; }
.bgtheme3 { background-color: @theme3; }
.bgtheme4 { background-color: @theme4; }
.bgtheme5 { background-color: @theme5; }
.bgtheme6 { background-color: @theme6; }
.bgtheme7 { background-color: @theme7; }
.bgtheme8 { background-color: @theme8; }
.bgtheme9 { background-color: @theme9; }

.bgbase1 { background-color: @base1; }
.bgbase2 { background-color: @base2; }
.bgbase3 { background-color: @base3; }
.bgbase4 { background-color: @base4; }
.bgbase5 { background-color: @base5; }
.bgbase6 { background-color: @base6; }
.bgbase7 { background-color: @base7; }
.bgbase8 { background-color: @base8; }
.bgbase9 { background-color: @base9; }

.fgbase1 { color: @base1; }
.fgbase2 { color: @base2; }
.fgbase3 { color: @base3; }
.fgbase4 { color: @base4; }
.fgbase5 { color: @base5; }
.fgbase6 { color: @base6; }
.fgbase7 { color: @base7; }
.fgbase8 { color: @base8; }
.fgbase9 { color: @base9; }

/* a little texture goes a long way */
.noisy { background-image: url(../img/blanc/tile_noise_dark.png)  }
.dusty { background-image: url(../img/blanc/tile_noise_light.png) }

/* default spacing and margins
------------------------------------------------------------------------------------------------------------------------------------------------------ */

.left, .tal { text-align: left; }
.right, .tar { text-align: right; }
.center, .tac { text-align: center; }
.justify, .taj { text-align: justify; }

.mr (@mar: 10px) { margin-right: @mar }
.ml (@mar: 10px) { margin-left: @mar }
.mt (@mar: 10px) { margin-top: @mar }
.mb (@mar: 10px) { margin-bottom: @mar }
.mtb (@mar: 10px){ .mt(@mar); .mb(@mar) }
.mlr (@mar: 10px){ .ml(@mar); .mr(@mar) }
.mar (@mar: 10px) { margin: @mar; }

.pr (@mar: 10px) { padding-right: @mar }
.pl (@mar: 10px) { padding-left: @mar }
.pt (@mar: 10px) { padding-top: @mar }
.pb (@mar: 10px) { padding-bottom: @mar }
.ptb (@mar: 10px){ .pt(@mar); .pb(@mar) }
.plr (@mar: 10px){ .pl(@mar); .pr(@mar) }
.pad (@mar: 10px){ padding: @mar; }

.fr { float: right; }
.fl { float: left;  }
.fn { float: none;  }

.round(@rnd: 5px) {
    border-radius: @rnd;
}

/* Buttons
------------------------------------------------------------------------------------------------------------------------------------------------------ */


.btn {
    margin: 0;
    padding: 0 5px;
    display: inline-block;
	background: @base2 url(../img/blanc/bevel_white.png) -1px 0px no-repeat;
    border-top: 1px solid rgba(0,0,0,0.09);
    border-left: 1px solid rgba(0,0,0,0.12);
    border-bottom: 1px solid rgba(0,0,0,0.19);
    border-right: 1px solid rgba(0,0,0,0.12);
    box-shadow: 0px 1px 3px rgba(0,0,0,0.12);
    .round(4px);
    color: #424359;
    font-size: 14px;
    font-family: Arial, sans-serif;
    font-weight: normal;
    text-decoration: none;
    line-height: 23px !important;
    cursor: pointer;
    vertical-align: bottom;
    &:hover {
        color: @theme2;
    }
}

.btn::-moz-focus-inner { border: 0 !important; padding: 0 !important; } /* hack for firefox height */

.btn.left {
    border-radius: 4px 0 0 4px;
    border-right: 1px solid rgba(0,0,0,0.06);
    z-index: 10;
}

.btn.mid {
    .round(0);
    border-left: none;
    background: #F6F6F6 url(../img/blanc/bevel_white.png) 0 0px no-repeat;
    border-right: 1px solid rgba(0,0,0,0.06);
    z-index: 10;
}

.btn.right {
    border-radius: 0 4px 4px 0;
    border-left: none;
    background: #F6F6F6 url(../img/blanc/bevel_white.png) 0 0px no-repeat;
    border-right: 1px solid rgba(0,0,0,0.12);
    z-index: 5;
}

.btn.vertical, .btn.menu, .btn.fill {
    display: block;
    width: 100%;
}

.btn.vertical, .btn.menu {
    text-align: left;
}

.btn.vertical.rounded.top {
    border-radius: 4px 4px 0 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    border-right: 1px solid rgba(0,0,0,0.12);
}

.btn.vertical.mid {
    border-top: none;
    border-left: 1px solid rgba(0,0,0,0.12);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    border-right: 1px solid rgba(0,0,0,0.12);
}

.btn.vertical.rounded.bottom {
    .round(0 0 4px 4px);
    border-top: none;
}

.btn.menu {
    border-left: none;
    border-right: none;
}

.btn.menu.top {
    border-radius: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.btn.menu.mid {
    border-top: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.btn.menu.bottom {
    border-radius: 0;
    border-top: none;
}

.btn.icon { padding: 0; }

.btn.icon.text { .pr(5px); }

.btn.icon span, .btn span.icon {
    display: inline-block;
    overflow: hidden;
    line-height: 23px;
    width: 23px;
    background: url(../img/symbol.png);
    vertical-align: bottom;
    text-align: left;
    text-indent: -100em;
}

.btn.plain { /* could do plain.icon as not needing a span?! */
    border: none;
    box-shadow: none;
    background: none;
}

.btn.dark  {
    color: #fff;
    background: @canvas2 url(../img/blanc/tile_noise_dark.png);
    box-shadow: none;
    border-left: 1px solid @canvas3;
    border-top: 1px solid @canvas6;
    border-right: 1px solid @canvas5;
    border-bottom: none;
    font-size: 11px;
    line-height: 22px !important;
    text-shadow: 0 1px 5px #000;
    margin-bottom: 1px;
}

.bevel {
    display: inline-block;
    background-color: rgba(0,0,0,0.10);
    .pad(3px);
    .pb(4px);
    .round(7px);
    border-top:    1px solid rgba(0,0,0,0.1);
    border-left:   1px solid rgba(0,0,0,0.05);
    border-right:  1px solid rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.7);
}

.bevel {
    .btn {
        border-top:    1px solid rgba(0,0,0,0.26);
        border-left:   1px solid rgba(0,0,0,0.25);
        border-right:  1px solid rgba(0,0,0,0.25);
        border-bottom: 1px solid rgba(0,0,0,0.26);
        box-shadow: none;
    }
    .btn.left, .btn.mid { border-right: none; }
    .btn.right, .btn.mid { border-left: 1px solid rgba(0,0,0,0.12); }
}

.btn.nobevel {
    margin-top: 4px;
    margin-bottom: 5px;
}

.textbox {
    height: 23px;
    line-height: 23px;
    font-size: 14px;
    color: @base2;
    padding: 0 5px;
    border-radius: 3px;
    border: none;
    border-top: 1px solid rgba(0,0,0,0.26);
}
