@charset "utf-8";
/* CSS Document */
@font-face { 
  font-family: Droid Sans; 
    src: url('../fonts/DroidSans-webfont.eot'); 
    src: local("Droid Sans"), url('../fonts/DroidSans-webfont.woff'); 
} 
@font-face { 
  font-family: News Cycle; 
    src: url('../fonts/NewsCycle-Regular.eot'); 
    src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf'); 
} 
/*new proximanova fonts added nov-2017*/
@font-face {
    font-family: 'proximanova';
    src: url('../fonts/proximanova-regular.otf');
    src: url('../fonts/proximanova-bold.otf');
    src: url('../fonts/proximanova-light.otf');   
}
html{height:100%; padding:0; margin:0}
body{margin:0;padding:0;height:100%}

#container{margin:0;padding:0;height:100%;position:relative}

/*large area content*/
#large{width:68.2%; background-color: #ee363d;background-image: url(../images/bg-wavy2.png); float:left; height:inherit; postion:relative}
#diagStripeContent{background: url(site_images/diagonal-bg.png) repeat-y right; z-index:4;position: relative; margin:0; padding:0; float:right; width:20%; min-height:100% }

#borderBG{position: absolute; bottom:0; overflow:hidden !important; z-index:1;width:68.2%; height: 60%;display:none;}

#hubLargeText{color:white; text-transform: uppercase; text-align: right; font: bold 5rem 'Droid Sans', arial, sans-serif; position:absolute; z-index: 2; width:65%; top:5rem;}
#hubSmallText{ color:white; text-transform: uppercase; text-align: right; font: bold 3rem 'Droid Sans', arial, sans-serif; position:absolute; z-index: 3; width:65%; top:10rem; }

/*small area and form content*/
#small::before{content:url('../images/colour-logo.png');margin:0 27%; }
#small{width:29.8%; background-color: white;padding:1%; float:left; margin-top:3.3%}

/*login area content*/ 
#loginHeadingText{clear:both; text-transform: uppercase; font: normal 2rem 'Droid Sans', arial, sans-serif; width:100%;}
#loginHeadingText img{width:60%; height:60%;  margin: 25% auto; text-align: center; display: block;}
#loginForm .heading_item{margin: 0 auto; width:100%; text-align:center; padding:1rem 0rem; font: normal 0.75rem 'Droid Sans', arial, sans-serif; text-transform: uppercase; color: #103d9a; font-weight:600}
#loginFormFields{text-align:center;}
#password_reset_div.force .message_item {padding-bottom:1.5rem;}
.heading_item {font-size:1rem;}
#password_reset_div  .heading_item {margin-top:1rem;}
#password_reset_div  .message_item {margin-top:0;}
#loginFormFields .student_id_item {text-align:left;width:70%;margin:0 auto .5rem auto;}
.force_password_reset_form {margin-top:25px;}

input{width:70%; border:1px solid #ebebeb; -webkit-border-radius: 0.4rem;-moz-border-radius: 0.4rem; border-radius:0.4rem; box-sizing: border-box; margin-bottom:0.7rem;height: 3rem; padding:1rem; -moz-appearance: none; -webkit-appearance: none;}
input[type=button], .button{background-color:#64ccc9; border: none; font-style:normal; color:white; text-transform:uppercase;cursor:pointer;}
input:hover[type=button], .button:hover{background-color:#309693}
#footer{clear:both; display:none; bottom:0; position:absolute}

.diagImg{margin-top:-4%; min-width:108%; margin-left:-4%; height: 2rem; background-image: linear-gradient(-45deg, #f8f7ae 25%, transparent 25%, transparent 50%, #f8f7ae 50%, #f8f7ae 75%, transparent 75%, transparent);background-size: 4px 4px;background-color: #2a3076;}


/*larger screens >1800*/
@media all and (min-width: 1800px){

}
/* ------------------DESKTOP FULLSIZE > 1200---------------------- */
@media all and (min-width: 1200px){

}
/* ------------------ < 1200px ANYTHING LESS THAN FULLSIZE---------------------- */
@media all and (max-width:1199px){
input{width:80%;}
#hubLargeText{font: bold 4rem 'Droid Sans', arial, sans-serif;}
#hubSmallText{font: bold 3rem 'Droid Sans', arial, sans-serif;}

}

/* ------------------ > 960 - LANDSCAPE IPAD AND SMALL DESKTOP BROWSER ---------------------- */
@media all and (max-width:960px){
input{width:90%;}
#hubLargeText{font: bold 3rem 'Droid Sans', arial, sans-serif;}
#hubSmallText{font: bold 2.5rem 'Droid Sans', arial, sans-serif;}
#borderBG {max-height:50%}
#borderBG img{height: 100%;}
	
}
/* ------------------ > 760 - LANDSCAPE IPAD AND SMALL DESKTOP BROWSER ---------------------- */
@media all and (max-width:760px){	
#large{width:100%; height:25%;top:3rem;}
#small{clear:both; width:100%; background-color: #ffffff; padding:0;top:7rem; }
#loginHeadingText img{width:25%; margin: 7% auto}	
#borderBG{display:none}
#hubLargeText{ width:75%;font-size:180%; top:6%;}
#hubSmallText{ width:75%;font-size:150%; top:12%;}
#loginFormFields{width:60%; padding:5%; border-radius:1rem; background-color:#EDEDED; margin:0 auto}
input{width:80%; margin: 0.8rem 0}
input[type=button], .button{background-color:#309693; border: none; font-style:normal; color:white; text-transform:uppercase;cursor:pointer;}
input:hover[type=button], .button:hover, .button:active{background-color:#64ccc9}
#footer{display:inline-flex;width:100%;height:10%; background-color: #2F3C77; bottom:-5rem !important}
.diagImg{min-width:100%; margin-left:0;}
}

/* ------------------BROWSERS < 580 - ---------------------- */
@media all and (max-width:580px){
#large{width:100%; height:25%;}
#loginHeadingText img{width:30%;}
#loginForm{font-size:1rem;}
#borderBG{display:none}
#hubLargeText{font-size:150%; top:6%;}
#hubSmallText{font-size:120%; top:12%;}
#loginFormFields{width:94%; padding:3%; border-radius:0rem; background-color:#EDEDED; margin:0 auto}
input{width:80%; margin: 0.8rem 0}
input[type=button], .button{background-color:#309693; border: none; font-style:normal; color:white; text-transform:uppercase;cursor:pointer;}
input:hover[type=button], .button:hover{background-color:#64ccc9}
	#footer{height:15%;}
/*input:active[type=button], .button:active{background-color:#64ccc9}*/
}

/* ------------------SMALL PHONES <480---------------------- */
 @media all and (max-width:480px){
#container{min-height:140%;}
#loginHeadingText img{width:38%;}
#loginForm{font-size:0.9rem;}
	 	#footer{height:18%;}

}
 @media all and (max-width:399px){
	 
}

/* Added by Julie - base font set, change as required */
body, p, div {font-family:arial;font-size:.9rem;}
.message_item {font-size:.9rem;line-height:1.4rem;margin:20px;text-align:center;padding-top:4%;}

.placeholder_style {font-style: italic; color:#ccc}

#password_reset_div .error {color: crimson;font-size: .9rem;padding-top:5px;}
.staff_login_message {
  text-align: center;
  font-size: .8rem;
  font-style: italic;
  margin-top: 10px;
}

 div.success {
    padding:13px 13px 13px 35px;
    background:#dbecca;
    margin-bottom:7px;
    text-transform:uppercase;
    color:#63a81e;
    letter-spacing:1px;
    font-size:13px;
}