@font-face {
    font-family: 'DIN';
	/* http://www.cufonfonts.com/en/font/13546/din-pro-cond */
	/* http://www.freefontconverter.com/ */
    src: url('http://rotbot.co.nz/fonts/DINPro.otf'); /* IE9 Compatibility Modes */
	src: url('http://rotbot.co.nz/fonts/DINPro.ttf') format('embedded-opentype');
    /*src: url('../fonts/DIN_Medium.eot?') format('eot'),  /* IE6-IE8 */
    src: url('http://rotbot.co.nz/fonts/DINPro.otf') format('otf'), url('http://rotbot.co.nz/fonts/DINPro.ttf') format('truetype'); /* Safari, Android, iOS */
}

/**** GLOBAL ****/
body, html { margin: 0px; padding: 0px; font-family: 'DIN', sans-serif; font-size: 10px; }
textarea:focus, input:focus { outline: 0; }

.layout-container { width: 100%; }
.layout-inner { max-width: 768px; margin: 0 auto; }
.clear { clear: both; }
.right { float: right; }

.strike-through {text-decoration: line-through;}

.notification-error { color: #C10C13; border: 1px solid #C10C13; background-color: rgba(193,12,19,0.17); padding: 5px; border-radius: 3px; }
.notification-success { color: #29568f; border: 1px solid #29568f; background-color: rgba(41, 86, 143, 0.17); padding: 5px; border-radius: 3px; }

.gst { vertical-align: super; font-size: 10px; }

/**** STANDARD FORM ****/
.form { max-width: 300px; margin: 0 auto; }
.form label { display: block; padding: 12px 2px 0 5px; color: #84BD00; }
.form input, .form select, .form span { width: 100%; box-sizing: border-box; padding: 5px; border: 1px solid #658D1B; border-radius: 10px; font-size: 1em; font-family: 'Arial', sans-serif; }
.form span { display: block; border-color: transparent; }
.form select { padding: 4px 5px; }
.form .message-box { width: 100%; box-sizing: border-box; border: 1px solid #658D1B; border-radius: 10px; margin: 12px 0 5px 0; }
.form .message-box label { padding-top: 5px; }
.form textarea { width: 100%; height: 150px; box-sizing: border-box; margin-bottom: 7px; padding: 5px; border: 0; font-size: 1em; font-family: 'Arial', sans-serif; }
.form input[type=submit] { width: 80px; float: right; clear: both; padding-right: 25px; margin-bottom: 2em; text-align: right; color: #658D1B; /*font-family: 'Ropa Sans', sans-serif; */font-size: 1.2em; cursor: pointer; border-color: transparent; background-color: transparent; background:url('../img/content/arrow.png'); background-repeat: no-repeat; background-size: auto 60%; background-position: center right; }

/**** MINIMAL TABLE ****/
table.minimal { width: 100%; }
table.minimal th, table.minimal td { border-right: 1px solid #658D1B; padding: 5px 7px; }
table.minimal th:last-child, table.minimal td:last-child { border-right: none; }
table.minimal thead th { border-bottom: 2px solid #658D1B; }

/**** LAYOUT ****/
#header-container { border-bottom: 1px solid #658D1B; }

#header { padding: 0 0 0 1em; }
#header #menu { margin: 0; padding: 0; list-style-type: none; list-style-image: none; }
#header #menu li { margin: 6px 0; }
#header #menu a { font-size: 1.3em; text-decoration: none; color: #84BD00; }
#header #menu a:hover { color: #658D1B; }
#header #menu a.selected { color: #658D1B; }

#header .logo { float: right; width: 60%; margin-top: 10px; }

#title { margin: 0 0 0 -2px; padding: 0.4em 0 0 0; font-size: 35px; color: #658D1B; }
#title sup { font-size: 6px; position: relative; top: -8px;}
#title span { font-weight: normal; }

#content-column1 { padding: 0 1em; }
#content-full { padding: 0 1em 2em 1em; }

#slideshow-container { border-top: 1px solid #658D1B; }
#slideshow-container .slide { width: 100%; vertical-align: bottom; }

#strip-container { background: #658D1B; color: #fff; }
#strip-container p { margin: 0; padding: 0.5em; text-align: justify; font-size: 0.8em; }

#footer-container { padding: 10px 0; }
#footer .logo { width: 23%; margin-left: 5px; margin-right: 15px; }
#appstore { width: 35%; float: right; margin-right: 1em; }

/**** PAGE: ROTBOT / PREDICT ****/
#features { color: #658D1B; }
#features p { font-size: 1.1em; font-weight: bold; }
#features ul { margin: 1em 0; padding: 0px; list-style: none; }
#features li { margin: 1em 0 1em 0; padding: 0.5em 1em 0.5em 2.5em; border: 1px solid #84BD00; border-radius: 7px; background: url('../img/content/arrow.png'); background-repeat: no-repeat; background-size: 10px; background-position: 10px 8px; }

#download {}
#download p { width: 50%; margin: 1em auto; text-align: center; font-size: 1em; font-weight: bold; }
#download a { color: #658D1B; text-decoration: none; }
#appicon { width: 38px; float: left; }

/**** PAGE: LOGIN ****
#login { max-width: 200px; margin: 2em 0; }
#login label { display: block; padding: 12px 2px 0 5px; color: #84BD00; }
#login input { width: 100%; box-sizing: border-box; padding: 5px; border: 1px solid #658D1B; border-radius: 10px; font-size: 1em; font-family: 'Arial', sans-serif; }
#login input[type=submit] { float: right; width: 80px; cursor: pointer; background-color: transparent; border-color: transparent; padding-right: 25px; background:url('../img/content/arrow.png'); background-repeat: no-repeat; background-size: auto 60%; background-position: center right; text-align: right; color: #658D1B; font-family: 'Ropa Sans', sans-serif; font-size: 1.2em; }
*/

/**** PAGE: ACCOUNT ****/
#purchase-column p { margin: 0; }
#purchase-column input[type=submit] { width: 80px; float: right; clear: both; padding-right: 25px; margin: 1em 1em 1em 0; text-align: right; color: #658D1B; /*font-family: 'Ropa Sans', sans-serif; */font-size: 1.2em; cursor: pointer; border-color: transparent; background-color: transparent; background:url('../img/content/arrow.png'); background-repeat: no-repeat; background-size: auto 60%; background-position: center right; }
#purchase-options { list-style: none; margin:0; padding: 0; }
#purchase-options li { width: 50%; float: left; }
#purchase-options input[type="radio"] { display: none; }
#purchase-options input[type="radio"]:checked + label { background: #d1ed9e; border-color: #658D1B; }
.purchase-button { height: 88px; position: relative; display: block; margin: 0 10px 1em 10px; padding: 10px; border: 1px solid #84BD00; border-radius: 7px; background-color: #FFFFFF; cursor: pointer; }
.purchase-button:hover { border-color: #658D1B; }
.purchase-button .label { margin: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 10px; color: #000000; }
.purchase-button .label span { display: block; margin-top: 5px;  font-size: 30px; color: #658D1B; }
.progressbar-container { width: 100%; height: 1.5em; position: relative; background-color: #f1f1f1; }
.progressbar { height: 100%; position: absolute; line-height: inherit; background-color: #658D1B; }
.expired { font-weight: bold; color: #ce0000; }

/**** RESPONSIVE ****/
@media screen and (min-width: 320px) {
	/** LAYOUT **/
	body, html { font-size: 12px; }
	#header .logo { margin-top: 18px; }
	#title { font-size: 45px; }
	#features li { background-size: 12px; background-position: 12px 10px; }
	#appicon { width: 48px; }
	
	/**** PAGES ****/
	#purchase-column input[type=submit] { width: 90px; }
	.purchase-button .label { font-size: 12px; }
}

@media screen and (min-width: 400px) {
	/** LAYOUT **/
	body, html { font-size: 14px; }
	#header .logo { margin-top: 0px; width: 35%; }
	#header #menu { padding: 2em 0 1em 0; }
	#header #menu li { display: inline; }
	#header #menu a { margin-right: 10px; }
	#footer .logo { width: 100px; margin-right: 20px; }
	#appstore { width: 120px; float: right; margin: 5px 5px 0 0; }
	
	/** STANDARD FORM **/
	.form { max-width: 100%; }
	.form label { width: 40%; float: left; padding: 4px 0px 0px 0px; clear: right; font-size: 1.2em; }
	.form input, .form select, .form span { width: 60%; float: right; margin: 0 0 10px 0; }
	.message-box { clear: both; padding: 0 10px; }		
	.form textarea { padding: 0px; }
	
	/** PAGES **/
	#features { width: 70%; float: left; }
	#features li { margin: 1em 2em 1em 0; background-position: 15px 12px; }
	#download { width: 30%; float: right; margin: 72px 0 0 0;}
	#download p { width: auto; }
	#appicon { width: 60px; float: none; display: block; margin: 0.5em auto; }
	#register input[type=submit] { width: 100px; }
	.purchase-button .label { font-size: 14px; }
	#purchase-column input[type=submit] { width: 100px; }
}

@media screen and (min-width: 550px) {
	/** LAYOUT **/
	#header .logo { width: 140px; }
	#header #menu a { margin-right: 10px; }
}

@media screen and (min-width: 630px) {
	/** LAYOUT **/
	/*body, html { font-size: 14px; }*/
	#header .logo { margin-top: 10px; }
	#header #menu { padding: 3em 0 1em 0; }
	#header #menu a { margin-right: 20px; font-size: 1.5em; }
	#title { margin: 0 0 0 -6px; font-size: 65px; }
	#title sup { font-size: 12px; top: -15px; }
	#content-column1 { width: 65%; min-height: 575px; float:left; padding: 0; }
	#content-column1-inner { padding: 0 1em 4em 1em; }
	#content-column2 { width: 35%; float:left; overflow: hidden; }
	#slideshow-container { border: none; }
	/*#slideshow-container .slide { width: 600px; }*/
	#slideshow-container .slide{ position: absolute; width: auto; height: 100%; }
	#content-container { position: relative; overflow: hidden;}
	#appstore { margin: 5px 1em 0 0; }
	#footer-container { padding-top: 20px; }
	#footer .logo { width: 100px; margin-right: 40px; }
	
	/** PAGES **/
	#buttons-column { width: 70%; float: left; }
	#purchase-column { width: 30%; float: left; }
	#purchase-column p { margin-left: 1em; }
}

@media screen and (min-width: 768px) {
	/** LAYOUT **/
	#header .logo { width: 160px; }
	#extended-blue { position: absolute; top: 0px; right: 0px; width: 30%; height: 100%; background-color: #005592; z-index: -1; }
	/*#content-container { position: relative; overflow: hidden;}
	#slideshow-container .slide{ position: absolute; width: auto; height: 100%; }*/
}

@media screen and (min-width: 800px) {
	/** LAYOUT **/
	#header { padding: 0; }
	#content-column1 { padding: 0; }
	#content-column1-inner { padding: 0 2em 4em 0; }
	#content-full { padding-left: 0; }
}