/*--- global --- */
div.light-grey{
	border-top: 1px solid #c9c9c9;
	border-bottom: 1px solid #c9c9c9;
	margin: 5% 2%;
    padding: 2% 0;
    }

div.noMargin {
    margin:0;
    }
	
div.overlay .text h1{
	font-size: 2.25 em;
	padding-bottom: 0;
}


/* ---- homgepage styling --- */


/*  ----- arrow-header with image background ------
.arrow-header h3 {
    background-color: #A6192E;
    background-image: url("/content/dam/sfu/students/portal/graphics/arrow.png");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 120px auto;
    margin-bottom: 0.25em;
    margin-top: 0.5em;
    padding: 0.75em 1em 0.5em 0.5em;
    font-size: 88%;
}
*/
.arrow-header h3 {
    background: none repeat scroll 0 0 #A6192E;
    box-shadow: 0.5px 0.5px 2px 0 #777777;
    font-size: 88%;
    margin-bottom: 0.25em;
    margin-top: 0.5em;
    }
    
.arrow-header h3 a {
    color: #FFFFFF;
    display: block;
    font-family: "DinWebMedium",sans-serif;
    margin: 0;
    padding: 0.75em 1em 0.5em 0.5em;
    text-transform: uppercase;
    }
    
.arrow-header h3 a:hover {
    background: #BF1939;
    color: #fff;
    }
    
.nav-summary {
    margin: 0;
    background: #F3F3F3;
    padding: 0.5em 0 0.75em 0;
	min-height:193px;
    }
    
.nav-summary h3 {
    font-family: "DinWebMedium",sans-serif;
    font-size: 96%;
    margin: 0;
    padding: 0.5em 0 0.5em 0.95em;
}
.nav-summary h3 a {
    color: #3D3935;
}
.nav-summary p {
    font-family: "DinWebLight";
    font-size: 85%;
    line-height: 1.45em;
    margin: 0;
    padding: 0.15em 0.97em;
}

.blue-top {
    border-top: 10px solid #24547c;
    }

.olive-top{
	border-top: 10px solid #C3AF36;
}

.red-top{
	border-top: 10px solid #CB4746;
}

.sage-top{
	border-top: 10px solid #95A794;
}

.orange-top{
	border-top: 10px solid #CA7428;
}

.purple-top{
	border-top: 10px solid #5E447A;
}



/* ---- Homepage announcment styling ---*/
.announcements p {
    font-family: "DinWebLight";
    font-size: 85%;
    padding: 0 1em 0.25em;
    line-height: 1.5em;
}

.announcements {
    padding: 0;
    border-bottom: 1px solid #E0E0E0;
}
.announcements h3 {
    background: none repeat scroll 0 0 #3D3935;
    color: white;
    display: block;
    font-family: "DinWeb",sans-serif;
    font-size: 98%;
    padding: 0.45em 0 0.15em 0.95em;
}
.announcements h4 {
    color: #3D3935;
    font-family: "DINWebMedium",sans-serif;
    font-size: 0.9em;
    font-weight: normal;
    letter-spacing: 0;
    line-height: 1em;
    padding: 0.6em 1em 0;
    text-transform: none;
}

/* ---  Homepage: icon and text styling for bottom of page ---- */
.custom-icon p{
	margin:0;
	}

.custom-icon p a {
    color: #717171;
    font-family: "DinWebMedium",sans-serif;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
	font-size:67%
}

.custom-icon img {
    width: 20%;
}

/* ----- Homepage: icon styling for upper right hand corner ----- */
.custom-icon ul li {
    background: none repeat scroll 0 0 transparent;
    color: #717171;
    float: left;
    font-size: 156%;
    padding-left: 0;
    width: 50%;
}
.custom-icon ul li a {
    color: #717171;
    font-family: "DinWebMedium",sans-serif;
    font-size: 43%;
    text-transform: uppercase;
}
		
.custom-icon ul {
    margin: 0;
	padding:0;
}



/* --- portal header 1 and header 2styling-- */

div.banner-header h1 {
    font-family: "DINWebMedium",sans-serif;
    font-size: 2.5em;
    margin-bottom: 5%;
    padding: 0;
    text-shadow: none;
    }
   
div.h2custom h2 {
    color: #1E1E1E;
    font-family: "DINWebMedium",sans-serif;
    font-size: 2em;
    margin-top: 0;
}  
/* --- portal text styling-- */

div.portal-text p a {
    font-family: "DINWeb",sans-serif;
    font-size: 0.8em;
    margin-bottom: 0;
    padding-bottom: 0;
    text-transform: uppercase;
    }

div.portal-text p {
    margin-top: 0;
    padding-top: 0;
    }
    
div.portal-text h3 {
    color: #3D3935;
    font-family: "DINWeb",sans-serif;
    font-size: 1.2em;
    line-height: 1.25em;
    margin-bottom: 0.5em;
    text-transform: uppercase;
    }
    
div.portal-text h4 {
    background:#BAB7BF;
    color: #ffffff;
    display: inline;
    font-family: "DINWebMedium",sans-serif;
    font-size: 0.7em;
    padding: 3px 8px;
    }
    
.mobile {
	display: none;
}    

.desktop {
	display: block;
}

/* --- break point 1: Resources and Contact information does not display in tablet portrait --- */

@media (max-width: 768px){
	.tablet{
	display: none;
}
}

/* --- break point 2: Used for banner image change --- */

@media (max-width: 640px){

.mobile{
	display: block;
}

.desktop {
	display: none;
}
}
/* --- tablet landscape: background colour --- */
@media (max-width:1024px){
	.nav-summary{
		background:#f3f3f3;
		min-height:230px
	}
	}

/* tablet portait: nav-summary background colour ---- */
@media (max-width:768px){
	.nav-summary{
		background:#f3f3f3;
		min-height:1px
	}
	}
 
/* mobile portiat: text overlay size  ---- */

@media (max-width:640px){
div.overlay .text h1{
	font-size: 2em;;
	padding: 2em 1em 0 0.5em; 
	margin-bottom:0.25em;
	}
}

     
/* --- button content styling-- */


div.buttonText p a {
    color: white;
    font-family: "DinWeb",sans-serif;
    font-size: 0.8em;
    padding: 0.45em 0 0.45em 1em;
    display: inline-block;
    line-height: 1.25em;
}

div.bgBlue p {
    background: none repeat scroll 0 0 #24547C;
    clear: left;
    margin-bottom: 8%;
    }

div.bgMustard p {
    background: none repeat scroll 0 0 #C3AF36;
    clear: left;
    margin-bottom: 8%;
    }

div.bgRed p {
    background: none repeat scroll 0 0 #CB4746;
    clear: left;
    margin-bottom: 8%;
    }

div.bgSeablue p {
    background: none repeat scroll 0 0 #95A794;
    clear: left;
    margin-bottom: 8%;
    }

div.bgOrange p {
    background: none repeat scroll 0 0 #CA7428;
    clear: left;
    margin-bottom: 8%;
    }

div.bgPurple p {
    background: none repeat scroll 0 0 #5E447A;
    clear: left;
    margin-bottom: 8%;
    }

/*-- side info type --*/
div.side-info {
    margin-top: 0;
    }
    
div.side-info p {
    padding: 0 0 0 0.5em;     
    }
    
div.side-info h4 {
    color: #3D3935;
    padding: 1.5em 0 0em 0.5em;
    }
   
/* --- basic list below left hand menu ---*/

div.basicList ul {     
	margin-top: 2%;
	}
	
div.basicList ul li {
    background: none repeat scroll 0 0 transparent;
    display: block;
    margin: 0;
    padding: 0;
    }
    
div.basicList ul li a {
    display: block;
    padding: 1px 8px;
    display: block;
    }
    
div.basicList ul li a:hover {
    background: #d9d9d9;
    padding: 1px 8px;
    }
    
/*--- image --- */
.image a:hover{
	opacity: 0.6;	
	}
	
.image .bordertop-blue {
    border-top: 13px solid #24547c;
    margin-top: 3%;
    }

.image .bordertop-mustard {
    border-top: 13px solid #C3AF36;
    margin-top: 3%;
    }
    
.image .bordertop-red {
    border-top: 13px solid #CB4746;
    margin-top: 3%;
    }
    
.image .bordertop-seablue {
    border-top: 13px solid #95A794;
    margin-top: 3%;
    }
    
.image .bordertop-orange {
    border-top: 13px solid #CA7428;
    margin-top: 3%;
    }
    
.image .bordertop-purple {
    border-top: 13px solid #5E447A;
    margin-top: 3%;
    }

/* --- contact us side address style ---*/

.address-info h4 {
    background: none repeat scroll 0 0 #3D3935;
    color: white;
    padding: .7em 0 .5em 1em;
    margin-bottom: 0;
}
.address-info p {
    background: none repeat scroll 0 0 #F7F7F7;
    font-size: 85%;
    line-height: 1.45em;
    margin: 0;
    padding: 1em;
}