/* 
  BF Internet HTML boilerplate - an ever-evolving start point for HTML development on BF Internet projects
  This Boilerplate started life as HTML5 Boilerplate [http://html5boilerplate.com]

  It is intended for large groups of styles for pages beyond the home page (contact form, gallery etc.) are separated into a different sheet
  There is no point in every user downloading ALL styles for the whole site, when they only wanted to view the home page  

*/

/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary {display: block;}audio,canvas,video {display: inline-block;}audio:not([controls]) {display: none;height: 0;}[hidden],template {display: none;}html {font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}body {margin: 0;}a {background: transparent;}a:focus {outline: thin dotted;}a:active,a:hover {outline: 0;}h1 {font-size: 2em;margin: 0.67em 0;}abbr[title] {border-bottom: 1px dotted;}b,strong {font-weight: bold;}dfn {font-style: italic;}hr {-moz-box-sizing: content-box;box-sizing: content-box;height: 0;}mark {background: #ff0;color: #000;}code,kbd,pre,samp {font-family: monospace, serif;font-size: 1em;}pre {white-space: pre-wrap;}q {quotes: "\201C" "\201D" "\2018" "\2019";}small {font-size: 80%;}sub,sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}sup {top: -0.5em;}sub {bottom: -0.25em;}img {border: 0;}svg:not(:root) {overflow: hidden;}figure {margin: 0;}fieldset {border: 1px solid #c0c0c0;margin: 0 2px;padding: 0.35em 0.625em 0.75em;}legend {border: 0; padding: 0; }button,input,select,textarea {font-family: inherit; font-size: 100%; margin: 0; }button,input {line-height: normal;}button,select {text-transform: none;}button,html input[type="button"], input[type="reset"],input[type="submit"] {-webkit-appearance: button; cursor: pointer; }button[disabled],html input[disabled] {cursor: default;}input[type="checkbox"],input[type="radio"] {box-sizing: border-box; padding: 0; }input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box;-webkit-box-sizing: content-box; box-sizing: content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}button::-moz-focus-inner,input::-moz-focus-inner {border: 0;padding: 0;}textarea {overflow: auto; vertical-align: top;}table {border-collapse: collapse;border-spacing: 0;}


/* 24 column responsive grid system v3.0 | responsive.gs */
.col { display: block;float: left;width: 100%;}@media ( min-width : 768px ) {.gutters .col {margin-left: 2%;}.gutters .col:first-child { margin-left: 0; }}@media ( min-width : 768px ) {.span_1 { width: 4.16666666667%; }.span_2 { width: 8.33333333333%; }.span_3 { width:12.5%; }.span_4 { width: 16.6666666667%; }.span_5 { width: 20.8333333333%; }.span_6 { width: 25%; }.span_7 { width: 29.1666666667%; }.span_8 { width: 33.3333333333%; }.span_9 { width: 37.5%; }.span_10 { width: 41.6666666667%; }.span_11 { width: 45.8333333333%; }.span_12 { width: 50%; }.span_13 { width: 54.1666666667%; }.span_14 { width: 58.3333333333%; }.span_15 { width: 62.5%; }.span_16 { width: 66.6666666667%; }.span_17 { width: 70.8333333333%; }.span_18 { width: 75%; }.span_19 { width: 79.1666666667%; }.span_20 { width: 83.3333333333%; }.span_21 { width: 87.5%; }.span_22 { width: 91.6666666667%; }.span_23 { width: 95.8333333333%; }.span_24 { width: 100%; }.gutters .span_1 { width: 2.25%; }.gutters .span_2 { width: 6.5%; }.gutters .span_3 { width: 10.75%; }.gutters .span_4 { width: 15.0%; }.gutters .span_5 { width: 19.25%; }.gutters .span_6 { width: 23.5%; }.gutters .span_7 { width: 27.75%; }.gutters .span_8 { width: 32.0%; }.gutters .span_9 { width: 36.25%; }.gutters .span_10 { width: 40.5%; }.gutters .span_11 { width: 44.75%; }.gutters .span_12 { width: 49.0%; }.gutters .span_13 { width: 53.25%; }.gutters .span_14 { width: 57.5%; }.gutters .span_15 { width: 61.75%; }.gutters .span_16 { width: 66.0%; }.gutters .span_17 { width: 70.25%; }.gutters .span_18 { width: 74.5%; }.gutters .span_19 { width: 78.75%; }.gutters .span_20 { width: 83.0%; }.gutters .span_21 { width: 87.25%; }.gutters .span_22 { width: 91.5%; }.gutters .span_23 { width: 95.75%; }.gutters .span_24 { width: 100%; }}
.row {padding-bottom: 1.5em;} /* set according to preference*/

/* ==== Primary Website Styles */

/*	Set all elements box-sizing to border-box (part of responsive.gs) If you need support for IE7 and lower use polyfill: https://github.com/Schepp/box-sizing-polyfill */
* { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	*behavior: url(/js/boxsizing.htc); 
}

html {
	text-align: center;
}

body {
	margin: auto;
	text-align: left;
}

body, select, input, textarea {
	font: 13px/1.4em Helvetica, Helvetica Neue, Arial, sans-serif;
	color: #444;
}

/* CHANGE THE TEXT HIGHLIGHT COLOUR TO SUIT YOUR SITE */
::-moz-selection{ background: #f2895c; color:#fff; text-shadow: none; }
::selection { background:#f2895c; color:#fff; text-shadow: none; } 

/* Differenciate links from body copy with more than just colour. Not everyone can see colours: http://j.mp/i9Wt2E */
a, a:active, a:visited {
	color: #607890;
	text-decoration: underline;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

a:hover {
	color: #036;
	text-decoration: none;
}

h1,h2,h3,h4,h5 {
	/* Top & bottom margin based on font size. */
	margin: 1em 0 0.2em 0;
	line-height:normal;
	letter-spacing:-0.02em;
	font-weight:bold;
}

h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.6em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.2em; }

/* Fonts */

/*	@font-face {
	    font-family: 'FontName';
	    src: url('../fonts/FontName.eot');
	    src: url('../fonts/FontName.eot?iefix') format('eot'),
	         url('../fonts/FontName.woff') format('woff'),
	         url('../fonts/FontName.ttf') format('truetype'),
	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
	    font-weight: normal;
	    font-style: normal; }
*/

/* Non-semantic helper classes */

.align-center {text-align: center;}
.align-right {text-align: right;}

.float-right {float: right;}
.float-left {float: left;}

.uppercase {text-transform: uppercase;}
 
/* for image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers:   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; } 

/* Micro Clearfix: http://nicolasgallagher.com/micro-clearfix-hack/ */
/* Blended with classes from responsive.gs v3.0 */
.container:after, .row:after, .col:after, .group:after, .cf:before,.cf:after{content:"";display:table;}
.container:after, .row:after, .col:after, .group:after, .cf:after{clear:both;}
.container, .row, .col, .group, .cf{*zoom:1;}



/* For when the clearfix won't do - use as <br class="clear"> */
.clear { clear: both; }


/* ==== Default form element styling */

form {
	text-align: left;
	margin: 0 auto;
}

form p      { margin:10px 0; position:relative; clear:both; }
form .req { color:#9a1d20; font-style:normal; }
.form-buttons .req { display:block; margin-bottom:10px; }

fieldset {
	padding: 20px 2%;
	margin: 0 0 20px 0;
	border: 1px solid #cccccc;
}

legend {
	padding: 0 10px;
	font-size: 1.2em;
	font-weight: bold;
}

label {
	float: left;
	cursor: pointer;
	margin-bottom: 0;
	margin-right: 2%;
	margin-top: 8px;
	text-align: right;
	vertical-align: top;
	width: 20%;
}

input,
textarea,
select {
	width: 75%;
	display: inline-block;
	padding: 8px 1%;
	margin: 0;
	border: 1px solid #CCC;
	background-color: #FFFF;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
select { width:77.1666%; cursor:pointer; }

select optgroup {
	padding-left: 5px;
	margin-bottom: 5px;
}

select optgroup option { padding-left:10px; }

input:hover,
textarea:hover,
select:hover {
	outline: none;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
}

::-webkit-input-placeholder    { color: #bbb; }
:-moz-placeholder              { color: #bbb; }
::-moz-placeholder             { color: #bbb; }
:-ms-input-placeholder         { color: #bbb; }

.option-group       { overflow:auto; }
.option-group p     { margin:5px 0; }
.option-group label {
	text-align: left !important;
	width: auto;
	clear: both;
	margin-left: 120px;
}

input[type="checkbox"], input[type="radio"],
input.checkbox, input.radio {
	width: auto !important;
	background: transparent;
	border: none !important;
	position: relative;
	top: 1px;
	margin-right: 8px;
	box-shadow: none;
}

input[type="file"]:focus, input[type="file"]:active,
input[type="radio"]:focus, input[type="radio"]:active,
input[type="checkbox"]:focus, input[type="checkbox"]:active {
	-webkit-box-shadow: none;
	box-shadow: none;
}

.form-buttons {
	text-align: right;
}

/* Fix to remove Chrome spin boxes on number inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* SET ERROR STYLE */

input.error,
select.error,
textarea.error {
	border-color: #F8ACAC;
	background: #fff4f4;
}

input.error:hover,
select.error:hover,
textarea.error:hover {
	border-color: #f19191;
}

input.error:focus,
select.error:focus,
textarea.error:focus {
	border-color: #D12228;
	box-shadow: 0 0 4px #f19191;
}

span.error {
	background-color: #D12228;
	color: #FFFFFF;
	font-size: 0.8em;
	font-weight: bold;
	padding: 1px 5px 3px;
	position: absolute;
	right: 10px;
	top: 6px;
}

select + span.error {
	right: 36px;
}


/* ==== Media Queries */

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
 


/* print styles, compressed */
@media print {*{background:transparent !important;color:#444 !important;text-shadow:none !important;}a,a:visited{color:#444 !important;text-decoration:underline;}a:after{content:" (" attr(href) ")";}abbr:after{content:" (" attr(title) ")";}.ir a:after{content:"";}pre,blockquote{border:1px solid #999;page-break-inside:avoid;}thead{display:table-header-group;}tr,img{page-break-inside:avoid;}@page{margin:0.5cm;}p,h2,h3{orphans:3;widows:3;}h2,h3{page-break-after:avoid;}}

.country-select span {
    display: block;
    padding-left: 29px;
}

.country-select span.GBP {
    background: url('../images/flags/gb.gif') no-repeat;
}

.country-select span.EUR {
    background: url('../images/flags/eu.gif') no-repeat;
}

.country-select span.USD {
    background: url('../images/flags/us.gif') no-repeat;
}

.country-select span.KRW {
    background: url('../images/flags/kr.gif') no-repeat;
}

.country-select span.AUD {
    background: url('../images/flags/au.gif') no-repeat;
}

.country-select span.SGD {
    background: url('../images/flags/sg.gif') no-repeat;
}
