/* NEW NEW NEW OCT 2016 */
/* Test all changes in topmenu.htm first!!!! */
/* padding is the space between the content and the border, whereas margin is the space outside the border.  Top right bottom left*/
/* vertical-align:baseline; */
/* FONT SIZES */
/* BODY: 18px */
/* LABELS, drop, buttons 20px */
/* */
/* INPUT, h3, menu: 24px */
/* SPACE between CSS means one is a child of class. No space means is both classes */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,ol,ul,li {margin:0px; padding:0px; border:0px; font-family: Arial, sans-serif; }

body {font-size: 16px;}
small {font-size: 12px;}
big {font-size: 20px;}

h1 {font-size: 32px; margin-top:12px; margin-bottom:12px; }
h2 {font-size: 24px; margin-top:30px; margin-bottom:12px; }
h3 {font-size: 20px; margin-top:22px; margin-bottom:6px; }
h4 {font-size: 18px; margin-top:16px; margin-bottom:4px; color:navy; }
h5 {font-size: 17px; }
h6 {font-size: 16px; }

p {margin-top:16px;}

a, a:visited {color:blue;}
a:hover {text-decoration:underline; }
a img {border:0;}

nav ul,nav li {margin:0px; list-style:none;}

html, body {margin:0; padding:0;}
/* 76D3DD = 118, 211, 221 */
.header {height:65px; font-size:24px; line-height:65px; background:#76D3DD; border-bottom:1px black solid; width:100%; z-index:99; transition: font-size 0.5s, height 0.5s linear; position:fixed; top:0px;}
.header.nosticky {position:relative; top:initial;}	/* If we DONT use the staydownwrapper */
.content {width:1000px; margin:0px auto;}
.footer {color:black; background:#76D3DD; border-top:1px black solid; margin-top:16px; width:100%; height:65px; line-height:65px; text-align:center; font-family: Arial, sans-serif; font-size:18px;}
.footer a, .footer a:visited {color:black; text-decoration:none;}

.stickypad  {padding-top:65px;}	/* Inserted if we are usign the top sticky menus */

.image {display:inline; width:400px; height:300px; }
.image.right {float:right;}
.image.left {float:left;}

/* For the STAY DOWN footer, to ensure always at bottom - ONLY for short pages - never have divs height100% and <div style="clear:both;"></div> to end vari height div- within body just wrap with a div class="staydownwrapper" */
html, body {height:100%;}				
.staydownwrapper {min-height:100%; position:relative;}
.staydownwrapper .content {padding-bottom:65px;}
.staydownwrapper .footer {height:65px; position:absolute; bottom:0; left:0;}

@media screen and (max-width: 680px) {
	.image {width:300px; height:220px;}
}

@media screen and (max-width: 500px) {
	.image {display:block; max-width:500px; width:calc(100% + 12px); height:initial; clear: both; margin-left:-6px;}
	.image.right, .image.left {float:initial;}
}

#logolink {float:left; height:100%; padding-left:0; }
/* #logolink {content:url(/zzzimg/Logo.gif);} 		Can univs change logo here */

#menulinks {list-style-type:none; margin:0px; padding:0px; float:right; text-align:right; }
#menulinks li {padding:0px; padding-right:18px; display:inline; }
#menulinks li a {color:black; text-decoration:none;  font-family: 'Montserrat', Arial, sans-serif;}
#menulinks li a:hover{color:white; text-shadow: -1px -1px black, 1px -1px black, -1px 1px black, 1px 1px black;}
#menulinks li #current {text-shadow:none; border-bottom:2px white solid;}
#menulinks li #current:hover {color:white; text-shadow: 0 0 3px red;}
#menulinks.loggedin li {padding-right:10px;}

.signin {padding-right:10px !important;}
.signin {font-size:18px; color:black; text-decoration:none; white-space: nowrap; padding:6px 12px; border:1px solid #ddd; border-radius:6px; text-shadow:none !important;  font-family: 'Montserrat', Arial, sans-serif; }
.signin:hover {color:#fff; border-color:#fff; box-shadow: 0px 0px 10px #fff;}
#mobsignin {display:none;}

.midmenu {list-style-type:none; background: black; font-size:24px; line-height:35px; width:100%; text-align:center;}
.midmenu ul {margin-left:0px auto; margin-right:0px auto;  }
.midmenu ul li {padding:0px; padding-right:18px; display:inline;}
.midmenu ul li a {color:white; text-decoration:none;}
.midmenu ul li a:hover {color:#ccc;}
.midmenu ul li #current {border-bottom:2px white solid;}

.popwin { position: absolute; visibility: hidden; z-index:200; }
.popupwind { position: absolute; visibility: hidden; z-index:200; }		/* The old name for popwin - DELETE THIS */
#popupwind {width:450px; height:450px; font-size:14px; background:white; margin:0px; padding:0px; border:4px solid blue; border-radius:4px; user-select: none; box-shadow: 5px 5px 5px #aaa; z-index:200;position: absolute; visibility: hidden; left:-50%; z-index:200;} /* Used for the maps window */
.popupbar {width:100%; line-height:24px; background: blue; color:white; font-size:18px; text-align:center; cursor:pointer;}

.infobox { position: fixed; visibility: hidden; z-index:200; }
.errormessage {font-size:24px; color: DarkRed; background: Pink; font-weight:bold; border:1px red solid; text-align:center;}
#ZZZZZwarnchange {visibility: hidden; background:yellow; text-align:center; width:200px;}
#warnchange {visibility: hidden; border:1px red solid; background:yellow; width:200px; margin:0 auto; white-space:nowrap;}

#mobileview{display:none;}

/* Class added when we scroll page */
.headerscrolled {height:40px; line-height:40px; font-size:18px; transition: font-size 0.5s, height 0.5s linear; }

/* iPad horis */
@media screen and (max-width: 1023px){					
	.header {height:40px; line-height:40px; font-size:18px; transition: font-size 0.5s, height 0.5s linear; }
	.midmenu  {font-size:18px;}
	#menulinks li {padding-right:12px;}
	#menulinks.loggedin li {padding-right:5px;}
	.signin {padding-right:5px;}
	.signin {padding:3px 6px;}
	.content {width:calc(100% - 12px); margin-left:6px; margin-right:6px; box-sizing: border-box;}
	.stickypad  {padding-top:40px; transition: padding-top 0.5s linear;}
	.footer {height:40px; line-height:40px; font-size:14px;}
	.staydownwrapper .footer {height:40px;}
	#mobileview{display:inline; font-family: Arial, sans-serif; font-size:14px;}
}

/* Hack for longer menu bar makefont smaller if spills*/
@media screen and (max-width: 770px) {
	.header {font-size:12px;}
}
	
/* iPad vertical & Mobile */
#burger {display:none;}
@media screen and (max-width: 590px) {
	#menulinks li {padding-right:5px;}
	#signin {padding-right:1px;}
	
	#burger {display:inline; float:right; height:40px; background:silver; cursor:pointer;}
	#menulinks {display:none;}
	#menulinks {width:200px;}
	#menulinks li {display:block; background: black; }
	#menulinks li a {color:white;}
	#menulinks li:hover {background:gray;}
	#mobsignin {display:inline; float:right; margin-right:20px; line-height:28px;}
	.footer {font-size:13px;}
}

/* make icon a URI http://b64.io/ */
#burger {
	background-image: url(data:image/gif;base64,R0lGODlhKAAoAJEAAAAAAP///wAAAAAAACH5BAkAAAEALAAAAAAoACgAAAhxAAMIHEiwoMGDCBMqXMiwocOHECNKnEixosWLGDMGAMCxo8ePIEMuDEmyJEiFJlOWRKmypceRLltqnEmzps2bOBPGlMlyp8qePk0CDUoSJlGROZMqXcp06dGiQ5++1CkVKcKqVq9i7di0q9evYMOGDQgA);
	no-repeat left center; float:right; width: 40px; height:40px;
}

/***************************** PINK menus for the settings *******************/


.settingmenu {float:left; height:100%;}
.settingmenu ul li {font-size: 24px; width:175px; height:65px; line-height:65px; padding-left: 10px; background: pink; border-bottom:1px red solid; border-right:1px red solid; font-family: Arial; transition: font-size 0.5s, height 0.5s linear; white-space:nowrap;}
.settingmenu ul li a {text-decoration: none; color: black; white-space:nowrap;}
.settingmenu li #current {border-bottom:2px white solid;}

@media screen and (max-width: 1023px){	
	.settingmenu {width:100%; height:40px; text-align:center; background: pink;float:initial; }
	.settingmenu ul {}
	.settingmenu ul li {display:inline; height:40px; line-height:40px; padding:0px; padding-right:12px; border:0; font-size:18px; transition: font-size 0.5s, height 0.5s linear; }
}
/* Don't bother with the small settings menu
@media screen and (max-width: 1023px){					
	.settingmenu ul li {width:124px; height:40px; line-height:40px; padding-left: 1px; font-size:18px; transition: font-size 0.5s, height 0.5s linear; }
}
*/
/***************************** FRONT pre-logon PAGE - PARALLAX *******************/

.paperback {width:100%; background:#ddd; background-image: url('zzzimg/paper-back-sm.gif')}
.paperbackparallax  {width:100%; background:#ddd; background-image: url('zzzimg/paper-back-sm.gif'); border-top:1px gray solid; border-bottom:1px gray solid;}
.parallax {width:100%; height: 500px; background-size: 50%; background-repeat: no-repeat; background-position: center 50%; }
.paratext {font-size:26px; color:white; background-color:black; text-align:center;}

@media screen and (min-width: 681px) {
	.parallax { 
		height: 80vh;									/* WINDOW SLIT HEIGHT - 80 percent of the screen height - Java zooms in */
		background-attachment: fixed;					/* Will fail on ipad - use Java to fix it */
		background-repeat: no-repeat;
		background-size: 50%;						

		-webkit-transition: background-size 1s;			/* CHROME */
		-moz-transition: background-size 1s;			/* IPAD */
		-ms-transition:	background-size 1s linear;		/* IE early version - IE11 */				
		transition: background-size 1s linear;			/* Slow zoom on background zoom */

		background-position: center 50%;				/* This is ignored by Safari */	
		background-position-x: 50%;						/* For Safari only */
		background-position-y: 50%;
		position:relative; z-index:-2;					/* Need to position to allow z index to work */
	}
	.paratext {
		font-size:50px; color:black; background-color:transparent; text-shadow: -1px -1px 0 white, 1px -1px 0 white, -1px 1px 0 white, 1px 1px 0 white; 
		position:fixed; top:50%; top:50vh; left:50%; margin-left: -350px; white-space: nowrap; overflow-x:hidden; z-index:-1;
		opacity: 0; transition: opacity 0.2s linear, left 1s, top 0.1s;
	}
}

@media screen and (max-width: 500px) {
	.parallax {height: 450px; background-size: 95%;}
}

/***************************** FRONT pre-logon PAGE - GET STARTED BOX *******************/

#startedtable {float:right; width:400px; background:#76D3DD; padding: 10px; color:black;}
#startedtable a {margin:0 auto; display:block; color:black!important; background-color:pink; font-size:20px; padding:6px 20px; text-decoration:none; text-align:center; border-radius:8px; background-clip:padding-box;}
#startedtable a:visited {color:#black}
#startedtable a:hover {background-color:yellow; color:black;}

@media screen and (max-width: 500px) {
	#startedtable {width:300px; margin:0px auto; clear: both; float:initial;}
}

/***************************** FORMS ***************************************/
/******** Can use EITHER class="content" for a 1000px width, or class="content" div="mainform" for 620px width */

.mainform {width:620px; background:#eee; border:1px solid #555; border-radius:8px; box-shadow:3px 3px 15px #555; padding-right:16px; padding-left:16px; padding-bottom:16px; margin:0px auto; margin-bottom:16px; margin-top:16px; font-family: Arial, sans-serif;}

.subform {padding:16px; border:1px solid #ccc; background:#eee; margin-bottom: 12px;}
.formhalf {display:inline; float:left;}

.input {width:96%; font-size:24px; margin:0; padding:6px; border:1px solid #a7adfe; box-shadow:inset 0 2px 6px rgba(0,0,0,0.1); border-radius:4px; background-clip:padding-box;}
.input.halfsize {width: 260px;}
.dropblue {cursor:pointer; background:transparent; font-size:20px; color:#45A; margin-bottom:8px; }
.dropselect {cursor:pointer; display:inline-block; font-size:24px; padding:8px; border:1px solid #a7adfe; border-radius:4px; background-clip:padding-box;}

.label {font-size:20px; color:#45A; margin-top:8px; margin-bottom:4px;}
.checkbox {display:inline; height: 22px; width: 22px; padding: 0px; background: #345;}

.clearfix {clear:both;}
.centre {width:100%; text-align:center;}

@media screen and (max-width: 700px) {
	.mainform {width:90%; padding:10px;}
	.subform {padding:0px; border:0px;}
	.formhalf {width:100%; clear:both;}
	.input {width:96%;}
	.input.halfsize {width:96%;}
}


/***************************** BUTTONS ***************************************/

.button, .button:link, .button:visited, .button:active {
    font-size: 20px; font-family: 'Segoe UI', 'Open Sans', Arial, sans-serif;
    display: inline; cursor:pointer;
    background: #ED5E2F; color: white;
	border: 0px;
    text-decoration: none; text-align: center;
    padding: 5px 10px; margin: 15px 0px 0px 15px; line-height: 38px;
	-webkit-appearance: none;
	transition: background 0.2s;
}
.mini, .mini:link, .mini:visited, .mini:active {font-size: 12px; padding: 3px; margin: 5px 0px 0px 5px; line-height: 22px;}

.grey, .grey:link, .grey:visited, .grey:active {background:gray;}
.blue, .blue:link, .blue:visited, .blue:active {background:blue;}
.red,  .red:link,  .red:visited,  .red:active  {background:red;}
.green,.green:link,.green:visited,.green:active {background:green;}

.button:hover {text-decoration: none; background: #74A599;} 

input[type="submit"], input[type="submit"]:active {margin:0px; padding: 0px 10px; border:0px; line-height: 38px; -webkit-appearance: none; }			/* Hack for buttons that appeared bigger */

/***************************** CHECKBOXES as TOGGLE SWITCHES - my custom design! Jun 2016 ***************************************/
@media screen and (min-width: 760px) {
	.flip {position: relative; display: inline-block; width: 64px; font-weight: bold; overflow: hidden;}
	.flip input {display:none;}
	.slide {width: 60px; height:20px; background: #ddd; border: 2px solid #999; border-radius: 10px; font-family: Arial; font-size: 16px; color:#999; padding-top:2px;}
	.dot {position: absolute; display: block; top: 0; bottom: 0; right: 40px; background: #FFF; border: 2px solid #666; width: 20px; height:22px; border-radius: 20px; transition: all 0.3s ease-in 0s;}
	.slide {text-align:right;}
	.slide:after {content: "OFF\00a0";}

	input:checked + .slide {background: #34A7C1; text-align:left;}
	input:checked + .slide:before {content: "\00a0ON"; color:white; }
	input:checked + .slide:after {content: "";}
	input:checked + .slide .dot {right: 0px; }

	.alignflip {width: 84px;}
	.alignflip .slide {background: blue; color:white; width: 80px;}
	.alignflip .dot {right: 60px;}
	.alignflip .slide:after {content: "TOP\00a0";}
	.alignflip input:checked + .slide {background: red;}
	.alignflip input:checked + .slide:before {content: "\00a0LEFT"; }
	
	.coverflip {width: 64px;}
	.coverflip .slide {background: blue; color:white; width: 60px;}
	.coverflip .dot {right: 40px;}
	.coverflip .slide:after {content: "FILL\00a0";}
	.coverflip input:checked + .slide {background: red;}
	.coverflip input:checked + .slide:before {content: "\00a0 FIT"; }	
}

@media screen and (max-width: 759px) {
	.slide, .dot {display: none;}
	.flip {display:inline;}
	.flip input {width:20px; height:20px;}
	.alignflip .slide:after {content: "Set Left";}
	.alignflip input:checked + .slide:after {content: "On Top"; }
}