/* --------------------------------------------------------
Style Sheet for App Global Template

version: 1.0
last modified: 11.8.2012 by Nick Volgas (nvolgas)
author: Ryan O'Connor
email: roconnor@ark.org
website: http://www.arkansas.gov
----------------------------------------------------------*/

/* Global Styles */
	img {max-width: 100%;}
	body {background: #DDDDDD;}
	#header, #app-container {padding: 0px; background-color: #ffffff; margin-top: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; border-radius: 0px;}
	.container-fluid {margin: 0; padding: 0;}
/* END Global Styles */

/* Typography */
	* {font-family: 'Helvetica', Arial, sans-serif;}
	#agency-branding h1, #agency-branding h2, #service-hdr h4, #app h1, #app h2, #app h3, #app h4, #app h5, #app h6 {font-family: 'Droid Sans', sans-serif; font-weight: normal;}
/* END Typography */

/* Arkansas.gov Banner */
	#gov-banner {background-image: url(https://static.ark.org/common/app-clf/images/gov-banner-bg.gif); background-repeat: repeat-x; height: 30px;}
	#gov-banner .span12 a {display: block; text-indent: -9999px; background-image: url(https://static.ark.org/common/app-clf/images/arkansas-gov.png); background-repeat: no-repeat; width: 77px; height: 20px; margin: 5px 20px;}
/* END Arkansas.gov Banner */

/* Header */

	/* Security Bar */
		#service-hdr {background: #179cd8; background-repeat: repeat-x; height: 34px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-bottom: 4px solid #fff;}
		#service-hdr h4 {font-size: 0.875em; letter-spacing: .025em; text-transform: uppercase; float: left; line-height: 14px; margin-left: 10px; color: #ffffff;}
		#service-hdr img {float: right; margin: 8px 8px;}
	/* END Security Bar */

	/* Agency Branding */
		#agency-branding {overflow: hidden; clear: both; background-repeat: repeat-x; -moz-border-radius-bottomleft: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; margin-top: -2px; border-bottom: 4px solid #96cafe; margin: 0 15px;}
		#branding-text {width: 60%; float: left; margin: 10px; color: #262E68; text-shadow: -1px 1px 3px #333333;}
		#agency-branding h1 {font-size: 36px; margin: 0; padding: 0;}
		#agency-branding h2 {font-size: 24px; margin: 0; padding: 0;}
		#agency-branding p {font-size: 12px; margin-top: 15px;}
		#agency-branding #app-image {float: right; margin: 10px 20px;}
		#agency-name a:hover {color:white; text-decoration: none;}
		#agency-name a {color:white;}
	/* END Agency Branding */

/* END Header */

/* App Container */

	/* App Styles */
		#app {padding: 20px 10px; background-color: #fff; border-bottom: 5px solid #179cd8; }
		#app .options {text-align: center; margin-top: 35px; margin-bottom: 20px;}
		#app .options a {margin-bottom: 15px;}
		#app h1 {font-size: 36px;}
		#app h2 {font-size: 24px;}
		#app h3 {font-size: 18px;}
		#app h4 {font-size: 16px;}
		#app h5 {font-size: 15px;}
		#app h6 {font-size: 14px;}
		#app p {font-size: 14px; line-height: 20px;}
		#app em {font-size: 11px; color: red;}
		#cross-sell {display: none; padding: 10px; background-color: #333333;}
		.note {font-size: 11px; color: #666666;}
		#radio-btns input {display: none;}
		label.control-label.btn-label {width: 200px; padding-right: 20px; font-weight: bold;}
		.dataTables_wrapper {overflow: hidden;}

		/* User Forms */
			#app .user-form {padding: 20px; background: url(../images/form-bg.gif); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}
			.user-form label {width: 160px; padding-right: 20px;}
			.user-form .help-block {color: #869383; padding: 10px; border: solid 1px #c7d3c3; background-color: #d3ded0; margin-bottom: 15px;}
		/* END User Forms */

	/* END App Styles */

/* END App Container */

/* Footer Styles */

	.bottom-bar {color: #333333; overflow: hidden;}
	.bottom-bar p {font-size: 11px; line-height: 14px; padding: 10px;}
	.bottom-bar p a {color: #333333;}
	.bottom-bar p a:hover {color: #000000; text-decoration: none;}
	.bottom-bar .ftr-left {float: left;}
	.bottom-bar .ftr-right {float: right;}

/* Footer Styles */

/* Make it Respond */

/* Large desktop */
	@media (min-width: 1200px) {
		div#content {margin-top: 25px;}
		#app {padding: 20px 75px;}
	}

/* Portrait tablet to landscape and desktop */
	@media (min-width: 768px) and (max-width: 979px) {
		#agency-branding p {margin-top: 7px;}
		input, textarea, select, .uneditable-input {width: 190px;}
		.form-horizontal .controls {margin-left: 0;}
		#app .user-form label {text-align: left; float: none;}
		#agency-branding h1 {font-size: 30px;}
		#agency-branding h2 {font-size: 24px;}
	}

/* Landscape phone to portrait tablet */
	@media (max-width: 767px) {
		body, .container-fluid {padding-left: 0px; padding-right: 0px;}
		#header, #app-container, .bottom-bar {margin: 0px;}
		#branding-text {width: 100%;}
		#agency-branding h1 {font-size: 22px;}
		#agency-branding h2 {font-size: 18px;}
		#app h2 {font-size:16px;}
		.bottom-bar {text-align: center;}
		.bottom-bar .ftr-left, .bottom-bar .ftr-right {float: none;}
		.bottom-nav a {margin-bottom: 15px;}
		.bottom-nav a, .bottom-nav input {display: block; float: none;}
		.bottom-nav input {width: 100%;}
		.bottom-nav button.btn.btn-large {width: 100%;}
		.datatable {font-size: 12px;}
		.container {margin: 0px;}
	}
/* Landscape phones and down */
	@media (max-width: 500px) {
		.hidden-phonesm {display: none;}
		#branding-text img {width: 90%;}
		#agency-branding h1 {font-size: 18px;}
		#agency-branding h2 {font-size: 14px; margin-top: -15px;}
		#app h2#heading-text {font-size:20px;}
		.modal-body p {font-size: 11px;}
		.modal-body h3 {font-size: 14px;}
		.datatable {font-size: 8px;}
		.datatable a {font-size: 8px; font-weight: bold;}
		.datatable .btn {
			text-align: center;
			vertical-align: middle;
		}
	}