/* HTML5 Tags */
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; }

/* Misc */
input[type=button], input[type=submit] { -webkit-appearance: none; -webkit-border-radius: 0; }
::-webkit-input-placeholder { color: #000; }
:-moz-placeholder { color: #000; opacity: 1; }
::-moz-placeholder { color: #000; opacity: 1; }
:-ms-input-placeholder { color: #000; }

/* Main */
* { border: 0px; margin: 0px; padding: 0px; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: arial; background-color: #2c4f65; }
body:after { content: 'desktop'; display: none; }
@media (max-device-width: 1024px) { body:after { content: 'tablet'; } }
@media (max-device-width: 568px) { body:after { content: 'mobile'; } }
.floatLeft { float: left; }
.floatRight { float: right; }
.clr { clear: both; }

input[type=text], input[type=password], input[type=email] { border: solid 1px #426f8e; min-width: 150px; height: 30px; text-indent: 10px; margin-top: 5px; border-radius: 4px; }
input[type=button], input[type=submit] { background-color: #426f8e; height: 30px; width: 150px; color: #fff; border-radius: 4px; cursor: pointer; margin-top: 10px; text-transform: uppercase; }

input[type=text].error, input[type=password].error, input[type=email].error { border-color: #d30b0b; }
label.error { position: absolute; display: inline-block !important; z-index: 99; top: 1px; left: 205px; }
label.error .errormsg { position: absolute; color: #fff; text-indent: 10px; text-shadow: 1px 1px #5f5f5f; background-color: #d30b0b; border-top-right-radius: 4px; border-bottom-right-radius: 4px; font-size: 14px; padding: 5px 10px 5px 0px; height: 20px; top: 5px; left: 20px; line-height: 20px; white-space: nowrap; }
label.error .arrow { position: absolute; top: 5px; left: 5px; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-right: 15px solid #d30b0b; }

.wrap { max-width: 960px; margin: auto; }
header { background-color: #426f8e; padding-top: 23px; height: 100px; }
header .logo { float: left; margin-top: 5px; }
header .statement { float: right; margin-top: 30px; font-size: 19px; color: #84a1b4; }
.main { min-height: 539px; background-color: #ccc; background-image: url(../_img/img.jpg); background-repeat: no-repeat; background-position: center center; }
.main.backend { background-image: none; background-color: #fff; }

.main .wrap { padding-top: 60px; }
.main .wrap .content { max-width: 655px; min-height: 252px; padding-bottom: 20px; margin: 0; background: url(../_img/content_background.png); border-radius: 8px; }

.main.backend .wrap { padding-top: 10px; width: 1000px; }
.main.backend { min-height: 400px; }
.main.backend .wrap .content { background: none; min-width: 900px; margin: auto; padding-bottom: 100px; }
.main.backend .wrap .content .partnerhome .welcome { float: left; padding-top: 10px; }
.main.backend .wrap .content .partnerhome .logout { float: right; }
.main.backend .wrap .content .partnerhome .partners { margin-top: 20px; }
.main .wrap .content .login.partner { width: 200px; margin: auto; }
.main .wrap .content .login.partner input[type=text], .main .wrap .content .login.partner input[type=password], .main .wrap .content .login.partner input[type=submit] { width: 300px; }
.main .wrap .content .login.partner label.error { left: 320px; }
.main .wrap .content .partnerhome .partnerform input[type=text], .main .wrap .content .partnerhome .partnerform input[type=password], .main .wrap .content .partnerhome .partnerform input[type=submit] { width: 300px; }
.main .wrap .content .partnerhome label.error { left: 320px; }

.main .wrap .content .login { float: left; font-size: 12px; padding: 40px; }
.main .wrap .content .login .forgot { text-align: center; margin-top: 10px; }
.main .wrap .content .login .forgot a { color: #000; }
.main .wrap .content .login .new { margin-top: 20px; border-top: dotted 1px #2c4f65; padding-top: 20px; }
.main .wrap .content .login label.error { left: 155px; }
.field { position: relative; }

.main .wrap .content .context { float: left; max-width: 400px; font-size: 14px; color: #323232; line-height: 18px; padding: 40px 20px 0px 0px; }
.main .wrap .content .context h2 { font-size: 20px; line-height: 24px; margin: 15px 0px 10px 0px; font-weight: normal; }

.main .wrap .content .fullcontext { max-width: 600px; font-size: 14px; color: #323232; line-height: 18px; padding: 20px; }
.main .wrap .content .fullcontext h2 { display: inline-block; font-size: 24px;  vertical-align: middle; font-weight: normal; }
.main .wrap .content .fullcontext .form { position: relative; margin-top: 10px; float: left; width: 200px; }
.main .wrap .content .fullcontext .form input[type=text], .main .wrap .content .fullcontext .form input[type=email], .main .wrap .content .fullcontext .form input[type=password] { width: 200px; }
.main .wrap .content .fullcontext .form input[type=submit] { width: 200px; }
.main .wrap .content .fullcontext .text { float: right; margin-top: 10px; width: 370px; }

.homebuttons { margin-top: 5px; }
.homebuttons input[type=submit] { width: 147px; }

.historyheadline { padding-bottom: 5px; margin-bottom: 10px; border-bottom: dotted 1px #426f8e; }
.historyheadline h3 { margin: 0px; }
.headline { float: left; }
.cprstatus { float: right; margin-top: 2px; font-weight: bold;}
.cprstatus .state { font-size: 20px; margin-left: 5px; float: right; text-transform: uppercase; }
.cprstatus .state.true { color: green; }
.cprstatus .state.false { color: red; }

.back { display: inline-block; background-color: #426f8e; color: #fff; width: 50px; margin: 0px 10px 15px 0px; height: 30px; text-align: center; line-height: 30px; border-radius: 8px; text-shadow: 1px 1px #000; font-weight: bold; cursor: pointer; }

footer { background-color: #2c4f65; padding-bottom: 75px; }
footer .text { float: left; max-width: 420px; margin-top: 30px; font-size: 14px; line-height: 18px; color: #84a1b4; }
footer .text h2 { font-size: 22px; line-height: 26px; margin: 40px 0px 10px 0px; font-weight: normal; color: #fff; }
footer .vdo { float: right; font-size: 14px; line-height: 18px; color: #84a1b4; width: 418px; margin-top: 76px; }
footer .vdo iframe { width: 418px; height: 235px; }

/* Mobile */
@media (min-width : 320px) and (max-width : 767px) 
{
	header .logo { float: none; text-align: center; }
	header .logo img { width: 200px; }
	header .statement { float: none; text-align: center; margin-top: 5px; font-size: 14px; }
	.main { background-image: none; background-color: #ccc; min-height: 200px; }

	label.error { position: static; display: block; left: 0px; margin: 15px 0px; }
	label.error .errormsg { position: relative; left: 0px; padding-left: 10px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
	label.error .arrow { position: absolute; top: 26px; left: 10px; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 15px solid #d30b0b; }

	.history { width: 300px; font-size: 12px; }
	.main .wrap { padding-top: 0px; }
	.main .wrap .content .login { float: none; width: 300px; margin: auto; padding: 20px 0px 20px 0px; }
	.main .wrap .content .login input[type=text], .main .wrap .content .login input[type=password], .main .wrap .content .login input[type=submit] { width: 290px; }

	.main .wrap .content .context { float: none; border-top: dotted 1px #2c4f65; width: 300px; margin: 10px auto 0px auto; padding: 0px 0px 20px 0px; }

	.main .wrap .content .fullcontext { width: 300px; margin: auto; }
	.main .wrap .content .fullcontext .form input[type=text], .main .wrap .content .fullcontext .form input[type=email], .main .wrap .content .fullcontext .form input[type=password] { width: 300px; }
	.main .wrap .content .fullcontext .form input[type=submit] { width: 300px; }

	.main .wrap .content .fullcontext .form { float: none; width: 300px; }
	.main .wrap .content .fullcontext .text { float: none; width: 300px; }

	.main.backend { min-height: 100px; }
	
	.headline { float: none; line-height: 25px; }
	.cprstatus { float: none; margin-top: 15px; }

	footer .text { float: none; width: 300px; margin: 30px auto 0px auto; }
	footer .text h2 { font-size: 18px; line-height: 20px; }
	footer .vdo { float: none; width: 300px; margin: 20px auto 0 auto; }
	footer .vdo iframe { width: 300px; height: 168px; }
}