html, body {
	font-family:Arial, Helvetica, sans-serif;
	background: #F5F7FA;}
.csrPanel {
	border:2px dashed Green;
	background-color:#EEE;
	padding:2px;}
.courtDetailsSection {
	padding-bottom:7px;
	background-color: #43964b;
	color: white;}
	
#login_form {
	width:100%; 
	height:380px;  
	margin-top:40px; 
	text-align:center; 
	background: #fff;
	border: 1px solid #D9E1EC;
	border-radius: 12px;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, 0.05),
		0 6px 16px rgba(0, 0, 0, 0.06);}
#login_form span:nth-child(1) {
	width:100%; 
	height:60px; 
	float:left; 
	margin-bottom:20px;
	color:#fff;
	line-height:60px;
	font-size:1.4em;
	background:#082D61;
	border-bottom:2px solid #fff;
	border-top-left-radius:6px;
	border-top-right-radius:6px;}
#login_form input {
	width:76%; 
	height:40px;
	margin-top:20px; 
	background: #fff;
	border:thin solid #94a0b1;
    border-radius:6px;
	color: #0F172A;
	text-align:center;
    font-size:1.1em;}
#password {
	 margin-top:10px;}
.login_form_field_label {
	margin-top:4px;
	font-size:0.9em; 
	color:#082D61; 
	display:block;}
#submit_login {
	width:120px;
	margin-top:20px;}
button {
    height:40px;
	cursor:pointer;
	color:#fff;
	border:none;
	background:#D91017;
    border-radius:4px;
    font-size:1.1em;}
button:hover {
	background:#B70C12;}
#article_box {
	width:60%;
	float:left;
	text-align:left;}

#article_box ul {
	padding-left:10px;}

#article_box ul li {
	margin-bottom:10px;
	font-size:1.1em;
	color: #262626;}
#article_box ul li::marker {
	font-size: 1.2em;
	color: #D91017;}

#login_form_box {
	width:35%;
	float:left;
	margin-right:5%;}

header {
	position:relative;}
header .header-img {
    width:auto;
    height:110px;
	float:left;
    margin-top:5px;
    margin-bottom:5px;}

header .tagline {
	float:left;
	margin-left:5px;
	margin-top:20px;
	color:#1d5676;
	font-style:italic;
	font-size:0.85em;
	font-weight:bold;}

header .company-name {
	position:absolute;
	right:0px;
	bottom:10px;
	font-size:2em;
	font-weight:bold;
	color:#082D61;}

header .company-tag-line {
	font-weight:bold;
	font-style:italic;}

header .logo-holder {
	height:120px; 
	display:block; 
	position:relative;}

header .nav-bar {
	width:100%; 
	height:50px; 
	position:relative; 
	background:#082D61; 
	color:#fff;
	border-top-left-radius:6px;
	border-top-right-radius:6px;}

header .nav-bar span:nth-child(1) {
	position:absolute; 
	left:10px; 
	bottom:10px;}

header .contact-hours {
	font-size:0.95em;}

header .strip {
	width:100%;
	height:6px; 
	margin-top:0px; 
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
	background:#D91017;}

.container {
	width:1024px;
	height:100%;
	float:none;
	margin-left:auto;
	margin-right:auto;}

main {
	display:inline-block;
	padding-bottom:40px;}

footer {
	width:100%;
	height:300px;
	position:absolute;
	left:0px;
	bottom:-300px;
	background:#222222;}

#forgot_password {
	display:block;
	margin-top:14px;
	font-size:0.9em;
	color:#082D61;
	text-decoration:none;}
#forgot_password:hover {
	color:#0d3873;
	text-decoration:underline;}
	

@media only screen and (max-width: 1024px){
	.container {width:100%;}
	header .header-img {margin-left:20px;}
	header .company-name {right:20px;}
	header .nav-bar {height:80px;}
	header .company-tag-line {font-size:1.3em;}
	header .contact-hours {position:absolute; bottom:25px; font-size:1.1em;}
	#login_form_box {width:38%; min-width:300px; margin-left:2%;}
	#article_box {width:50%; font-size:1em;}
}
@media only screen and (max-width: 900px){
	header .company-name {font-size:1.4em;}
}
@media only screen and (max-width: 768px){
	header {text-align:center;}
	header .logo-holder {height:90px; display:inline-block;}
	header .header-logo-name {width:100%; display:inline-block; text-align:center;}
	header .header-img {height:80px; margin:0px; display:inline-block;}
	header .tagline {margin-top:10px; text-align:left; font-size:0.7em;}
	header .company-name {display:none;}
	header .nav-bar {height:60px;}
	header .company-tag-line-box {width:100% !important; text-align:center !important;}
	header .company-tag-line {position:static; float:none;}
	header .contact-hours-box {width:100%; float:left; text-align:center;}
	header .contact-hours {width:100%; left:0px; bottom:22px;}
}
@media only screen and (max-width: 720px){
	main {width:100%;}
	#login_form_box {width:100%; text-align:center;}
	#login_form {width:380px; display:inline-block;}
	#article_box {display:none;}
	#login_form_box {width: 100% !important; margin-left: 0px !important;}
}
@media only screen and (max-width: 414px){
	header .logo-holder {height:70px;}
	header .header-img {height:60px;}
	header .tagline {margin-top:5px; text-align:left; font-size:0.65em;}
	header .company-tag-line {font-size:1.1em;}
	header .contact-hours {width:88%; margin-left:6%; font-size:0.95em; line-height:14px;}
	#login_form_box {margin-top:0px;}
	#login_form {width:300px; height:360px;}
	#article_box {margin-top:0px; font-size:1em;}
}
@media only screen and (max-width: 375px){
	header .logo-holder {height:60px;}
	header .header-img {height:50px;}
	header .company-tag-line {font-size:1em;}
	header .tagline {text-align:left; font-size:0.5em; line-height:8px;}
	header .contact-hours {bottom:20px; font-size:0.85em; line-height:12px;}
	header .nav-bar {height:50px; padding:0px; padding-top:5px;}
	#login_form {margin-top:30px;}
	#article_box {font-size:0.9em;}
}
@media only screen and (max-width: 360px){
	#article_box {margin-top:-20px; font-size:0.85em;}
}
@media only screen and (max-width: 320px){
	#login_form {width:280px;}
	#article_box {margin-top:0px;}
}