html{ }
/*
	CASCADING STYLE SHEET FOR THE BRUIN ACTUARIAL SOCIETY WEBSITE
	AUTHOR DAN SUI, DIRECTOR OF PROFESSIONAL DEVELOPMENT 2016-17
	DECEMBER 9, 2016
*/

/* PORTLAND Font (a serif font) */
@font-face{ font-family:portland;	src:url(fonts/PortlandLDO.ttf);														}
@font-face{ font-family:portland;	src:url(fonts/PortlandLDO_bold.ttf);		font-weight:bold;						}
@font-face{ font-family:portland;	src:url(fonts/PortlandLDO_italic.ttf);							font-style:italic;	}
@font-face{ font-family:portland;	src:url(fonts/PortlandLDO_bold_italic.ttf);	font-weight:bold;	font-style:italic;	}

/* ISTOK Font (a sans-serif font) */
@font-face{ font-family:istok;		src:url(fonts/Istok-Regular.ttf);													}
@font-face{	font-family:istok;		src:url(fonts/Istok-Bold.ttf);				font-weight:bold;						}
@font-face{	font-family:istok;		src:url(fonts/Istok-Italic.ttf);								font-style:italic;	}	
@font-face{	font-family:istok;		src:url(fonts/Istok-BoldItalic.ttf);		font-weight:bold;	font-style:italic;	}

/* LUZSANS Font (a sans-serif font) */
@font-face{	font-family: LuzSans;	src:url(fonts/LUZHPORO.TTF);															}
@font-face{	font-family: LuzSans;	src:url(fonts/LUZHPBRO.TTF);					font-weight: bold;						}
@font-face{	font-family: LuzSans;	src:url(fonts/LUZHPOIT.TTF);										font-style:italic;	}
@font-face{	font-family: LuzSans;	src:url(fonts/LUZHPBIT.TTF);					font-weight: bold;	font-style:italic;	}

/* SOURCESANS Font (a sans-serif font) */
@font-face{	font-family: SourceSans;	src:url(fonts/SourceSansPro-Regular.otf);											}
@font-face{	font-family: SourceSans;	src:url(fonts/SourceSansPro-Bold.otf);		font-weight: bold;						}
@font-face{	font-family: SourceSans;	src:url(fonts/SourceSansPro-It.otf);							font-style:italic;	}
@font-face{	font-family: SourceSans;	src:url(fonts/SourceSansPro-BoldIt.TTF);	font-weight: bold;	font-style:italic;	}

body{
	background-color:rgb(146,198,234);	/* A light shade of blue. */
	font-family: LuzSans, istok, sans-serif;
	font-size:14pt;
	color:white;	/* Text color */
	margin:0px;
	padding:0px;
	position:absolute;
}

a {	color:blue;
} 	/* Text color of hyperlinks */

#logo {
	width:155px;
	height:75px;
	margin:5px;
	display:inline-block;
	position:absolute;
	left:2%;
}

input {color: black;}

/********************************************************************************************/	
/*  									The banner		 									*/
/*	(horizontal section with 'Welcome to Bruin Actuarial Society') and a cover photo, etc.  */
/********************************************************************************************/
#banner{
	position:relative;
	width:100%;
	margin-top:73px;
}

/* Banners can have either a semi-transparent blue layer over the left half or a full blue-to-yellow gradient */
#lefthalf { /* Semi-transparent blue layer */
	position:absolute;
	background-color: rgb(21,76,132); 
	opacity: 0.6;
	height: 100%;
	width: 40%;
}

#fullGradient{ /* Blue-to-yellow gradient over the entire cover photo */
	position:absolute;
	background: linear-gradient(to right, rgba(21,76,132,0.75), rgba(255,255,0,0.35));	
	width:100%;
	height:100%;
	z-index:1;
}

/* A div that contains the #hello greeting text */
#lefthalf2{
	position:absolute;
	height: 100%;
	width: 40%;
}

#indexHello{
	color:white;
	font-size:28pt;
	z-index:2;
	text-align:center;
	margin:0;
	position:absolute;
	top:50%;
	left:50%;
	margin-right: -50%;
	transform: translate(-50%,-50%);
}
@media (max-width:900px){#indexHello {font-size:24pt;}}
@media (max-width:768px){#indexHello {font-size:20pt;}}
@media (max-width:650px){#indexHello {font-size:16pt;}}
@media (max-width:540px){#indexHello {font-size:12pt;}}
@media (max-width:430px){#lefthalf,#lefthalf2 {width:100%;} #indexHello {font-size:16pt;}}
@media (max-width:380px){#indexHello {font-size:12pt;}}

#slogan{
	font-style:italic;
}
#hello{
	margin:0;
	position:absolute;
	top:50%;
	left:50%;
	margin-right: -50%;
	transform: translate(-50%,-50%);
	color:white;
	font-size:28pt;
	z-index:2;
	text-align:center;
}

@media (max-width:650px){#hello {font-size:24pt;}}
@media (max-width:530px){#hello {font-size:20pt;}}
@media (max-width:430px){#hello {font-size:24pt;}}
@media (max-width:390px){#hello {font-size:20pt;}}
@media (max-width:340px){#hello {font-size:16pt;}}
.coverPhoto {width:100%;}

.section{
	background-color:rgb(29,103,177);
	font-family:SourceSans, sans-serif;
	width:90%;
	padding:20px;
	margin-top:20px;
	position:relative;
	left:50%;
	transform: translate(-50%,0);
}

.sectionTitle{
	color:white;
	text-align:center;
	font-size:28pt;
	color:white;
}

.event{
	position:relative;
	height:270px;
	width:100%;
	margin-top:35px;
}

.panel-title {font: 16pt;}
.minimized {height:30px;}

.eventNAME{
	position:relative;
	background-color:rgb(124,168,255);
	width: calc(100% - 20px);
	height:40px;
	text-align:center;
	margin:0px;
	padding:10px;
}
h2{
	transform: translate(0,-50%);
	color:white;
}

.justify {
	text-align:justify;
}

.panel-body {height:290px;}

.eventIMG {
	position:relative;
	height: 240px;
}

.eventTEXT {
	background-color:rgb(146,198,234);
	color:black;
	position:relative;
	top:-240px;
	padding:10px;
	height:240px;
	width:50%;
	overflow-y:auto;
	left:25%;
	min-left:324px;
}
.eventINFO{
	background-color:rgb(100,140,255);
	position:relative;
	top:-480px;
	left:75%;
	height:240px;
	padding:10px;
	width:25%;
	overflow-y:auto;
	text-align:none;
}
@media(max-width:500px){
	.panel-body{height:470px;}
	.eventIMG{display:none;}
	.eventTEXT{
		width:100%;
		top:0;
		left:0;
	}
	.eventINFO{
		width:100%;
		height:200px;
		top:0;
		left:0;
	}
}

/********************************************************************************************/	
/*  									Welcome 		 									*/
/*	(section with 'Getting Started,' Towers Watson sponsor shoutout, and FB page plug-in) 	*/
/********************************************************************************************/
#welcome{
	padding:0;
	height:500px;
}

/* Cotnains 'Getting Started' and the Towers Watson sponsor shoutout */
#welcomeLeft{
	width:calc(100% - 500px);
	min-width:50%;
	height:100%;
	float:left;
}
#gettingStarted{
	padding:20px;
	height:75%;
	width:100%;
	overflow:hidden;
}

@media (max-width:1275px) {#gettingStarted{overflow-y:auto;}}
#gettingStarted > h1{margin:0px;}
#sponsorsLeft > h1{
	margin:0px;
	position:relative;
	top:50%;
	transform:translate(0,-50%);
}

#sponsors{
	background-color:#701f82;
	height:25%;
	width:100%;
}
#sponsorsLeft{
	float:left;
	width:calc(100% - 120px);
	height:100%;
	text-align:center;
	padding:20px;
}
#sponsorsLeft span {font-size:24pt;}
/* Decreases the font size of #sponsorsLeft as the width of the page narrows */
@media (max-width:745px) {#sponsorsLeft span {font-size:20pt;}}
@media (max-width:700px) {#sponsorsLeft span {font-size:16pt;}}
@media (max-width:550px) {#sponsorsLeft span {font-size:12pt;}}

#sponsorsRight{
	float:right;
	width:120px;
	height:100%;
}
#sponsorsRight > a > img{
	width:100%;
	height:100%;
}

/* The Facebook page plug-in */
.fb-page{
	width:50%;
	max-width:500px;
	height:100%;
	float:right;
}

/* Mobile-friendly version. Moves the Facebook page plug-in from the right side of the screen to underneath the sponsor shoutout*/
@media (max-width:500px){
	#welcome{height:1190px;background-color:rgb(146,198,234);}
	#welcomeLeft{float:none;height:650px;width:100%;}
	#gettingStarted{height:520px;margin-bottom:20px;background-color:rgb(29,103,177);}
	#sponsors{height:130px;}
	#sponsorsLeft{height:auto;}
	#sponsorsLeft span {font-size:16pt;}
	#sponsorsRight{height:auto;}
	.fb-page{float:clear;height:500px;width:100%;margin-top:20px;background-color:rgb(29,103,177);}
}

/********************************************************************************************/	
/*  									Last			 									*/
/*					(section with 'Contact Us,' and Social Media)							*/
/********************************************************************************************/
/*#last{
	padding:0px;
	height:250px;
}

#contactUs{
	height:100%;
	width:50%;
	padding:20px;
	float:left;
}

@media (max-width:1005px) {#contactUs{overflow-y:auto;}}
caption {color:white;}

#socialMedia{
	height:100%;
	width: 50%;
	padding:10px;
	float:right;
	text-align:center;
}

#easterEgg{
	height:100px;
	width:84px;
	position:absolute;
	bottom:5px;
	right:5px;
}

@media (max-width:590px){
	#last{height:520px;background-color:rgb(146,198,234);}
	#contactUs{float:none;width:100%;height:300px;overflow:auto;background-color:rgb(29,103,177);}
	#socialMedia{float:none;width:100%;height:200px;margin-top:20px;background-color:rgb(29,103,177);}
}

footer {
	float:right;
	color:rgb(29,103,177); 
}*/

#last{
  display: flex;
  align-items: flex-start;
  /*background-color: rgb(29, 103, 177);*/
	padding: 0px;
	height: auto;
	margin-bottom: 20px;
}

#contactUs{
	height:100%;
	width:50%;
	padding:20px;
	float:left;
}

@media (max-width:1005px) {#contactUs{overflow-y:auto;}}
caption {color:white;}

#socialMedia{
	height:100%;
	width: 50%;
	padding:10px;
	float:right;
	text-align:center;
}

#easterEgg{
	height:100px;
	width:84px;
	position:absolute;
	bottom:5px;
	right:5px;
}

@media (max-width:590px){
	#last{height:auto;background-color:rgb(146,198,234);}
	#contactUs{float:none;width:100%;height:300px;overflow:auto;background-color:rgb(29,103,177);}
	#socialMedia{float:none;width:100%;height:200px;margin-top:20px;background-color:rgb(29,103,177);}
}

footer {
	float:right;
	color:rgb(29,103,177); 
	margin-bottom:10px;
}

/********************************************************************/
/* 				The following CSS pertains only to 					*/
/* 						whereWeWork.html	 						*/
/********************************************************************/
.smalllogo{
	margin-top: 15px;
	margin-bottom: 15px;
	margin-left: 7px;
	margin-right: 7px;
	max-width: 150px;
	height: auto;
}



/********************************************************************/
/* 				The following CSS pertains only to 					*/
/* 						meetTheOfficers.html 						*/
/********************************************************************/

.tabInteractive{
	position:absolute;
	background-color:rgb(29,103,177); 
	width:calc(100% - 40px);
	height: 370px;
}

.tab{
	background-color:rgb(146,198,234);
	height:80px;
	width: calc(16.666% - 5.8333px);
	position:relative;
	float:left;
	margin-left:5px;
	text-align:center;
	color:black;
}
.tab p {transform: translate(0,10px);}
.tabName {font-size:16pt;}
.tabTitle {font-size:14pt;}
@media(max-width:1040px) {.tabName{font-size:14pt;}.tabTitle{font-size:12pt;}}
@media(max-width:920px) {.tabName{font-size:12pt;}.tabTitle{font-size:10pt;}}
@media(max-width:810px) {.tabName{font-size:10pt;}.tabTitle{font-size:8pt;}}

/* The leftmost major (financial actuarial math) 
and minor (specialication in computing) should be 
selected by default when the page is loaded */

#tab1, #tab7, #tab13, #tab19, #tab25, #tab31, #tab37, #tab43, #tab49, #tab55, #tab61, #tab67 {background-color: rgb(250,197,12);}

.officerINFO{
	position:absolute;
	height:280px;
	width: 100%;
	top:90px;
	color:black;
}

.officerTABLE{
	position:absolute;
	background-color:rgb(146,198,234);
	border:white;
	height:280px;
	width: calc(100% - 200px);
	margin:0px;
	padding:10px;
	color:black;
	overflow:auto;
}
.archiveTABLE {width:100%;}

td, th {
	padding:1px;
}

.officerLinkedIn{
	position:absolute;
	right:5px;
	top:5px;
}
.officerPHOTO{
	position:absolute;
	left:calc(100% - 215px);
	width:215px;
	height:280px;
}

#currentOfficers {height:500px;}

@media (max-width:540px){
	#currentOfficers{
		height:610px;
		padding-top:2px;
	}
	.tabName {font-size:14pt;}
	.tabTitle {font-size:12pt;}
	#currentOfficers > h1{font-size:20pt;}
	.tab{
		display:inline-block;
		margin-left:2px;
		margin-top:2px;
		float:left;
		width:48%;
		height:50px;
	}
	.tab p {transform:translate(0,0);}
	.officerINFO {top:160px;}
	.officerTABLE {width:100%;height:160px;}
	.archiveTABLE {height:340px;}
	.officerPHOTO {
		position:relative;
		left:50%;
		transform: translate(-50%,0);
		top:0;
		height:210px;
		width:157px;
		margin-bottom:5px;
	}
}

/********************************************************************/
/* 				The following CSS pertains only to 					*/
/* 						join.html 						*/
/********************************************************************/
.flyer {width:100%;}

/********************************************************************/
/* 				The following CSS pertains only to 					*/
/* 						majorsAndMinors.html 						*/
/********************************************************************/


.majorMinorPhoto{
	position:absolute;
	left:calc(100% - 415px);
	width:415px;
	height:295px;
}

.majorMinorTable{
	position:absolute;
	background-color:rgb(146,198,234);
	border:white;
	height:150px;
	width:calc(100% - 415px);
	margin:0px;
	padding:10px;
	overflow:auto;
}
.majorMinorIntro{
	position:absolute;
	height:175px;
	margin:0px;
	padding:10px;
	top:120px;
	width:calc(100% - 415px);
	background-color:white;
	overflow:auto;
}

@media (max-width:540px){
	.majorMinorPhoto{display:none;}
	.majorMinorTable{width:100%;}
	.majorMinorIntro{width:100%;height:250px;}
}

/********************************************************************/
/* 				The following CSS pertains only to 					*/
/* 						eventsCalendar.html 						*/
/********************************************************************/

#events-calendar {
	width: 70%;
	margin:auto;
}

iframe {
	border: none;
	width: 100%;
	height: 500px;
	overflow: hidden;
}

@media screen and (max-width: 800px) {
	#events-calendar { width: 100%; }
	iframe { height: 300px; }
}

/********************************************************************/
/* 							CSS pertaining to 						*/
/* 						divs of the class 'clickable'				*/
/********************************************************************/

.clickable{
	background-color: #154c84;
    border: none;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    position:relative;
    left:50%;
    transform:translate(-50%,0);
}

/********************************************************************/
/* 				The following CSS pertains only to 					*/
/* 						actuarialCourses.html 						*/
/********************************************************************/

#courseUpdates, #courseUpdates th, #courseUpdates td{
	border:1px solid white;
}
#courseUpdates{
	overflow-x:auto;
	display:block;
}
#courseUpdates th, #courseUpdates td{
	padding:10px;
}
#courseUpdates th{
	text-align:center;
}

/********************************************************************/
/* 				The following CSS pertains only to 					*/
/* 						examPrep.html 						        */
/********************************************************************/
#examHeader {
	border: 1px solid white;
	padding: 5px;
}
#examData {
	padding: 5px;
	border: 1px solid white;
}
.review-panel-body {
	height: 450px;
}
.manualIMG {
	position:relative;
	height: 220px;
}
.manualINFO{
	color: black;
	position: relative;
	top: 8px;
	padding: 10px;
	width: 20%;
	overflow-y: auto;
	text-align: none;
}
#ratingHEADER {
	border: 1px solid black;
	padding: 5px;
}
#ratingDATA {
	padding: 5px;
	border: 1px solid black;
}
.manualTEXT {
	background-color: rgb(146,198,234);
	color: black;
	position: relative;
	top: -424px;
	padding: 10px;
	height: 425px;
	width: 80%;
	overflow-y: auto;
	left: 20%;
	min-left: 324px;
}
#review-header{
	margin-bottom: 0px;
}
#review-paragraph{
	margin-top: 0px;
}
.resource-panel-body {
	height: 225px;
}
.resourceTEXT {
	background-color: rgb(146,198,234);
	color: black;
	position: relative;
	/*top: -424px;*/
	padding: 10px;
	height: 200px;
	/*width: 80%;*/
	overflow-y: auto;
	/*left: 20%;
	min-left: 324px;*/
}
@media(max-width:500px){
	.review-panel-body{height:470px;}
	.manualIMG{display:none;}
	.manualINFO{
		width:100%;
		height:210px;
		top:0;
		left:0;
	}
	.manualTEXT{
		width:100%;
		height:250px;
		top:0;
		left:0;
		overflow-y: auto;
	}
	.resource-panel-body{height:260px;}
	.resourceTEXT{
		width:100%;
		height:250px;
		top:0;
		left:0;
		overflow-y: auto;
	}
}

/********************************************************************/
/* 				The following CSS pertains only to 					*/
/* 							register.php 							*/
/********************************************************************/
/* Mark input boxes that gets an error on validation: */
input.invalid {
	background-color: #ff9999;
}

span.errormsg {
	color: #ff6666;
}


/* Hide all steps by default: */
.formtab {
	display: none;
}

/* Make circles that indicate the steps of the form: */
.step {
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbbbbb;
	border: none; 
	border-radius: 50%;
	display: inline-block;
	opacity: 0.5;
}

/* Mark the active step: */
.step.active {
	opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
	background-color: #4CAF50;
}

button[type="button"] {
	background-color: white;	
	color: black;
}

input[type="radio"] + label, input[type="checkbox"] + label{
	font-weight:normal;
}