
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,800,900);


/* ---------------------------------------------------------
 * Reset defaults
 * ---------------------------------------------------------- */

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, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border:0;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	margin:0;
	outline:0;
	padding:0;
	vertical-align:baseline;
}
:focus {/* remember to define focus styles! */
	outline:0;
}
ol, ul {
	list-style:none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse:collapse;
	border-spacing:0;
}
caption, th, td {
	vertical-align:top;
	text-align:left;
}
a img {
	border:0;
}
a,
a:focus,
a:active,
a:hover {
	text-decoration:none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}



/* ---------------------------------------------------------
 * Layout Helpers
 * ---------------------------------------------------------- */

/* clearfix overflow box */

.form-stretch,
.form-stretchmax,
.overflow { 
	display:block;
	position:relative;
	overflow:hidden;
	_overflow:visible;
	_height:1px;
}

.alert,
.message,
.form-group,
.form-label.chbx,
.colpane,
.btnpane,
.clearfix {
	*zoom: 1;
}
.alert:before,
.alert:after,
.message:before,
.message:after,
.form-group:before,
.form-group:after,
.form-label.chbx:before,
.form-label.chbx:after,
.colpane:before,
.colpane:after,
.btnpane:before,
.btnpane:after,
.clearfix:before,
.clearfix:after {
	display: table;
	content: "";
	line-height: 0;
}
.alert:after,
.message:after,
.form-group:after,
.form-label.chbx:after,
.colpane:after,
.btnpane:after,
.clearfix:after {
	clear: both;
}


/* wrappers */

.wrapper {
	max-width:1140px;
	padding:0 30px;
	margin:0 auto;
}

[class*="col"] {
	display: block;
/*	width: 100%;*/
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	min-height: 1px;
}

.col {}

.col15 { width: 20%; }
.col25 { width: 40%; }
.col35 { width: 60%; }
.col45 { width: 80%; }

.col14 { width: 25%; }
.col34 { width: 75%; }

.col13 { width: 33.33333%; }
.col23 { width: 66.66666%; }

.col12 { width: 50%; }

.col10p { width: 10%; }
.col30p { width: 30%; }
.col70p { width: 70%; }
.col90p { width: 90%; }



.colpane {} /* + .clearfix */

.colpane > [class*="col"] {
	float: left;
}



/* containers */

.container10 {
	padding:10px;
}
.container15 {
	padding:15px;
}
.container20 {
	padding:20px;
}
.container25 {
	padding:25px;
}
.container30 {
	padding:30px;
}



/* helpers */

.left { float:left !important; }
.right { float:right !important; }

.center { text-align:center; margin-left:auto; margin-right:auto; }
.center * { float:none !important; }

.clear {
	clear:both;
	_overflow:hidden;
	height:0;
	line-height:0;
	font-size:0px;
}
.hide {
/*	visibility:hidden;*/
	display:none/* !important*/;
}
.nowrap {
	white-space:nowrap;
}
.clip {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}   

.hand {
	cursor:pointer !important;
}
.bold {
	font-weight:bold;
}


/* ul > li hack for blocks justify alignment */

.justify-layout {
	margin:0;
	padding:0;
	list-style-type:none;

	text-align: justify;
	text-justify: newspaper;
	zoom:1;

/*	text-align-last: justify;*/
}
.justify-layout:after {
	width: 100%; 
	height: 0px;
	visibility: hidden;
	overflow: hidden;
	content: '';
	display: inline-block;
}

.justify-layout .justify-layout-item {
	margin:0;
	padding:0;

	min-height:1px;
	display:inline-block;
	vertical-align:top;
	zoom:1;
	*display:inline;
	_height:1px;
	text-align:left !important;
/*	text-align-last: left;*/
}



/* statuses */

.status-active {}
.status-show {}
.status-hide {}
.status-hover {}
.status-disable {}
.status-new {}
.status-expand {}
.status-checked {}
.status-focus {}




/* ---------------------------------------------------------
 * I C O N S
 * ---------------------------------------------------------- */

.fa {
	position:relative;
	text-align:center;
}


.fa {
	font-size:14px;
	height:14px;
	width:14px;
}
.fa16 {
	text-align:center;
	font-size:16px;
	height:16px;
	width:16px;
}
.fa18 {
	text-align:center;
	font-size:18px;
	height:18px;
	width:18px;
}
.fa20 {
	text-align:center;
	font-size:20px;
	height:20px;
	width:20px;
}




/* ---------------------------------------------------------
 * B U T T O N S
 * ---------------------------------------------------------- */

.btn {
	display: inline-block;
	*display: inline;
	*zoom: 1;

	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;

	margin-bottom: 0;
	text-align: center;
	text-decoration:none;
	vertical-align: middle;
	cursor: pointer;
	border:2px solid;
	font-size: 14px;

    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
	padding: 0;
	border: 0;
}

.btn [class^="fa-"],
.btn [class*=" fa-"] {
	vertical-align: middle;
	position:relative;
}


.btn.disabled,
.btn[disabled] {
	cursor: default;
	background-image: none;
	opacity: 0.50;
	filter: alpha(opacity=50);
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}


.btn + .btn {
	margin-left:10px;
}



/* ---- S I Z E ---- */

/* default */

.btn {
	min-width:180px;
	padding:0 40px;
	line-height: 33px;
	height: 38px;
	-webkit-border-radius: 19px;
	-moz-border-radius: 19px;
	border-radius: 19px;
}
.btn [class^="fa-"],
.btn [class*=" fa-"] {
	margin:0 10px 0 -10px;
	top:-1px;
}
_:-ms-input-placeholder, :root .btn [class^="fa-"],
_:-ms-input-placeholder, :root .btn [class*=" fa-"] {
	top:-2px;
}


/* small */

.btn-small {
	min-width:0;
	padding:0 15px;
	font-size:13px;
	line-height: 24px;
	height: 28px;
	-webkit-border-radius: 14px;
	-moz-border-radius: 14px;
	border-radius: 14px;
}
.btn-small [class^="fa-"],
.btn-small [class*=" fa-"] {
	margin:0 5px 0 -5px;
}

_:-ms-input-placeholder, :root .btn-small [class^="fa-"],
_:-ms-input-placeholder, :root .btn-small [class*=" fa-"] {
	top:-1px;
}
_:-moz-tree-row(hover), .btn-small [class^="fa-"].fa20,
_:-moz-tree-row(hover), .btn-small [class*=" fa-"].fa20 {
	top:-2px;
}


/* icon */

.btn-icon {
	min-width:0 !important;
	padding:0 !important;
	width:38px !important;
}
.btn-icon [class^="fa-"],
.btn-icon [class*=" fa-"] {
	margin:0 !important;
}

.btn-small.btn-icon {
	width:32px !important;
}




/* ---- T Y P E ---- */

/* default */

.btn:hover,
.btn:focus {
	color:#fff;
	border-color:#f44e4e;
	background-color: #f44e4e;
}
.btn,
.btn.disabled:hover,
.btn[disabled]:hover {
	color: #e22a1c;
	border-color:#ef2a33;
	background-color:transparent;
}

/* primary */

.btn-primary:hover,
.btn-primary:focus {
	color:#fff;
	border-color:#d9010b;
	background-color: #d9010b;
}
.btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover {
	color:#fff;
	border-color:#ef2a33;
	background-color: #ef2a33;
}

/* secondary */

.btn-secondary:hover,
.btn-secondary:focus {
	color:#fff;
	border-color:#b5b5b5;
	background-color: #b5b5b5;
}
.btn-secondary,
.btn-secondary.disabled:hover,
.btn-secondary[disabled]:hover {
	color:#666;
	border-color:#888;
	background-color:transparent;
}

/* alt */

.btn-alt:hover,
.btn-alt:focus {
	color:#333;
	border-color:#fb7070;
	background-color: #fb7070;
}
.btn-alt,
.btn-alt.disabled:hover,
.btn-alt[disabled]:hover {
	color:#f44e4e;
	border-color:#f44e4e;
	background-color:transparent;
}

/* primary-alt */

.btn-primary-alt:hover,
.btn-primary-alt:focus {
	color:#fff;
	border-color:#e33636;
	background-color: #e33636;
}
.btn-primary-alt,
.btn-primary-alt.disabled:hover,
.btn-primary-alt[disabled]:hover {
	color:#fff;
	border-color:#f44e4e;
	background-color: #f44e4e;
}

/* secondary-alt */

.btn-secondary-alt:hover,
.btn-secondary-alt:focus {
	color:#333;
	border-color:#dbdbdb;
	background-color: #dbdbdb;
}
.btn-secondary-alt,
.btn-secondary-alt.disabled:hover,
.btn-secondary-alt[disabled]:hover {
	color:#fff;
	border-color:#fff;
	background-color:transparent;
}



/* ---- combine .btn to .btnpane ---- */

.btnpane {} /* + .clearfix */

.btnpane .btn,
.btnpane input[type="text"],
.btnpane input[type="number"],
.btnpane input[type="tel"],
.btnpane input[type="password"] {

	float:left;
}
.btnpane .btn:first-child,
.btnpane input[type="text"],
.btnpane input[type="number"],
.btnpane input[type="tel"],
.btnpane input[type="password"] {
	margin-right:0;

	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 0px;
	-mozborder-top-right-radius: 0px;
	-mozborder-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 0px;
}
.btnpane .btn + .btn,
.btnpane input[type="text"] + .btn,
.btnpane input[type="number"] + .btn,
.btnpane input[type="tel"] + .btn,
.btnpane input[type="password"] + .btn {
	margin-left:0;

	-webkit-border-top-left-radius: 0px;
	-webkit-border-bottom-left-radius: 0px;
	-mozborder-top-left-radius: 0px;
	-mozborder-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
}



/* ---------------------------------------------------------
 * F O R M S
 * ---------------------------------------------------------- */

select,
textarea,
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="password"] {
	display: inline-block;
	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: middle;

	padding:4px 12px;
	font-size: 14px;

	color: #333;
	background-color: #fff;

	border: 1px solid #666;
}
select,
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="password"] {
	height: 36px;
}
textarea,
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="password"] {
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
}
input[type="number"] {
	padding-right:4px;
}

select {
	padding-left:5px;
	padding-right:5px;
}
textarea {
	height:54px;
}

::-webkit-input-placeholder {
	color:#999;
}
::-moz-placeholder {
	color:#999;
	opacity:  1;
}
:-ms-input-placeholder {
	color:#999;
}


input[type="radio"],
input[type="checkbox"] {
	margin:0;
	margin-right:5px; * margin-right:2px;
	position:relative; top:2px;
	border:none !important;
	background:none !important;
	cursor:pointer;
}

input[type="button"],
input[type="submit"],
button {
	cursor:pointer !important;
}


/* statuses */

select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus {
	border-color:#2fa6fa;
	-webkit-box-shadow: 0 0 5px rgba(159, 214, 253, 1);
	-moz-box-shadow: 0 0 5px rgba(159, 214, 253, 1);
	box-shadow: 0 0 5px rgba(159, 214, 253, 1);
}

select:disabled,
textarea:disabled,
input[type="text"]:disabled,
input[type="number"]:disabled,
input[type="tel"]:disabled,
input[type="password"]:disabled {
	border-color:#ccc;
	background-color:#f7f7f7;
	color:#999;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

select[readonly],
select[readonly]:focus,
textarea[readonly],
textarea[readonly]:focus,
input[type="text"][readonly],
input[type="text"][readonly]:focus,
input[type="number"][readonly],
input[type="number"][readonly]:focus,
input[type="tel"][readonly],
input[type="tel"][readonly]:focus,
input[type="password"][readonly],
input[type="password"][readonly]:focus {
	border-color:#999;
/*	background-color:#fdfdfd;*/
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}

select.error,
textarea.error,
input[type="text"].error,
input[type="number"].error,
input[type="tel"].error,
input[type="password"].error {
	border-color:#ef2a33;
	-webkit-box-shadow: 0 0 5px rgba(253, 159, 159, 1);
	-moz-box-shadow: 0 0 5px rgba(253, 159, 159, 1);
	box-shadow: 0 0 5px rgba(253, 159, 159, 1);
}


/* input types */

input[type="text"].time,
input[type="text"].search,
input[type="text"].date,
input[type="text"].email {
	padding-right:25px;
	background:#fff url("../img/input-types.png") no-repeat 100% 0;
}
input[type="text"].date { background-position:100% -4px; width:120px; }
input[type="text"].time { background-position:100% -44px; width:78px; }
input[type="text"].search { background-position:100% -84px; }
input[type="text"].email { background-position:100% -124px; }


/* input sizes */

input.s2 { width:45px; }
input.s4 { width:65px; }
input.s6 { width:85px; }
input.s8 { width:105px; }
input.s10 { width:125px; }



/* ---- F O R M  L A Y O U T ---- */

/* labels */

label[for] { cursor:pointer; }

.form-label {
	display:block;
	font-weight:bold;
	padding-bottom:3px;
	white-space:nowrap;
}
.form-label.hor {}
.form-label.hor-const {
	float:left;
	padding:8px 15px 0 0;
}

@media only screen and (min-width : 768px) {
	.form-label.hor {
		float:left;
		padding:8px 15px 0 0;
	}
}



.form-label.chbx,
input[type="radio"] + .form-label,
input[type="checkbox"] + .form-label,
input[type="text"] + .form-label,
input[type="number"] + .form-label,
input[type="tel"] + .form-label {
	display:inline-block;
	font-weight:normal;
	margin-left:10px;
	padding-top:8px;
	white-space:normal;
}
.form-label.chbx {
	display:block;
	margin-left:0;
}
.form-label.chbx input[type="radio"],
.form-label.chbx input[type="checkbox"] {
	float:left;
	margin-right:8px;
}
.form-label.chbx span {}



.form-helper,
.errorMsg {
	display:block;
	font-size:13px;
	padding-top:6px;
}
.form-helper {
	color:#666;
}

.errorMsg { color:#d9010b; }
.errorMsg strong { display:none; }

.left + .form-helper { padding-left:8px; }



/* helpers */

.form-stretch { /* + .overflow */
}
.form-stretch input[type="text"],
.form-stretch input[type="number"],
.form-stretch input[type="tel"],
.form-stretch input[type="password"],
.form-stretch textarea,
.form-stretch select {
	float:none !important;
	width:100%;
}

.form-stretchmax { /* + .overflow */
}
.form-stretchmax input[type="text"],
.form-stretchmax input[type="number"],
.form-stretchmax input[type="tel"],
.form-stretchmax input[type="password"],
.form-stretchmax textarea,
.form-stretchmax select {
	float:none !important;
	max-width:100%;
}


/* groups/lines of controls */

.form-group {} /* + .clearfix */

.form-group + .form-group {
	margin-top:25px;
}

.form-heading {
	border-bottom:1px solid #d7d8d9;
	padding:3px 0px 3px 5px;
	margin-bottom:20px;
}




.radioButtonTable {
	margin:10px 0 0 5px;
}
.radioButtonTable td {
	padding:3px 2px;
}




/* ---------------------------------------------------------
 * Alerts / Messages
 * ---------------------------------------------------------- */

.alert,
.message { /* + clearfix*/
	clear:both;
	display:block;
	position:relative;
	min-height:20px;
	padding:13px 20px 13px 74px;
	margin:10px 0;
	line-height:18px;
	border:1px solid;
}

.alert:before,
.message:before {
	display:block;
	position:absolute;
	left:23px;
/*	top:10px;*/
	top:50%;
	margin-top:-15px;

	font-family: FontAwesome;
	font-size:30px;
	line-height:30px;
	width:30px;
	height:30px;
	text-align:center;
}
ul.alert,
.alert ul,
.message ul {
	list-style:disc;
	margin:0 0 0 20px;
}



/* overlay layout for Orders */

.alert-overlay {
	position:fixed;
	top:50px;
	left:0;
	width:100%;
	z-index:5;

	-ms-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding:10px 0;
	background-color: rgba(60,0,0,0.65);
	cursor:pointer;
}
.alert-overlay .wrapper {
	position:relative;
}
.alert-overlay .alert,
.alert-overlay .message {
/*	margin:0 140px 0 0;*/
	margin:0;
	padding-top:8px;
	padding-bottom:8px;
}
.alert-overlay .alert,
.alert-overlay .message,
.alert-overlay .message table,
.alert-overlay .message table td,
.alert-overlay .message table th {
	font-size:12px;
}
.alert-overlay .message table li {
	padding-top:2px !important;
}


.alert-close {
	display:block;
	position:absolute;
	right:80px;
	top:50%;
	margin-top:-20px;
}
.alert-close:before {
	content: "\f00d";
	display:block;
	font-family: FontAwesome;
	font-size:40px;
	line-height:40px;
	width:40px;
	height:40px;
	color:#fff;
	text-align:center;
	cursor:pointer;
}



/* SF PageMessage hook */

.alert,
.message,
.message table,
.message table td,
.message table th {
	font-size:13px;
}
.message h4 {
	padding-bottom:3px;
}
.message br {
	display:none;
}



/* types */

.alert,
.infoM3 {
	border-color:#a9f8f8;
	background-color:#e9f7f7;
}
.alert:before,
.infoM3:before {
	color:#32b8e4;
/*	content: "\f05a";*/
	content: "\f06a";
}

.alert-warning,
.warningM3 {
	border-color:#eeea92;
	background-color:#fffdd5;
}
.alert-warning:before,
.warningM3:before {
	color:#ff9f05;
	content: "\f071";
}

.alert-error,
.errorM3 {
	border-color:#f5cdcd;
	background-color:#f7e9e9;
}
.alert-error:before,
.errorM3:before {
	color:#e43232;
	content: "\f05e";
}

.alert-ok,
.confirmM3 {
	border-color:#b5f9aa;
	background-color:#ebf7e9;
}
.alert-ok:before,
.confirmM3:before {
	color:#309d1e;
	content: "\f058";
}
