/* ==========================================================================

  Base Stylesheet - http://matthewhartman.github.com/base/
  Author: Matthew Hartman - http://www.matthewhartman.com.au/
  Version: 1.2 - Last Updated: 16th January, 2013

========================================================================== */

  @import "mixins.less"; // Import the base mixins

  // Global Defaults //

  // Setup Typography
  @baseFont:              "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Helvetica,Arial,Sans-Serif;
  @codeFont:              Monaco, Andale Mono, "Courier New", monospace;
  @quoteFont:             "Georgia", "Times";
  @serif:                 serif;
  @sansSerif:             sans-serif;

  @fontSize:              16; // default font size
  @lineHeight:            26; // default line height size

  // Setup Headings
  @headingFont:           "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック","MS PGothic",Helvetica,Arial,Sans-Serif;

  @h1:                    24;
  @h2:                    22;
  @h3:                    20;
  @h4:                    18;

  // Setup Colours

  @black:                 #000;
  @darkestGrey:           #222;
  @darkerGrey:            #333;
  @darkGrey:              #666;
  @grey:                  #999;
  @lightGrey:             #ddd;
  @lighterGrey:           #eee;
  @lightestGrey:          #f1f1f1;
  @white:                 #fff;

  @darkestBlue:           #0f1b26;
  @darkBlue:              #202f3c;
  @blue:                  #1c415e;
  @lightBlue:             #a9c2d7;
  @lighterBlue:           #cfe6f8;
  @lightestBlue:          #e7f2fb;

  @lightestYellow:        #ffc;

  @purple:                #795682;
  @midOrange:             #c34119;
  @lightOrange:           #ffc9b3;
  @lighterOrange:         #fddfd3;
  @lightestOrange:        #fee9cc;
  
  @buttonOrange:          #ffe0b5;
  @activeOrange:          #fdeed8;



/* ==========================================================================
/* --  Micro Clearfix, Resets and Common Classes
   ========================================================================== */

/* Micro Clearfix */
.clear:before, .clear:after { content: ""; display: table; } .clear:after { clear: both; } .clear { zoom: 1; }
.section:before, .section:after { content: ""; display: table; } .section:after { clear: both; } .section { zoom: 1; }
.checkbox:before, .checkbox:after { content: ""; display: table; } .checkbox:after { clear: both; } .checkbox { zoom: 1; }

/* General Resets */
  /* Start font size at 100% */
html { font-size: 100%; }
  /* Make all form fonts consistent */
button, input, select, textarea { font-family: sans-serif; }
  /* Remove default borders */
form, fieldset, a img { border: 0; }
/* Remove default spacing */
form, fieldset { margin: 0; padding: 0; }

/* Common Classes */
.left { float: left; }
.right { float: right; }
.block { display: block; }
.inline-block {
  display: inline-block;
  *zoom: 1;
  *display: inline;
}
.inline { display: inline; }
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  left: -9999em;
}
.visuallyvisible {
  clip: (auto);
  clip: auto;
  width: auto;
  height: auto;
  overflow: visible;
  left: 0;
}

.strong {
  font-weight: bold;
}

.alert {
  background-color: @lightestYellow;
  .block();
  padding: 4px 8px;
  .roundedcorners(3px);
}

.nolist { list-style: none; }
.nopadding { padding: 0; }
.nomargin { margin: 0; }

.none,
.nodesktop {
  display: none;
}

/* ==========================================================================
/* 1.0 - Document Setup (body, links, headings, code, tables, forms etc)
   ========================================================================== */
/* Body */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
}	
body {
  font-family: @baseFont;
  .font-size(@fontSize);
  .line-height(@lineHeight);
  background-color: @white;
  color: @darkestGrey;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
	background:url(../images/bg.png) repeat;
}
/* Links */
a {
  color: @purple;
  text-decoration: underline;
}
a:visited {
  color: @darkGrey;
}
a:hover {
  text-decoration: none;
}
a:active {
  color: @darkerGrey;
}


/* 1.1 Headings - h1, h2, h3, h4, h5, h6 & other (if any)
   ========================================================================== */
h1, .h1 {
  .font-size(@h1);
}
h2, .h2 {
  .font-size(@h2);
  border-left: 4px solid #a381ac;
  background: #f5f2f6;
  padding: 10px 14px;
}
h3, .h3 {
  .font-size(@h3);
  border-bottom: 1px dashed #000;
  padding-bottom: 5px;
}
h4, .h4 {
  .font-size(@h4);
}
img {
	height: auto;
    max-width: 100%;
	width: auto\9; /* ie8 */
    vertical-align: bottom;
}

/* 1.2 Paragraphs, block quotes, code, pre, etc
   ========================================================================== */
p {
  //margin-bottom: @baseLineHeight / 2;
}
small {
  .font-size(12);
}

/* Block Quotes, Pre and Code Blocks */
blockquote,
q {
  .font-size(20);
  .line-height(32);
  padding: 20px 30px;
  margin: 20px 0;
  font-family: @quoteFont;
  font-style: italic;
}

blockquote:before,
q:before,
blockquote:after,
q:after {
  .font-size(80);
  color: @grey;
}
blockquote:before,
q:before {
  content:"\201C";
  margin-left: -0.5em;
  float: left;
}
blockquote:after,
q:after {
  content:"\201D";
  margin-right: -0.25em;
  float: right;
}

code {
  padding: 2px 6px;
  font-family: @codeFont;
  .font-size(12);
  background-color: @lightestOrange;
  border: 1px solid @lightOrange;
  line-height: normal;
  color: @darkestGrey;
  .roundedcorners(3px);
}

/* Horizontal Rule */
hr {
  border: 0;
  background: none;
  outline: 0;
  height: 1px;
  background-color: @lightGrey;
  margin: 2em 0;
}

/* 1.3 Tables
   ========================================================================== */
table {
  width: 100%;
  border-collapse: collapse;
  border-left: 0;
  background-color: #fff;
  border-spacing: 0;
  table-layout: fixed;
  word-wrap: break-word; // CSS3 Browsers
  -ms-word-wrap: break-word; // IE8
  *white-space: normal;  // IE7
  margin-bottom: 20px;
}
table th {
	width: 25%;
	background: #f9f5fa;
}
table th,
table td {
  padding: 8px;
  line-height: 18px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #e3d3e8;
}
table thead th {
  vertical-align: bottom;
  font-weight: bold;
  background-color: @white;
  color: @darkestGrey;
}




table tfoot td {
  font-weight: bold;
}

table caption {
  padding: .5em;
  font-style: italic;
  background-color: @lighterGrey;
  border-bottom: 0;
  font-weight: bold;
}

/* 1.4 Lists
   ========================================================================== */
ul, ul ul {
  list-style: none;
  margin: 0;
   .nopadding();
}

ol, ol ol {
    list-style: decimal;
    margin: 4px 0 4px 25px;
    .nopadding();
}

/* 1.5 Forms, Labels and Inputs
   ========================================================================== */
fieldset {
  margin: 1.5em 0;
}
legend {
  font-family: @headingFont;
  .font-size(32);
  line-height: normal;
  font-weight: bold;
  width: 100%;
  .block();
  border: 0;
  *margin-left: -5px; //fix alignment for ie7
}
label {
  font-weight: bold;
  cursor: pointer;
}
.inline-field label {
  .inline-block();
  margin-right: 1em;
}
.field {
  padding: 0.2em 0;
  
  label {
    .block();
  } // end label
}

.checkbox {
  .block();
  position: relative;
  line-height: normal;
  padding: 0.2em 0;
  label {
    display: table-cell;
    *zoom: 1;
  } // end label
}
.checkbox input[type=checkbox],
.checkbox input[type=radio] {
  float: left;
  top: -2px;
  position: relative;
  margin-right: 1em;
}
/* Inputs (Text, Search, Email, etc) */
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=tel],
input[type=file] {
  outline: 0;
  padding: 2px 5px;
  height: 28px;
  -webkit-appearance: none; // Remove Default Browser Behaviour for Safari
  -moz-appearance: none; // Remove Default Browser Behaviour for Firefox

  vertical-align: middle;
  .font-size(16);
  font-weight: bold;
  background-color: @white;
  color: @darkGrey;
  border: 1px solid @lightGrey;
  border-top: 1px solid @grey;
  .roundedcorners(3px);
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
input[type=file] {
  border: 0;
  height: 20px;
}
input[type=button]::-moz-focus-inner,
input[type=submit]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner {
  padding: 0;
  border: 0;
}
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
input[type=submit],
input[type=button],
input[type=reset] {
  line-height: normal;
  cursor: pointer;
  -webkit-appearance: none;
  /* Remove Default Browser Behaviour for Safari */

  -moz-appearance: none;
  /* Remove Default Browser Behaviour for Firefox */

}
textarea {
  font-weight: bold;
  background-color: @white;
  color: @darkGrey;
  outline: 0;
  padding: 2px 5px;
  vertical-align: top;
  border: 1px solid @lightGrey;
  padding: 10px;
  resize: none; // disable user resizing
  .roundedcorners(3px);
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
select {
  outline: 0;
  border: 0;
  padding: 7px;
  height: 30px;
  line-height: normal;
  .inline-block();
  vertical-align: middle;
  *border: 10px solid @white;
  outline: 1px solid @grey;
}
select[multiple] {
  min-height: 100px;
  border: 1px solid @lightGrey;
  vertical-align: top;
  border: 1px solid @lightGrey;
}

select,
input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=tel] {
  max-width: 95%;
}

/* Buttons */
.buttons {
  padding: 1em 0;
}
.button {
  .font-size(14);
  line-height: normal;
  cursor: pointer;
  border: 0;
  padding: 0.8em 3em;
  color: @darkestGrey;
  text-decoration: none;
  text-align: center;
}

.orange-button {
  background-color: @lightestOrange;

  &:hover {
    background-color: @buttonOrange;
  } // end hover
  &:active {
    background-color: @activeOrange;
  } // end hover
}
.button[disabled],
.button.disabled {
  color: @grey;
  background-color: @lightestGrey;
}

.no-style-button {
  .font-size(13);
  color: @purple;
  text-decoration: underline;
  border: 0;
  background: transparent;
  height: auto;
  padding: 0;

  &:hover {
  text-decoration: none;
  } // end hover
}
.no-style-button[disabled],
.no-style-button.disabled {
  text-decoration: none;
  color: @grey;
}




/* ==========================================================================
/* 2.0 - Grid Layout (Responsive)
   ========================================================================== */
/* Sections & Content Blocks */
.section { position: relative; }

.row { margin-bottom: 1em; }
.row2 { margin-bottom: 2em; }

.container {
  margin: 0 auto;
  max-width: 960px;
  width: 95%
}
.container-full {
  max-width: 980px;
  margin: 0 auto;
}

/* Fluid Grid */
.col {
  margin-left: 2%;
  float: left;
}
.col:first-child { margin-left: 0; }

/* Columns */
.one { width: 6.5%; }
.two { width: 15.0%; }
.three { width: 23.5%; }
.four { width: 32.0%; }
.five { width: 40.5%; }
.six { width: 49.0%; }
.seven { width: 57.5%; }
.eight { width: 66.0%; }
.nine { width: 74.5%; }
.ten { width: 83.0%; }
.eleven { width: 91.5%; }
.twelve { width: 100%; }

.half { .six(); }
.one-third { .four(); }




// ==========================================================================
// -- Custom Website Styles for Desktop
// ==========================================================================

// Your custom website styles for desktop go here...



/* ==========================================================================
/* -- Tablet Devices (Layout, Modifications, etc)
   ========================================================================== */
@media only screen and (min-width: 720px) and (max-width: 959px) {
html body {
  max-width: 959px;
  padding: 0;
  margin: 0;
}



.notablet { .none(); }
.showtablet { .block(); }


// ==========================================================================
// -- Custom Website Styles for Tablet Devices
// ==========================================================================

// Your custom website styles for tablet devices go here...




} /* End Tablet Media Query */


/* ==========================================================================
/* -- Mobile Devices (Layout, Modifications, etc)
   ========================================================================== */
@media only screen and (max-width: 719px) {
html body {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

/* Mobile Grid */
.one,
.two,
.three,
.four,
.five,
.six,
.seven,
.eight,
.nine,
.ten,
.eleven,
.twelve {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  float: none;
}

/* Mobile Tables */
table th,
table td {
  padding: 4px;
}

/* Mobile Forms */
/*input[type=text],
input[type=password],
input[type=email],
input[type=search],
input[type=tel],
textarea {
  width: 90%;
}
select {
  width: 100%;
}*/

.nomobile { .none(); }
.showmobile { .block(); }


// ==========================================================================
// -- Custom Website Styles for Mobile Devices
// ==========================================================================

// Your custom website styles for mobile devices go here...


} /* End Mobile Media Query */