@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');

@media screen and (max-width:319px) 
{
body{
 	font-family:Helvetica, sans-serif;
}
h1{
	font-size:1.9em;
	font-family: times, serif;
	color:#003399;
}
h2{
	font-size:1.2em;
	color:#C58A22;
}
h3{
	font-size:1.1em;
}

h3.error {
    color: #ff0000;
	font-weight:normal;
	line-height:1.1em;
}

p li {
	font-size:.8em;
}


fieldset{
	background-color:#E7EBF2;
}

#username, #password {
    border: 3px solid #5D79AB;
    font-family: helvetica,sans-serif;
    font-size: 1em;
    height: 18px;
    width: 85%;
}

.help {
	text-transform: uppercase;
	padding-left: .5em;

}

small{
	font-size: .6em;
}

.debuggingInfo {
    color: #fff;
    font-size: .6em;
	padding-top:30px;
	text-align:center;
}

}

@media screen and (min-width:320px) and (max-width:480px)
{

	body {
	    background-color: #444;
	    color: #000;
	    font-family: Helvetica, sans-serif;
		margin:0px;
		-webkit-text-size-adjust: none;
	}

	p {
		padding:0; margin:0;
	}
	
	a, a:link{
		font-weight:bold;
	}

	/*css for showing title if styles are disabled */
	.hidden {
		display:none;
	}

	h2{
		text-align: left;
	    font-size: 1.3em;
		color:#c58a22;
		padding-bottom: 20px;
		margin:0px;
		font-weight:normal;
	}

	h2.title {
		padding: 120px 0 20px 20px;
	}
    

	#content {
		background: url(background-480.png) no-repeat;
		background-color:#E7EBF2;
		width: 100%;
		margin-left:auto; 
		margin-right:auto;
		-moz-box-shadow: 5px 15px 15px 5px #222;
		-webkit-box-shadow: 5px 15px 15px 5px #222;
		box-shadow: 5px 15px 15px 5px #222;	
		position:relative;
	}

	.note {
	font-size:.85em;
	padding-bottom: 0px;
	padding-top:10px;
	}

	/*don't think this is needed 
	#topNote h2 {
	    background-color: #EBEDF5;
	    border: 1px solid #8da2b9;
	    margin: 5px;
	    padding: 1em;
	    font-size: 1.2em;
	    margin: 10px auto 0 auto;
	}


	.logo {
	    border: none;
	}
	*/

	#mainContainer {
		border: 1px solid #8da2b9;
	    padding: 1.2em;
	    text-align: center;
	    font-size: 12px;
	    margin: 20px auto 0 auto;
	}

	#successBox {
		    font-size: 0.95em;
		    line-height: 1.3em;
		    margin: 20px auto 0;
		    padding: 0 20px 0 20px;
		    text-align: left;
		}
		
	#successBox p{
	    padding-bottom:.8em;
	}

	.infoBox {
		font-size: 0.8em;
		padding: 0 20px 30px 20px;
		text-align: left;
		line-height:1.3em;
			
		}

	.copyright {
	    text-align: left;
	    padding: 15px 0 15px 30px;
		background-color:#5d79ab;
		color:#a0bff5;
	}
	small{
		font-size: 12px;

	}

	/* Heading tags */

	h1 {
	    background-color: #fff;
	    font-size: 1.2em;
	    color: #8da2b9;
	}

	/* Thanks to Nate and Wes at sourceforge.net */
	h3.error {
	    color: #ff0000;
	    font-size: .9em;
		font-weight:normal;
		margin:10px 0px 0px 0px;
		line-height:1.3em;
	}

	h3 {

	}
	
	h3.login-message{
		padding: 0px 0px 0px 20px;
	    text-align: left;
	}


	/* Form fields */
	/* input:focus, textarea:focus, select:focus {background:#fc3 !important;} */

	input:focus, textarea:focus {
	    background-color: #f9efb9;
	}


	 input.button {
		margin-top: 20px;
	}

	fieldset {
	  text-align: left;
	  margin:0px;
	  padding:0px;
	  border:0px;}

	legend {
	    background-color: #fff;
		color: #61769E;
	    font-weight: bold;
	    font-size: 1.2em;
	}

	form label {
	    display: block;
	    float: left;
	    width: 80%;
	    padding: 15px 0px 3px 0px;
	    margin: 0 0 0px 0;
	    text-align: left;
	    font-size: .95em;

	}

	.checkBox {
	    display: inline;
	    float: left;
	    padding: 3px 5px;
	    margin: 0 0 5px 190px;
	    text-align: right;
	    font-weight: bold;
	    font-size: .8em;
	}

	.labelForCheckBox {
	    display: block;
	    float: left;
	    width: 350px;
	    padding: 0 5px 7px 5px;
	    margin: -1px 0 5px 0;
	    text-align: left;
	    font-weight: normal;
	    font-size: .75em;
	}

	.debuggingInfo {
	    color: #444;
	    font-size: .6em;
		padding-top:20px;
		text-align:center;
	}

	.forScreenReaders {
	    display: none;
	}
	#loginForm{
		padding:120px 0px 15px 20px;
	}

	label {
	float: left;
	clear: left;
	font-family: helvetica, sans-serif;
	font-size: 1em;
	}

	input {
	float: left;
	clear: left;
	}

	#username, #password{
		width:85%;
		height:23px;
		border: solid 3px #5d79ab;
		font-size: 1.4em;
		font-family: helvetica,sans-serif;
	}

	.help {
		float: left;
		font-size: 0.8em;
		padding: 26px 90px 0 10px;
		text-transform: uppercase;
	}

	.help a, .help a:link {
		color:#022541;
	}

	/*submit button styles */

	input.button {
		-moz-box-shadow:inset 0px 3px 7px 0px #ffffff;
		-webkit-box-shadow:inset 0px 3px 7px 0px #ffffff;
		box-shadow:inset 0px 3px 7px 0px #ffffff;
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4d4aa2), color-stop(1, #5d77a8) );
		background:-moz-linear-gradient( center top, #4d4aa2 5%, #5d77a8 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4aa2', endColorstr='#5d77a8');
		background-color:#4d4aa2;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		border:1px solid #3b189c;
		display:inline-block;
		color:#ffffff;
		font-family:helvetica, sans-serif;
		font-size:1em;
		letter-spacing: .05em; 
		font-weight:normal;
		padding:2px 10px;
		text-decoration:none;
		text-shadow:0px 0px 0px #ffffff;
		margin:20px 10px 20px 0px;
	}input.button:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5d77a8), color-stop(1, #4d4aa2) );
		background:-moz-linear-gradient( center top, #5d77a8 5%, #4d4aa2 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d77a8', endColorstr='#4d4aa2');
		background-color:#5d77a8;
	}
	
	input.button:active {
		position:relative;
		top:1px;
	}
	
	/* Help section */
		.atcal-banner{
			width:100%;
			height: 79px;
			background: url("atcal-banner.gif") no-repeat;
		}
		.help-copy{
			border: 1px solid #444;
			width:100%;
			margin-top: 10px;
		}
		.help-copy p{
			padding:0 8px;
			line-height:140%;
		}
		.calnet-help{
			padding:0 8px;
		}
		
		/* Help section */

		.help-copy{
			border: 0px solid #444;
			width:100%;
			margin-top: 10px;
			margin: 0 auto;
			background: #fff;
			padding: 10px 0px;
		}

		h3.calnet-help{
			font-size: 1.4em;
			color: #C58A22;
			padding:15px 0px 15px 30px;
			margin:0;
		}

		.help-copy p {
			padding:0 20px 10px 30px;
			font-size:.9em;
		}
		.calnet-help{
		}

		.atcal-banner{
			width:95%;
			height: 79px;
			background: url("atcal-banner.gif") no-repeat;
			margin: 0 auto;
			border: 1px solid #000;
			margin-bottom: 0px;
		}
		.help-copy ul{
			margin:0;
			padding:0 0px 20px 60px;
			font-size:.9em;
		}
		.help-copy li{
			padding:0 0px 8px 0px;
		}
		
}

@media screen and (min-width:481px)

{

	body {
	    background-color: #444;
	    color: #000;
	    font-family: Helvetica, sans-serif;
		margin:0px;
	}
	
	#content {
		background-image:url(background.png); 
		background-repeat:no-repeat;
		background-color:#e7ebf2;
		width: 580px;
		margin-left: auto; 
		margin-right: auto;
		-moz-box-shadow: 5px 15px 15px 5px #222;
		-webkit-box-shadow: 5px 15px 15px 5px #222;
		box-shadow: 5px 15px 15px 5px #222;	
		position:relative;
	}

	p {
		padding:0; margin:0;
		line-height: 140%;
	}
	
	a, a:link {
		font-weight:bold;
	}

	/*css for showing title if styles are disabled */
	.hidden {
		display:none;
	}

	h2{
		text-align: left;
	    font-size: 1.9em;
		color:#c58a22;
		padding-bottom: 30px;
		margin:0px;
		font-weight:normal;
	}

	h2.title{
		padding: 140px 0 20px 120px;
	 
	}
	.note {
	font-size:.8em;
	padding-bottom: 0px;
	}

	/*don't think this is needed 
	#topNote h2 {
	    background-color: #EBEDF5;
	    border: 1px solid #8da2b9;
	    margin: 5px;
	    padding: 1em;
	    font-size: 1.2em;
	    margin: 10px auto 0 auto;
	}


	.logo {
	    border: none;
	}
	*/

	#mainContainer {
		border: 1px solid #8da2b9;
	    padding: 1.2em;
	    text-align: center;
	    font-size: .9em;
	    margin: 20px auto 0 auto;
	}

	#successBox {
	 	font-size: 0.95em;
		line-height: 1.3em;
	    margin: 20px auto 0;
	    padding: 0 20px 0 120px;
	    text-align: left;
	}
	
	#successBox p{
	    padding-bottom:1em;
	}

	.infoBox {
	    font-size: 0.8em;
	    padding: 0 20px 30px 120px;
	    text-align: left;
	}

	.copyright {
	    text-align: left;
	    padding: 15px 0 15px 120px;
	    margin:  auto 0 auto;
		background-color:#5d79ab;
		color:#a0bff5;
	}
	small{
		font-size: .75em;
	}

	/* Heading tags */

	h1 {
	    background-color: #fff;
	    font-size: 1.2em;
	    color: #8da2b9;
	}

	/* Thanks to Nate and Wes at sourceforge.net */
	h3.error {
	    color: #ff0000;
	    font-size: .9em;
		padding-bottom:10px;
		font-weight:normal;
		margin:20px 0px 0px 0px;
		line-height: 140%;

	}

	h3 {

	}
	h3.login-message{
		padding: 0 20px 0px 120px;
	    text-align: left;
	}
	
	a, a:link {
		color:#174f84;
	}
	
	p{
		line-height:1.5em;
	}

	/* Form fields */
	/* input:focus, textarea:focus, select:focus {background:#fc3 !important;} */

    select {
        font-size: 16px;
    }

	input:focus, textarea:focus {
	    background-color: #f9efb9;
	}


	 input.button {
		margin-top: 20px;
	}

	fieldset {
	  text-align: left;
	  margin:0px;
	  padding: 140px 0px 0px 118px;
	  border:0px;}

    #welcome {
        padding: 140px 0px 0px 118px;
    }

	legend {
	    background-color: #fff;
		color: #61769E;
	    font-weight: bold;
	    font-size: 1.2em;
	}

	form label {
	    display: block;
	    float: left;
	    width: 280px;
	    padding: 15px 0px 3px 0px;
	    margin: 0 0 0px 0;
	    text-align: left;
	    font-size: .9em;
	}

    form label[for=surrogate] {
        padding: 0;
        float: none;
        display: inline-block;
    }

    #surrogate {
        margin-right: 15px;
    }

	.checkBox {
	    display: inline;
	    float: left;
	    padding: 3px 5px;
	    margin: 0 0 5px 190px;
	    text-align: right;
	    font-weight: bold;
	    font-size: .8em;
	}

	.labelForCheckBox {
	    display: block;
	    float: left;
	    width: 350px;
	    padding: 0 5px 7px 5px;
	    margin: -1px 0 5px 0;
	    text-align: left;
	    font-weight: normal;
	    font-size: .75em;
	}

	.debuggingInfo {
	    color: #444;
	    font-size: .6em;
		padding-top:30px;
		text-align:center;
	}

	.forScreenReaders {
	    display: none;
	}

    /*
	#loginForm{
		padding:140px 0px 15px 118px;
	}
	 */
    #loginForm {
        padding: 0;
    }

	label {
	float: left;
	clear: left;
	font-family: helvetica, sans-serif;
	font-size: 1em;
	}

	input {
	float: left;
	clear: left;
	}

	#username, #password{
		width:332px;
		height:23px;
		border: solid 3px #5d79ab;
		font-size: 1.2em;
		font-family: helvetica,sans-serif;
	}

/*help and input button */
.help {
	float: left;
	font-size: 0.8em;
	padding: 20px 90px 0 10px;
	text-transform: uppercase;
}

	/*submit button styles */

	input.button {
		-moz-box-shadow:inset 0px 3px 7px 0px #ffffff;
		-webkit-box-shadow:inset 0px 3px 7px 0px #ffffff;
		box-shadow:inset 0px 3px 7px 0px #ffffff;
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4d4aa2), color-stop(1, #5d77a8) );
		background:-moz-linear-gradient( center top, #4d4aa2 5%, #5d77a8 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4d4aa2', endColorstr='#5d77a8');
		background-color:#4d4aa2;
		-moz-border-radius:6px;
		-webkit-border-radius:6px;
		border-radius:6px;
		border:1px solid #3b189c;
		display:inline-block;
		color:#ffffff;
		font-family:helvetica, sans-serif;
		font-size:1em;
		letter-spacing: .05em; 
		font-weight:normal;
		padding:2px 10px;
		text-decoration:none;
		text-shadow:0px 0px 0px #ffffff;
		margin:20px 10px 20px 0px;
	}
	
	input.button:hover {
		background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5d77a8), color-stop(1, #4d4aa2) );
		background:-moz-linear-gradient( center top, #5d77a8 5%, #4d4aa2 100% );
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d77a8', endColorstr='#4d4aa2');
		background-color:#5d77a8;
	}
	
	input.button:active {
		position:relative;
		top:1px;
	}

/* Help section */

	.help-copy{
		border: 0px solid #444;
		width:100%;
		margin-top: 10px;
		margin: 0 auto;
		background: #fff;
		padding: 20px 0px;
	}
	
	h3.calnet-help{
		font-size: 1.4em;
		color: #C58A22;
		padding:15px 0px 15px 80px;
		margin:0;
	}
	
	.help-copy p {
		padding:0 20px 10px 80px;
		font-size:.9em;
	}
	.calnet-help{
	}

	.atcal-banner{
		width:90%;
		height: 79px;
		background: url("atcal-banner.gif") no-repeat;
		margin: 0 auto;
		border: 1px solid #000;
		top: 10px;
		margin-bottom: 0px;
	}
	.help-copy ul{
		margin:0;
		padding:0 0px 20px 120px;
		font-size:.9em;
	}
	.help-copy li{
		padding:0 0px 8px 0px;
	}

}