html,button,input,select,textarea{font-family:'Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;color: #404040;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
*,*:before,*:after{box-sizing:inherit}
html,body{height:100%;position:relative}
body{font-size:1em;line-height:1.4;margin:0;background:#fff url(../images/grid.gif) repeat 15px 10px}
::-moz-selection{background:#b3d4fc;text-shadow:none}
::selection{background:#b3d4fc;text-shadow:none}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc}
img{vertical-align:middle}
fieldset{border:0}
textarea{resize:vertical}
input[type=submit] {outline: none}
h1,h2,h3,h4,h5,h6{text-rendering:optimizelegibility}

a,a:link,a:visited{color:#404040;text-decoration:none}
a:hover{color:#404040}
p{font-size:14px;line-height:24px;padding-bottom: 20px;}

/* ==========================================================================
   layout */

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

.wrapper {
	width: 100%;
}

.hidden {
	display: none;
}

span.error {
	color: red;
	font-size: 10px;
}
input.error {
	border: 1px solid red !important;
}

a.disabled {
   pointer-events: none;
   cursor: default;
}

.sidebar {
  background: #f7f7f7;
  min-width: 280px;
  width: 27.45098039215686%;
  padding: 30px 20px 0 40px;
  height: 100%;
  position: absolute;
}

.logo {
  background: url(../images/logo.png);
  height: 85px;
  width: 172px;
  margin-bottom: 50px;
}

h1 {
	font-size: 28px;
	font-weight: normal;
	padding-bottom: 5px;
}

.site-canvas {
	width: 72.54901960784314%;
	float: right;
}

.site-canvas .center {
	width: 363px;
	margin: 287px auto 0;
}

.site-canvas .center img {
	margin-bottom: 20px;
}

input.text {
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background: #fff;
	border: 1px solid #ddd;
	border-top: 1px solid #ccc;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
	-webkit-transition: border linear 0.1s, box-shadow linear 0.2s;
	-moz-transition: border linear 0.1s, box-shadow linear 0.2s;
	-o-transition: border linear 0.1s, box-shadow linear 0.2s;
	transition: border linear 0.1s, box-shadow linear 0.2s;
	padding: 8px 10px;
	border-radius: 0;
	-webkit-appearance: none;
	margin-bottom: 21px;
	width: 100%;
	float: left;
	clear: left;
}

input.text:focus {
	border-color: rgba(133, 140, 147, 0.8);
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px 1px rgba(133, 140, 147, 0.6);
	-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px 1px rgba(133, 140, 147, 0.6);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px 1px rgba(133, 140, 147, 0.6);
}

.field {
	width: 100%;
	padding-bottom: 20px;
	float: left;
	clear: left;
}

.field label {
	font-size: 14px;
	width: 100%;
	margin-bottom: 5px;
	float: left;
	clear: left;
}

.color {
	width: 20px;
	height: 20px;
	margin: 0 5px 5px 0;
	border-radius: 3px;
	border: 2px solid #939595;
	float: left;
	cursor: pointer;
}

.color.active,.color:hover {
	border-color: #474848;
}


.color.transparent {background: url(../images/bg_transparent.png) no-repeat;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

.color.white {background-color: #ffffff}
.color.white1 {background-color: #e6e6e6}
.color.white2 {background-color: #cccccc}

.color.brown {background-color: #e8e0cc}
.color.brown1 {background-color: #c5b17f}
.color.brown2 {background-color: #a38233}

.color.yellow {background-color: #feff99}
.color.yellow1 {background-color: #fcff00}
.color.yellow2 {background-color: #d0d200}

.color.orange {background-color: #ffeacc}
.color.orange1 {background-color: #ffc97f}
.color.orange2 {background-color: #ff9600}

.color.red {background-color: #ffb2b2}
.color.red1 {background-color: #ff6666}
.color.red2 {background-color: #ff0000}

.color.pink {background-color: #ffdaf1}
.color.pink1 {background-color: #ff8fd6}
.color.pink2 {background-color: #ff45bb}

.color.purple {background-color: #e6ccff}
.color.purple1 {background-color: #c07fff}
.color.purple2 {background-color: #9d33ff}

.color.blue {background-color: #cce3ff}
.color.blue1 {background-color: #66aaff}
.color.blue2 {background-color: #0072ff}

.color.cyan {background-color: #ccfff6}
.color.cyan1 {background-color: #7fffe7}
.color.cyan2 {background-color: #00ffd1}

.color.green {background-color: #ccfacc}
.color.green1 {background-color: #8de18d}
.color.green2 {background-color: #00e400}

.btn,a.btn {
	font-size: 14px;
	color: #fff;
	border: none;
	background: #717fb8 url(../images/arrow.png) no-repeat right center;
	padding: 5px 25px 7px 9px;
	border-radius: 0;
}

.btn:hover {
	background-color: #8594db;
}

@media screen and (min-width: 0px) and (max-width: 750px) {
	.wrapper {padding-bottom: 30px}

	.sidebar {
		width: 100%;
		position: relative;
		padding: 30px 20px 20px 20px;
	}

	.sidebar h1 {padding-bottom: 10px}

	.sidebar p,.logo {display: none}
	
	.site-canvas {width: 100%}	

	.site-canvas .center {
		width: 80%;
		margin-top: 50px;
	}

	.site-canvas .center img {width: 100%}
}

@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    
    	.logo {
    		background-image: url(../images/logo@2x.png);
    		background-size: 172px 85px;
    	}

    	.btn,a.btn {
    		background-image: url(../images/arrow@2x.png);
    		background-size: 15px 11px;
    	}
}

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

.clearfix:before,.clearfix:after{content:" ";display:table}
.clearfix:after{clear:both}
.clearfix{*zoom:1}

/* ==========================================================================
   print styles */

@media print {
    *{background:transparent !important;color:#000 !important;box-shadow:none !important;text-shadow:none !important}
    a,a:visited{text-decoration:underline}
    a[href]:after{content:" (" attr(href) ")"}
    abbr[title]:after{content:" (" attr(title) ")"}
    a[href^="javascript:"]:after,a[href^="#"]:after {content:""}
    pre,blockquote{border:1px solid #999;page-break-inside:avoid}
    thead{display:table-header-group}
    tr,img{page-break-inside:avoid}
    img{max-width:100% !important}
    @page{margin:0.5cm}
    p,h2,h3{orphans:3;widows:3}
    h2,h3{page-break-after:avoid}
}