/* CSS for the Student Login page */
@import url('fonts.css');

/* reset & defaults */
html, body, div, span, form, input, h1, h2, h3, p {
    margin: 0;
    padding: 0;
    border: 0;
    }
html[id*=localhost]   body { background-image: url('cssimages/mathbg2.jpg'); }
html[id*=mathematics] body { background-image: url('cssimages/mathbg.jpg'); }
html[id*=qed]         body { background-image: url('cssimages/mathbg3.jpg'); }

body {
    font-size: 18px;
    font-family: 'PT Sans',sans-serif;
    }
h1, h2, h3 {
    font-size: 1em;
    font-weight: normal;
    line-height: 1;
    }
a {
    text-decoration: none;
    color: #1B55C0;
    }
p {
    line-height: 1.5;
    margin: 0 5% 1.5em;
    }
#wrap {
    width: 70%;
    background: #F5F5F5;
    margin: 4em auto 0;
    border-radius: .5em;
    border: 1px solid #EEE;
    box-shadow: 1px 1px 10px 5px #333;
    overflow: hidden;
    }
h1 {
    font-size: 4em;
    font-weight: bold;
    margin-bottom: .75em;
    color: #1B55C0;
    padding: 5% 0 0 5%;
    }
h3 {
    font-size: .7778em;
    text-transform: uppercase;
    letter-spacing: .142857em;
    color: #666;
    margin-bottom: 1em;
    }
#select-course {
    width: 35%;
    margin: 0 5% 5%;
    float: left;
    }
#select-course input {
    display: none
    }
/*
#select-course input + label {
    display: block;
    padding: 1em 1em 1em 2.25em;
    margin: 0 0 1.5em;
    border: 1px solid #DDD;
    border-radius: 4px;
    color: #666;
    }
*/

#httplocalhostaim #select-course input + label,
#httpsaimdevscrantoneduaim #select-course input + label,
#httpmathematicsscrantoneduaim #select-course input + label,
#httpsqedscrantoneduaim #select-course input + label {
    display: block;
    padding: 0.5em 1em 0.5em 2.25em;
    margin: 0 0 1em;
    border: 1px solid #DDD;
    border-radius: 4px;
    color: #666;
    }
#select-course input + label:hover {
    background: #FFF;
    color: #333;
    box-shadow: 0 .1em 0.25em #CCC inset;
    cursor: pointer;
    transition: all 0.123s ease-out 0s;
    }
#select-course input:checked + label {
    background: url('cssimages/correct-24.png') no-repeat 8px center #FFF;
    color: #333;
    box-shadow: 0 .1em 0.25em #999 inset;
    transition: all 0.123s ease-out 0s;
    }
#login {
    width: 45%;
    margin: 0 5% 5%;
    float: left;
    }
#login h3 {
		display:inline-block;
		margin-right:1em
		}
#login span:after {
		font-family:icomoon;
		content:"\e617";
		color:#888;
		cursor:pointer;
		font-size:.75em;
		}
#login p {
		display:none;
		background:#FFF;
		border:1px solid #888;
		border-radius:.5em;
		box-shadow:0 0 .5em #888;
		color:#1F8DD6;
		left:45%;
		line-height:1.5;
		padding:1em;
		position:absolute;
		top:5em;
		width:31%;
		z-index:99
		}
#login span:hover + p {
		display:inline
		}

#login:after{
    display:none;
    margin-top:2rem;
    line-height:1.5rem;
    background:#FFF;
		border:1px solid #888;
		border-radius:.5em;
		box-shadow:0 0 .5em #888;
		padding:1em;
		color:#1F8DD6;content:"Your AiM username is the initial part of your university email address. For example, if your University of Scranton email address is jane.smith@scranton.edu, then your AiM username is simply jane.smith"}

#StudentID,
#Password {
    font-size: 1em;
    color: #488C13;
    display: block;
    width: 90%;
    padding: 1em;
    border: 1px solid #DDD;
    border-radius: 4px;
    background: transparent;
    }
#StudentID:focus,
#Password:focus,
#Password:valid,
#StudentID:valid {
    background: #FFF;
    box-shadow: 0 .1em 0.25em #999 inset;
    }
#login label {
    display: block;
    color: #888;
    margin: -2.25em 0 2.6em 1em;
    cursor: text;
    }
#login input:focus + label {
    visibility: hidden
    }
#Password:valid + label,
#StudentID:valid + label {
    visibility: hidden
    }
#loginbutton,
#backbutton {
    box-shadow: inset 0px 1px 0px 0px #caefab;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #77d42a), color-stop(1, #5cb811) );
    background: -moz-linear-gradient( center top, #77d42a 5%, #5cb811 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#77d42a', endColorstr='#5cb811');
    background-color: #77d42a;
    border-radius: 1.5em;
    border: 1px solid #268a16;
    display: inline-block;
    color: #FFF;
    cursor: pointer;
    font-size: 1em;
    padding: .5em 1.5em;
    text-align: center;
    text-shadow: 1px 1px 0px #689324;
    }
#loginbutton:hover,
#backbutton:hover {
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #5cb811), color-stop(1, #77d42a) );
    background: -moz-linear-gradient( center top, #5cb811 5%, #77d42a 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5cb811', endColorstr='#77d42a');
    background-color: #5cb811;
    }
#loginbutton:active,
#backbutton:active {
    position: relative;
    top: 1px;
    }
#backbutton {
    margin: 0 5% 5%
    }
a[href="javascript:submitcommand('SendReminder');"] {
    display: inline-block;
    font-size: .8889em;
    margin-left: 1em;
    }
a[href="javascript:submitcommand('SendReminder');"]:hover,
a[href="mailto:monks@scranton.edu"]:hover {
    border-bottom: 1px dashed #025D8C
    }


@media
screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2), /* iPhone 5 */
screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2), /* iPhone 4 */
screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1), /* iPhone 3G */
screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3), /* Samsung Galaxy S4 */
screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2), /* Samsung Galaxy S3 */
screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5), /* Samsung Galaxy S2 */
screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) /* HTC One */ {
	body{font-size:36px}
	#wrap{margin-top:2em;border-radius:1em}
	#wrap,#select-course,#login{width:90%;float:none}
	#select-course{margin-bottom:1.5em}
	#select-course input:checked + label {background:url('cssimages/correct-48.png') no-repeat 16px center #FFF}
	#login-button{padding:1em 2em}
	}