/* CSS Document */

@charset "UTF-8";

@font-face{
	font-family: Myriad_C;
	src: url(MyriadPro-Cond.woff);
}
@font-face{
	font-family: Myriad;
	src: url(MyriadPro-Regular.woff);
}
@font-face{
	font-family: Myriad_B;
	src: url(MyriadPro-Bold.woff);
}
@font-face{
	font-family: Myriad_BC;
	src: url(MyriadPro-BoldCond.woff);
}
@font-face{
	font-family: ArialNarrow;
	src: url(ArialNarrow.woff);
}
@font-face{
	font-family: SignatureFont1;
	src: url("Darkwoman.woff");
}
@font-face{
	font-family: SignatureFont2;
	src: url("Jennifer_Lynne.woff");
}
@font-face{
	font-family: SignatureFont3;
	src: url("mathilde.woff");
}

* {
	margin: 0;
  box-sizing: border-box;  /* ensures border and padding are included in total width */
}

html, body {
  height: 100%;
  font-family: "Myriad";
}

h1 {
  font-family: Myriad_B;
  font-weight: 100;
  font-size: 28px;
  color: #036;
  margin: 0 0 20px 0;
}

h2 {
  font-family: Myriad_B;
  font-weight: 100;
  font-size: 24px;
  color: #036;
  margin: 0 0 16px 0;
}

h3 {
  font-family: Myriad_B;
  font-weight: 100;
  font-size: 18px;
  color: #036;
  margin: 0 0 12px 0;
}

h4 {
  font-family: Myriad_B;
  font-weight: 100;
  font-size: 15px;
  color: #036;
  margin: 0 0 11px 0;
}

p {
	font-family: "Myriad";
	font-size: 14px;
	margin: 0 0 12px 0;
}

ul {
	font-family: "Myriad";
	font-size: 14px;
}

a:link {
	color: #036;
	text-decoration: initial;
}
a:visited {
  color: #036;
  text-decoration: initial;

}
a:hover, a:active {
	color: #369;
}


select{
  border: #2166b0;
  color: #2166b0;
}

input [type='text']{
  border: solid 1px #2166b0;
  color: #2166b0;
  margin: 1px;
}


.col-1 { width: 8.33%; float: left; position: relative; }
.col-2 { width: 16.66%; float: left; position: relative; }
.col-3 { width: 25%; float: left; position: relative;}
.col-4 { width: 33.33%; float: left; position: relative;}
.col-5 { width: 41.66%; float: left; position: relative; }
.col-6 { width: 50%; float: left; position: relative; }
.col-7 { width: 58.33%; float: left; position: relative; }
.col-8 { width: 66.66%; float: left; position: relative; }
.col-9 { width: 75%; float: left; position: relative; }
.col-10 { width: 83.33%; float: left; position: relative; }
.col-11 { width: 91.66%; float: left; position: relative; }
.col-12 { width: 100%; float: left; position: relative; }
.col-auto { width:auto; position: relative; float: left; }


.col92 { width: 92%; position: relative; float: left; }
.col80 { width: 80%; position: relative; float: left; }
.col75 { width: 75%; position: relative; float: left; }
.col50 { width: 50%; float: left; position: relative; }
.col20 { width: 20%; position: relative; float: left; }
.col33 { width: 33%; position: relative; float: left; }
.col25 { width: 25%; position: relative; float: left; }
.col15 { width: 15%; position: relative; float: left; }
.col08 { width: 8%; position: relative; float: left; }
.colAuto { width: auto; position: relative; }

.ft_rt { float: right; }
.ft_lt { float: left; }

.right { text-align: right; }
.left { text-align: left; }
.centre { text-align: center; }
.top { vertical-align: top; }
.top_line{
    border-top: solid 1px #C3D7DE;
    padding-top: 4px;
}
.bot_line{
	border-bottom: solid 1px #000;
	margin-bottom 2px;
	padding-bottom 1px;
}
.rt_line{
	border-right: solid 1px #000;
	padding-right 1px;
}
.pad_l_4 { padding-left: 4px; }
.pad_l_12 { padding-left: 12px; }
.pad_l_20 { padding-left: 20px; }
.pad_l_25 { padding-left: 25px; }
.pad_r_4 { padding-right: 4px; }
.pad_r_12 { padding-right: 12px; }
.pad_r_20 { padding-right: 20px; }
.pad_t_4 { padding-top: 4px; }
.pad_t_12 { padding-top: 12px; }
.pad_t_20 { padding-top: 20px; }
.pad_b_4 {padding-bottom:  4px; }
.pad_b_12 { padding-bottom: 12px; }
.pad_b_20 { padding-bottom: 20px; }

.mar_l_4 {margin-left: 4px;}
.mar_l_12 {margin-left: 12px;}
.mar_l_20 {margin-left: 20px;}
.mar_r_4 { margin-right: 4px; }
.mar_r_12 { margin-right: 12px; }
.mar_r_20 { margin-right: 20px; }
.mar_t_4 { margin-top: 4px; }
.mar_t_12 { margin-top: 12px; }
.mar_t_20 { margin-top: 20px; }
.mar_b_4 { margin-bottom: 4px; }
.mar_b_12 { margin-bottom: 12px; }
.mar_b_20 { margin-bottom: 20px; }

.w15pc { width: 15% }
.w25pc { width: 25% }
.w30pc { width: 30%; }
.w50pc { width: 50%; }
.w90pc { width: 90%; }
.w100pc { width: 100% }
.w50px { width: 50px }
.w100px { width: 100px; }
.w150px { width: 150px; }
.w200px { width: 200px; }
.w250px { width: 250px; }

.wAuto {
	width: auto;
}

.comment {
	font-size: small;
	font-style: italic;
	font-weight: 100;
  font-family: ArialNarrow;
}
.label {
	font-weight: bold;
	color: #036;
}

.consent_form{
  position: relative;
  margin: 0 auto; 
  width: 800px; 
  padding: 20px; 
  border: solid 2px #999; 
  box-shadow: 2px 2px 4px #000;
  overflow: auto; }


.r_text { color: #a00; }
.w_text { color: #fff; }
.gray_text { color: #888; }

/* ================= ADMIN MASTHEAD ==================== */

.masthead {
  position: fixed;
  padding: 15px;
  background-color: #84a2c2;
  background-image: linear-gradient(180deg, rgb(228, 237, 246), rgb(199, 219, 240));
  border-bottom: solid 4px #2166b0;
  box-shadow: 0 4px 4px #aaa;
  z-index: 1;
}
.main_admin_container {
  position:  relative;
  padding: 90px 20px 20px 20px;
  width: 100%;
}



/* ================= PUBLIC HEADER ================ */

.masthead_container {
  width: 100%;
  float: left;
  padding: 0;
}



.top_menu {
	position: fixed;
	width:  100%;
	height: 54px;
	top: 0;
  background-color: #fff;
  border-top: solid 8px #369;
  border-bottom: solid 1px #369;
  z-index: 12;
}

.logo {
	position: relative;
	float: left;
	margin: 6px;
	width: 116px;
}

.menu_icon{ /* hamburger menu container */
  float: left;
  margin: 4px 10%;
}
.menu_icon div {  /* hamburger menu */
    width: 35px;
    height: 4px;
    background-color:#036;
    margin: 6px;
}

.login_door {
	margin: 0 6px 0 0;
	width: 30px;
	height: 36px;
	background-image: url('/views/images/door-cl.png');
	background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0);
	background-size: 30px 36px;
	border:  none;
	cursor: pointer;
}
	.login_door:hover{
		background-image: url('/views/images/door-op.png');

	}

.logout_door{
	margin: 0 6px 0 0;
	width: 30px;
	height: 36px;
	background-image: url('/views/images/door-op.png');
	background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0);
	background-size: 36px 36px;
	border:  none;
	cursor: pointer;
}
	.logout_door:hover{
		background-image: url('/views/images/door-cl.png');
	}

.login_panel {
	position: absolute;
	right: 20px;
	top: 50px;
	width: 300px;
	border:  solid 1px #eee;
	padding: 10px;
	font-family: Myriad;
	color: #888;
	background-color: rgba(255, 255, 255, 1.0);
	box-shadow: 3px 3px 3px #000;
	z-index: 12;
}
.logout_panel {
	position: absolute;
	right: 40px;
	top: 50px;
	width: 200px;
	border:  solid 1px #eee;
	padding: 10px;
	font-family: Myriad;
	color: #888;
	background-color: rgba(255, 255, 255, 1.0);
	box-shadow: 3px 3px 3px #000;
	z-index: 12;
	text-align: center;
}
.reset_panel{
	position: absolute;
	top: 150px;
	right: 200px;
	width: 500px;
	border:  solid 1px #eee;
	padding: 10px;
	font-family: Myriad;
	color: #888;
	background-color: rgba(255, 255, 255, 1.0);
	box-shadow: 0 25px 100px #000;
	z-index: 20;
}
.instagram{
  float: right;
  padding: 3px 5px 0 0;
}

.edit_mode{
	position: fixed;
	z-index: 14;
	top: 60px;
	background-color: rgba(255, 255, 255, 0.8);
	font-family: Myriad_C;
	left: 10px;
	padding-left: 2px;
}

/* ================================= MAIN MENU ================= */

.navbar {
  overflow: visible;
  width: 73%;
  margin: 0 auto;
  position: relative;
  box-shadow: none;
}

#navbar {
  display: block;
}


 .navbtn1 {  /* subnav */
    float: left;
    position: relative;
    width: 12%;
    margin: 0;
    padding-top: 12px;
    background-color: #fff;
    z-index: 50;
  }

  	.close_menu{
  		display: none;
  	}

  .btn_navbtn1{
    border: none;
    border-right: solid 1px #369;
    background-color: #fff;
    color: #036;
    font-family: Myriad_C;
    font-size: 16px;
    text-decoration: none;
    padding: 0;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
  }
  .btn_navbtn1:hover{
      font-family: Myriad_BC;
      background-color: #edf6fd;
  }

  .navbtn1-content {
  	width: auto;
  	background-color: #fff;
  	display: none;
  	position: absolute;
  	left: 0;
  	z-index: 12;
  	border: solid 1px #036;
  	padding: 4px;
  	box-shadow: 3px 4px 6px #000;
  }

  .navbtn1:hover .navbtn1-content {
  	display: block;
  }

  .border_left{
    border-left: solid 1px #036;
  }

    	.subMenu1 {
    		border: none;
    		color: #000;
    		-webkit-appearance: none;
		    -moz-appearance: none;
		    appearance: none;
		    font-family: Myriad_C;
		    font-size: 16px;
		    width:  100%;
		    background-color: #fff;
		    border-bottom: solid 1px #eee;
		    text-align: left;
		    padding-left: 5px;
		    cursor: pointer;
    	}
    	.subMenu1:hover, .subMenu2:hover{
    		background-color: #eef;
    	}
    	.navbar h3{
        font-size: 13px;
    		margin: 10px 0 0px 4px;
    		width: 96%;
    	}

    	.subMenu2 {
    		border: none;
    		color: #000;
    		-webkit-appearance: none;
		    -moz-appearance: none;
		    appearance: none;
		    font-family: Myriad_C;
		    font-size: 16px;
		    width:  100%;
		    background-color: #fff;
		    border-top: solid 1px #eee;
		    text-align: left;
		    padding-left: 10px;
		    cursor: pointer
    	}

/* =================== FOOTER */
  .footer {
    position: fixed;
    bottom: 0;
    height: 30px;
    width:  100%;
    background-color: #369;
    color: #fff;
    font-family: Myriad;
    z-index: 12;
    text-align: center;
    padding-top: 4px;
  }

  .centre_block {
    position: relative;
    float: left;
    width:50%;
    min-width:500px; 
    margin: 20px 25%; 
    border: solid 2px #036; 
    padding: 20px
  }

/* ================== INPUT FORM STYLES ======================== */

  .input_form{
    width: auto;
  }
    .float_form{
      position: fixed;
      box-shadow: 3px 3px 6px #000;
      z-index: 1;
    }

    .block_form{
      position: relative;

    }

    .input_form table {
      border: solid 1px #888;
      background-color: #fff;
      font-size: 14px;
      border-collapse: collapse;
      padding: 0;
      margin: 0 auto;
    }

    .form_full_width {
      padding: 6px 15px 6px 15px;
      border-bottom: solid 1px #ddd;
    }

    .form_label {
      background-color:  #eee;
      padding: 6px 6px 6px 15px;
      font-family: Myriad_B;
      font-weight: 100;
    }
    .form_input {
      padding: 6px;
    }

    .form_separator {
      border-bottom: solid 1px #ddd;
    }

    .input_form input[type='text'], input[type=password], select, textarea{
      border: solid 1px #2166b0;
      background-color: #eff2f5;
      color: #2166b0;
      font-family: Myriad;
      font-size: 13px;
      padding: 2px;
      border-radius: 2px;
    }

    .doc_bx{
      border: solid 1px #eee;
      padding: 4px;
    }

    .hilite {
      background-color: none;
    }
      .hilite:hover {
        background-color: #eff2f5;
      }

/* ======================= BANNER CSS ========================== */
  .banner_container{
    width: 100%;
    max-height: 150px;
    float: left;
    position: relative;
    overflow: hidden;
    margin: 0;
    padding-top: 45px;
  }
    .banner_container img{
      width: 100%;
    }
    .banner_caption{
      font-size: 11px;
      color: #ccc; 
      text-shadow: 2px 2px 2px #000; 
      width: 100%; 
      text-align: right;
      position: absolute; 
      bottom: 8px; 
      right: 8px;
    }

.main_container {
	position:  relative;
  float: left;
	padding: 20px 20px 40px 20px;
	width: 100%;
}


/* ===================== HOW TO APPLY ===========================  */

  .btn-hta{
    background-color: #285786;
    color: #fff;
    font-family: Myriad_B;
    font-size: 28px;
    font-weight: 100;
    text-align:center;
    float: right;
    padding: 10px 0 8px  0;
    margin: 0 8px 8px 8px;
    border-radius:5px;
    border: solid 2px #285786;
    cursor: pointer;
    width: 100%;
  }

  .home-left-side {
    position: relative;
    float: left;
    margin-left: 0;
    width: 50%;

  }
    .home_intro {
      padding-right: 15px;
    }

    .btn-hta:hover {
      color: #285786;
      background-color: #fff;

    }

    .apply_step{
      margin: 0 0 12px 0;
      border-top: solid 2px #036;
    }
    .circledNumber{
      background-color: #036;
      color: #fff;
      font-family: Myriad_B;
      font-size: 24px;
      width: 26px;
      height: 26px;
      border-radius: 12px;
      float: left;
      padding: 0 0 0 6px;
      margin: 0 4px 0 0;
    }
    .step_content {
      float: left;
      width: 95%;
    }
    .stepTitle{
      font-family: Myriad_B;
      color: #036;
      font-size: 24px;
    }
    .apply_date{
      font-family: Myriad_B;
      font-style: italic;
      color: #900;
      font-size: 18px;
    }

 /* ================= HOME PAGE NOTICES ======================================= */

 	.side_bar {
 		background-color: #e6eeff;
 		color: #000;
 		margin-right: -20px;
    margin-bottom: 20px;
 	}

 	.side_bar a {
 		color: #036;
 	}
 	.side_bar a:hover {
 		color: #369;
 	}

 	.side_bar_item{
 		position: relative;
 		float: left;
 		width: 100%;
 		padding: 20px;
 		border-top: solid 2px #036;
 	}

 	.side_bar h2{
 		background-color: #036;
 		color: #fff;
 		padding-left: 20px;
 		margin: 0;
 	}

 	.photo_container {
 		position: relative;
 		float: right;
 		width: 30%;
    padding-left: 6px;
 	}

 	.side_bar_subhead {
 		position: relative;
 		float: left;
 		width: 100%;
 		background-color: #285786;
 		border-bottom: solid 1px #036;
 	}

 	.side_bar h3 {
 		color: #fff;
 		padding-left: 20px;
 		margin: 0;
 	}

 	.side_bar h4 {
 		padding-left: 0;
 		margin: 0;
 	}

/* ============== EMAIL TOOL ========================= */
  .emailToolTable {
    background-color: #fff;
    position: relative;
    float: left;
    width: 96%;
    border-top:  solid 1px #2166b0;
    margin-bottom: 4px;
    border-collapse: collapse;
    padding: 0;

  }
  .emailToolTable td {
    border-bottom:  solid 1px #2166b0;
    padding: 6px 12px;
    background-color: #fff;
    border-collapse: collapse;
  }

  #pick_list{
    position: absolute;
    border: solid 4px #369;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
    background-color: #fff;
    z-index: 100;
    margin: 0 15%;
    top: 0px;
    overflow-x: auto;
    overflow-y: scroll;
    min-height: 300px;
    resize: vertical;
  }

  .pick_list_item{
    position: relative;
    float: left;
    font-size: 13px;
    width: 33%;
      padding: 3px 0;
  }


  /* ============= POPUP DIV ================= */
    .popup {
      position: absolute;
      min-width: 300px;
      min-height: 200px;
      background-color: #fff;
      border:  solid 2px #285786;
      padding: 15px;
      font-size: 14px;
      box-shadow: 2px 2px 4px;
      z-index: 1;
    }


/*==================== MOBILE PHONES ======================================== */
@media only screen and (max-width: 850px) {
	
	[class*="col-"] {
    	width: 100%;
    }

  #navbar { 
    display: none; 
  }

  .navbar {
    position: absolute;
    top: 6px;
    left: 140px;
    width: 120px;
    box-shadow: 2px 2px 2px #333;
    border: solid 1px #036;
  }
	.close_menu{
		display:  inline;
    width: 120px;
    border-right: none;
    border-bottom: solid 1px #036;
    margin: 0;
    padding: 0;
    background-color: #fff;
  }
  	.close_menu input[type=button]{
  		width: 100%;
  		text-align: right;
  	}
  .navbtn1{
    width: 120px;
    border-right: none;
    border-bottom: solid 1px #036;
    margin: 0;
    padding: 0 0 0 4px;
  }
  	
  .btn_navbtn1{
    text-align: left;
  }

  .navbtn1-content {
  	left: 120px;
  	top: -1px;
  	overflow: visible;
  }

  .photo_container {
  	width:  100%;
  }

  .pick_list_item{
    position: relative;
    float: left;
    width: 50%;
    padding: 3px 0;
  }
  .home-left-side {
    width: 100%;
  }
  .home_intro {
    padding-right: 0;
  }
  .btn-hta{
    margin: 0 0 8px 8px;
  }
}
/* ================ END MEDIA QUERY UP TO 851 PX ================= */


@media only screen and (min-width: 851px) {

	#navbar {
    display: block !important;
  }

  #menu_icon { display: none; }

  .logo { margin-right: 1%; }

  .pick_list_item{
    position: relative;
    float:  left;
    width: 33%;
    padding: 3px 0;
  }

} /* ================ END MEDIA QUERY MIN 851 PX =============== */

.add_box { 
  position: fixed;
  width: 80%;
  margin: 100px 10%;
  border: solid 3px #036;
  box-shadow: 3px 3px 6px;
  border-radius: 7px;
  background-color: #fff;
  padding: 15px;
  display: none;
 }

.view_format_but {
	width: 24px;
	float: right;
	margin-left: 4px;
}

.caption {
	font-family: Myriad;
	font-size: 12px;
	font-style: italic;
	margin: 0px;
}

.info_icon{
	float: left;
	width: 18px;
	height: 18px;
	border-radius: 9px;
	background-color: #de4c17;
	color: #fff;
	font-family: Myriad_B;
	font-size: 14px;
	text-align: left;
	padding: 2px 0 0 6px;
	margin: -4px 5px 0 0;
}


.search_box{
	float: left;
	width: 100%;
	padding: 5px;
  background-image: linear-gradient(180deg, rgb(250,250,250), rgb(230,230,230));
  border: solid 2px #2166b0;
  box-shadow: 2px 2px 2px #999;
  font-size: 14px;
  font-family: Myriad;
}
  input[type=text]{
    border: solid 1px #2166b0;
    background-color: #eff2f5;
    color: #2166b0;
    border-radius: 2px;
    height: 22px;
  }

.display_results { /* table formatting */
	width: 100%;
	margin: 20px 0 10px 0;
	font-size: 14px;
	padding: 1px;
	margin: 0;
	border-collapse: collapse;
}
	.display_results th{
		background-color: #5d7792;
		color: #fff;
		text-align: left;
	}

    .display_results .top{
      vertical-align: top;
    }
		.display_results .centre{
			text-align: center;
		}

	.display_results td{
		border-bottom: solid 1px #666;
	}
	.emphasize_row{
		font-weight: bold;
		background-color: #e6f2ff;
	}

  .recent_grad_photo{
    max-width: 200px;
  }

/* ============ PLEDGE DRIVE =================================*/

  .pledge_drive_link {
    position: fixed; 
    top: 225px; 
    right: 25px;
    background-color: #deede3; 
    width: 20%; 
    text-align: center;
    border-radius: 4px;
    box-shadow: 2px 2px 2px;
    padding: 4px;
    font-family: Myriad_BC;
    font-size: 24px;
    z-index: 1;
  }
  .pledge_form_box {
    position: relative;
    float: left;
    width: 80%;
    text-align: center;
    margin: 0 5%;
    border: solid 2px #e6eeff;
    background: #fff;
    box-shadow: 2px 2px 3px #666;
    padding: 10px;
    font-size: 14px;
  }

  .recent_pledges {
    margin-top: 20px;
    font-size: 11px;
    color: #999;
    border-top: solid 1px #999;
    border-bottom: solid 1px #999;
    padding: 10px 0;
  }

  .thermo_box {
    position: fixed; 
    width: 60px; 
    height: 400px; 
    right: 23%; 
    z-index: 0;
  }

  .thermo_glass {
    position: fixed; 
    height: 400px; 
    width: 20px; 
    border: solid 1px; 
    border-radius: 15px; 
    background: none;
    background-color: #eee;
  }

  .thermo_ticks {
    position: fixed; 
    margin-left: 20px; 
    width: 20px; 
    height: 385px;
  }

  .thermo_tick {
    width: 20px; 
    height: 38px; 
    border-top: solid 1px; 
    position: relative; 
    float: left;
  }

  .thermo_red {
    position: fixed; 
    width: 18px; 
    background-color: #c00; 
    z-index: 2; 
  }

  .thermo_text {
    font-size: 12px; 
    margin-left: 30px; 
    margin-top: -8px
  }

  .thermo_bulb {
    position: fixed; 
    width: 60px; 
    height: 60px; 
    border-radius: 30px; 
    background-color: #c00; 
    margin-top: 380px; 
    z-index: 1; 
    margin-left: -21px;
  }
/* =========== AUCTION ======================================= */

	.wine_menu {
		float: right;
	  margin: 4px 0;
	  cursor: pointer;
    background-color: none;
    box-shadow: none;
    transition: box-shadow 1s;
	}
	.wine_menu div{
		width: 25px;
    height: 3px;
    background-color:#036;
    margin: 4px;
		display: block;
	}
    .wine_menu:hover{
      box-shadow: 0 0 6px orange;
    }

  .wine_menu_box{
    position: absolute;
    float: right;
    text-align: right;
    right: 0;
    top: 0;
    width: 0;
    height: 200px;
    padding: ;
    border: none;
    box-shadow: 3px 3px 6px #000;
    overflow: hidden;
    background-color: #efefef;
    z-index: 2;
    transition: width 2s;
  }
    .wine_menu_box input[type=submit]{
      width: 100%;
      font-size: 16px;
      border: none;
      border-top: solid 1px #285786;
      color: #285786;
      cursor: pointer;
      background-color: #efefef;
    }
    .wine_menu_box input[type=submit]:hover {
      background-color: #fff;
    }
  .basket_item p{
    font-size: 12px;
    color: #666;
  }

  .enterAuctionDiv {
    position: relative;
    float: left;
    width: 45%;
    text-align: center;
    margin: 0 28%;
    border: solid 2px #e6eeff;
    background: #fff;
    box-shadow: 2px 2px 3px #666;
    padding: 10px;
    font-size: 24px;
  }

    .enterAuctionDiv h3{
      color: #b30047;
    }
    .btn-enterAuction {
      background-color: #660029;
      color: #fff;
      border: solid 2px #660029;
      font-size: 18px;
      cursor: pointer;
      border-radius: 5px;
      padding: 10px;
      border-radius: 10px;
    }
    .btn-enterAuction:hover {
      background-color: #fff;
      color: #660029;
    }

    .btn-live-preview {
      background-color: #369;
      color: #fff;
      border: solid 2px #369;
      font-size: 18px;
      cursor: pointer;
      border-radius: 5px;
      padding: 10px;
      border-radius: 10px;
    }
      .btn-live-preview:hover{
        color: #369;
        background-color: #fff;

      }

    .countdown {
      position: relative;
      text-align: left;
      font-size: 24px;
      padding: 0;
      width: 45%;
      margin: 0;
    }
    .refresh_timer{
      position: relative;
      float: right;
      width: 45%;
      text-align: right;
      padding: 0;
      margin: -25px 0 0 0;
    }
  .sticky {
    position: -webkit-sticky;
    position: sticky;
    float: left;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 100;
    padding: 0 0 4px 0;
    margin: 0 0 4px 0;
    border-bottom: solid 2px #eee;
  }

  .search_auction {
    position: relative;
    float: left;
    padding: 10px;
    border: solid 2px #e6eeff;
    text-align: center;
    width: 100%;
    border-radius: 6px;
  }
    .search_auction input[type=text]{
      background-image: url('/views/images/searchicon.png');
      background-repeat: no-repeat;
      background-size: 20px 24px;
      background-position: 3px 3px;
      height: 30px;
      width: 400px;
      padding: 0 0 0 30px;
      font-size: 24px;
      color: #888;
      border-radius: 6px;
    }
    .search_auction .search{
      border: none;
      height: 30px;
      font-size: 20px;
      border-radius: 6px;
      cursor: pointer;
      color: #369;
      background-color: #ddd;
        -webkit-appearance: none;
    }
    .search_auction .search:hover{
      color: #ddd;
      background-color: #369;
    }
    .search_auction .clear {
      border: none;
      height: 30px;
      font-size: 20px;
      border-radius: 6px;
      cursor: pointer;
      color: #900;
      background-color: #ddd;
        -webkit-appearance: none;
    }
      .search_auction .clear:hover{
        background-color: #900;
        color: #ddd;
      }

    .auction_tabs{
      position: relative;
      float: left;
      background-color: #fff;
      border-bottom: solid 2px #036;
      width: 100%;
      padding: 0;
      -webkit-appearance: none;
      -webkit-border-radius: none;
      border-radius: 0;
    }
      .auction_tabs .tab {
        position: relative;
        float: left;
        margin: 12px 0 0 0;
        padding: 0;
      }
      .auction_tabs .tab_btn{
        margin: 0 10px;
        border: none;
        color: #036;
        background-color: #e6eeff;
        border-top: solid 1px #036;
        font-size: 14px;
        padding: 6px;
        cursor: pointer;
        -webkit-appearance: none;
      }
      .auction_tabs .tab_btn:hover{
        background-color: #036;
        color: #e6eeff;
      }
      .auction_tabs .tab_btn_sel{
        margin: 0 10px;
        border: none;
        background-color: #036;
        color: #e6eeff;
        font-size: 14px;
        padding: 6px;
        border-top: solid 1px #036;
        box-shadow: 1px -1px 3px #888;
        -webkit-appearance: none;
      }


    .tab_container {
      position: relative;
      float: left;
      width: 100%;
      text-align: center;
      margin: 0 0 40px 0;
      padding: 10px;
      border: solid 1px #036;
    }

    .lot_container {
      position: relative;
      float: left;
      width: 48%;
      padding: 10px;
      border: solid 2px #e6eeff;
      border-radius: 6px;
      margin: 0 auto;
    }

    .img_box{
      width: 100%;
      height: 250px;
      padding: 4px 0;
      overflow: hidden;
    }
      .img_box img {
        margin: auto;
      }
      .fav_btn {
        position: absolute;
        top: 5px;
        right: 5px;
        background-image: url('/views/images/watch_icon.png');
        background-repeat: no-repeat;
        background-size: 37px 18px;
        width: 41px;
        height: 22px;
        border: solid 2px #888;
        opacity: 1;
        border-radius: 4px;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        padding-left: 12px;
        -webkit-appearance: none;
        cursor: pointer;
        box-shadow: 1px 1px 2px #000;
      }
        .fav_btn:hover{
          opacity: 0.7;
        }

        .add_fav {
          background-color: #090;

        }
        .del_fav{
          background-color: #900;
        }

      .prices {
        padding: 10px 5%;
        text-align: center;
      }
        .prices li {
          list-style-type: none;
          margin: 10px 0 0 -25px;
          padding: 10px 0 0 0;
          border-top: solid 1px #e6eeff;
          text-align: center;
        }

      .descript {
        text-align: left;
        margin: 0 20px;
      }

        .btn-bid {
          border: none;
          color: #fff;
          cursor: pointer;
          border-radius: 6px;
          -webkit-appearance: none;
        }

          .btn-bid-now {
            font-size: 18px;
            background-color: #009900;
            border: solid 2px #009900;
          }
          .btn-bid-now:hover{
            color: #009900;
            background-color: #fff;
          }
          .btn-bid-more{
            font-size: 12px;
          }
          .btn-buy-now {
            background-color: #369;
            color: #fff;
            font-size: 14px;
          }

      .bid_history {
        position: absolute;
        background-color: #fff;
        width: 80%;
        border: solid 2px #e6eeff;
        border-radius: 6px;
        box-shadow: 2px 2px 3px;
        padding: 6px;
        bottom: 30px;
        font-size: 12px;
      }
      .btn-close {
        background-color: #900;
        color: #fff;
        font-weight: bold;
        border: solid 2px #900;
        -webkit-appearance: none;
        border-radius: 4px;
        cursor: pointer;
        padding: 0 2px;
      }
        .btn-close:hover {
          color: #900;
          background-color: #fff;
        }

      .auction_results {
        position: relative;
        margin: 10px auto;
      }

      .auction_results table{
        width: auto;
        padding: 4px;
        border-spacing: 0;
        margin: 0 auto;
      }
      .auction_results td{
        border-bottom: solid 1px #aaa;
        padding: 0 4px;
      }
      .auction_results .total {
        font-weight: bold;
        text-align: right;
        padding-right: 10px;
      }
      .auction_results .right {
        text-align: right;
        padding-right: 10px;
      }
      .auction_results .left {
        text-align: left;
      }
      .auction_results th{
        background-color: #eee;
        padding: 0 4px;
      }

  .currently_winning {
    position: absolute;
    top: 10px;
    left: 10px;
    background-image: url('/views/images/star_icon.png');
    background-size: 30px 30px;
    width: 30px;
    height: 30px;
  }
 
.lotListPhoto{
  max-width: 100%;
  max-height: 200px;
  padding-right: 4px;
}

.photoStyle{
	border: solid 2px #000;
	box-shadow: 2px 2px 2px #888;
	margin: 0 3px 3px 0;
}
.noticePhoto{
	max-width: 100%;
	max-height: 500px;
}
.headshots{
	margin: 0 10px 10px 0;
}

.colour_swatch { /* SLIDE SHOW EDIT */
	width: 36px;
	height: 36px;
	border: solid 1px #000;
	box-shadow: 1px 1px 1px #666;
	padding: 0 8px;
	margin: 0 4px;
}

/* Used in email to parents of new student accounts */
.special_box { 
	border: solid 2px #036;
	padding: 6px;
}
@media only screen and (max-width: 767px) {
  /* For mobile phones: */
  [class*="col-"] {
    width: 100%;
  }
}

.donor_recpt_preview {
  position: relative; 
  float: left; 
  width: 80%; 
  margin: 20px 10%; 
  border:solid 1px; 
  padding: 20px
}

.donor_recpt_preview td {
  padding: 4px;
  box-sizing: border-box;
  margin: 0;
 }

.donor_recpt_preview table{
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  margin: 20px 0;
}

/* ====================== Testimonies ================================= */

  div.testimony{
  	width:550px;
  	min-height: 770px;
  	position: relative;
  	padding: 45px 65px 20px 65px;
  	background-image: url('images/letter_bkg.png');
  	background-repeat: none;
  	background-size: 550px 770px;
  	color: #2f3d56;
  	-ms-transform: rotate(-3deg); /* IE 9 */
      -webkit-transform: rotate(-3deg); /* Safari */
      transform: rotate(-3deg); /* Standard syntax */
      overflow: hidden;
      margin: 0 auto;
  }
  div.testimony p{
  	font-family:Georgia;
  	margin: 12px 0 0 0;
  	text-align: left;
  }
    div.testimony11 p{
      font-size: 11px;
      line-height: 13px;
      text-align: left;
      margin: 6px 0;
    }

    div.testimony12 p{
      font-size: 12px;
      line-height: 14px;
      text-align: left;
      margin: 6px 0;
    }
    div.testimony13 p{
      font-size: 13px;
      line-height: 15px;
      text-align: left;
      margin: 6px 0;
    }
    div.testimony14 p{
      font-size: 14px;
      line-height: 16px;
      text-align: left;
      margin: 6px 0;
    }
  .testimony_menu select{
  	font-size: 18px;

  }
  .testimony_sig{
    font-size: 24px; 
    color: #003185; 
    margin-bottom: -5px; 
    text-align: left
  }
    .font_sig1{
      font-family: SignatureFont1;
    }
    .font_sig2{
      font-family: SignatureFont2;
    }
    .font_sig3{
      font-family: SignatureFont3;
    }



/* ============================= FEATURED ALUMNI ======================== */

  .status_light {
    padding: 2px 10px;
    box-shadow: 1px 1px 2px #666;
    border-radius: 14px;
  }
  .green_light {
    background-color: #00b834;
    background-image: radial-gradient(closest-side at 40% 40%, #a1e8b5, #007a23);
  }
  .red_light {
    background-color: #c70000;
    background-image: radial-gradient(closest-side at 40% 40%, #ff5c5c, #940000);

  }
  .amber_light {
    background-color: #ff9d0a;
    background-image: radial-gradient(closest-side at 40% 40%, #ffe2a8, #db9200);

  }

/* ============================== CONSENT FORMS =========================== */
  .section_head{
  	background-color: #000;
  	color: #fff;
  	text-align: center;
  	font-family: Myriad_B;
  	font-weight: 100;
  	font-size: 14px;
  	margin-top: 6px;
  	padding-top: 4px;
  }


/* ===== STYLER FOR FILE OBJECT BROWSE BUTTON ========= */

  input[type=file]::file-selector-button {
    
    background-color: #285786;
    border: solid 1px #285786;
    color: #fff;
    font-family: Myriad_BC;
    font-weight: 100;
    font-size: 14px;
    padding: 2px 4px 0 4px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 3px;
  }
    input[type=file]::file-selector-button:hover {

        background-color: #fff;
        color: #285786;
        border: solid 1px #285786;
    }


/*========== STYLER FOR CHECKBOX =============== */

    /* Hide the default checkbox */
    input[type=checkbox], input[type=radio] {
      visibility: hidden;
    }

    /* Custom default checkbox */
    .checkbox {
      position: absolute;
      top: -4px;
      left: 0;
      height: 18px;
      width: 18px;
      background-color: #eff2f5;
      border: solid 1px #285786;
      border-radius: 2px;
      cursor: pointer;
      margin-top: 2px;
    }

      .pad_ckbx {
        padding: 0 0 0 24px;
      }
      .ckbx:hover input ~ .checkbox {
      background-color: #4b9b87;
      }
      .ckbx input:active ~ .checkbox{
        background-color: #4b9b87;
      }
      .ckbx input:checked ~ .checkbox {
        background-color: #285786;
      }

      /* style the check mark */
      .ckbx .checkbox:after {
        left: 4px;
        bottom: 2px;
        width: 4px;
        height: 12px;
        border: solid white;
        border-width: 0 3px 3px 0;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
      }

      /* hide the checkmark when not checked */
      .checkbox:after {
        content:  "";
        position: absolute;
        display: none;
      }

      /* display checkmark */
      .ckbx input:checked ~ .checkbox:after{
        display: block;
      }


/*========== STYLER FOR RADIO BUTTON =============== */
    /* Custom default radio button */
    .radio {
      position: absolute;
      top: -4px;
      left: 0;
      height: 16px;
      width: 16px;
      border-radius: 8px;
      background-color: #eff2f5;
      border: solid 1px #285786;
      cursor: pointer;
      margin-top: 4px;
    }

      .rdo:hover input ~ .radio {
      background-color: #4b9b87;
      }
      .rdo input:active ~ .radio{
        background-color: #4b9b87;
      }
      .rdo input:checked ~ .radio {
        background-color: #285786;
      }
       /* style the radio button */
      .rdo .radio:after {
        height: 10px;
        width: 10px;
        left: 2px;
        top: 2px;
        border-radius: 8px;
        background-color: #4b9b87;
      }
      /* hide the radio button when not checked */
      .radio:after {
        content:  "";
        position: absolute;
        display: none;
      }

      /* display radio button */
      .rdo input:checked ~ .radio:after{
        display: block;
      }
      .pad_rdo {
        padding: 0 0 0 20px;
      }

/*  ======== BUTTON STYLES ========================= */
	.btn {
    border: none;
    color: #fff;
    font-family: Myriad_BC;
    font-weight: 100;
    font-size: 14px;
    padding: 2px 4px 0 4px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    border-radius: 2px;
	}

	.btn-mini {
		font-size: 11px;
	}
	.btn-small {
		font-size: 12px;
	}
	.btn-large {
		font-size: 16px;
	}
  .btn-icon-big {
    width: 34px;
    height: 34px;
    background-size: 28px 28px;
  }
  .btn-icon-mid {
    width: 25px;
    height: 25px;
    background-size: 19px 19px;
  }
  .btn-icon-mini {
    width: 20px;
    height:  20px;
    background-size: 14px 14px;
  }

	.btn-add {
		background-color: #fff;
		color: rgba(0, 0, 0, 0);
		background-image: url("/views/images/add_icon_50.png");
		background-repeat: no-repeat;
		background-position: 2px 2px;
		border:  solid 1px #ccc;
		margin: 1px;
	}
		.btn-add:hover{
			background-color: #eee;
			border: solid 1px #ccc;
		}

	.btn-edit {
		background-color: #fff;
		color: rgba(0, 0, 0, 0);
		background-image: url("/views/images/edit_btn_50.png");
		background-repeat: no-repeat;
		background-position: 2px 2px;
		border:  solid 1px #ccc;
		margin: 1px;
	}
		.btn-edit:hover{
			background-color: #eee;
			border: solid 1px #ccc;
		}

  .btn-dupe {
    background-color: #fff;
    color: rgba(0, 0, 0, 0);
    background-image: url("/views/images/dupe_btn_50.png");
    background-repeat: no-repeat;
    background-position: 2px 2px;
    border:  solid 1px #ccc;
    margin: 1px;
  }
    .btn-dupe:hover{
      background-color: #eee;
      border: solid 1px #ccc;
    }


	.btn-del {
		background-color: #fff;
		color: rgba(0, 0, 0, 0);
		background-image: url("/views/images/trash_icon_50.png");
		background-repeat: no-repeat;
		background-position: 2px 2px;
		border:  solid 1px #ccc;
		margin: 1px;
	}
		.btn-del:hover{
			background-color: #eee;
			border: solid 1px #ccc;
		}

  .btn-X {
    background-color: #990000;
    color: rgba(0, 0, 0, 0);
    background-image: url("/views/images/x-icon.png");
    background-repeat: no-repeat;
    background-position: 1px 1px;
    background-size: 12px 12px;
    width: 14px;
    height: 14px;
    border: none;
    margin: 0 1px;
  }
    .btn-X:hover{
      background-color: #cc0000;
      box-shadow: 1px 1px 2px #000;
    }


	.btn-reset {
		background-color: #fff;
		color: rgba(0, 0, 0, 0);
		background-image: url("/views/images/reset_btn_50.png");
		background-repeat: no-repeat;
		background-position: 2px 2px;
		border:  solid 1px #ccc;
		margin: 1px;
	}
		.btn-reset:hover{
			background-color: #eee;
			border: solid 1px #ccc;
		}


  .btn-view {
    background-color: #fff;
    color: rgba(0, 0, 0, 0);
    background-image: url("/views/images/view_btn.png");
    background-repeat: no-repeat;
    background-position: 2px 2px;
    border:  solid 1px #ccc;
    margin: 1px;
  }
    .btn-view:hover{
      background-color: #ccc;
      border: solid 1px #fff;
    }
       

  .btn-login {
  	background-color: #4b9b87;
  	border: solid 1px #4b9b87;
  }
  	.btn-login:hover{
	  	color: #4b9b87;
	  	background-color: #fff;
	  	border: solid 1px #4b9b87;
  	}

  .btn-cancel {
  	background-color: #772222;
  	border:  solid 1px #772222;
  }
  	.btn-cancel:hover {
	  	color: #772222;
	  	background-color: #fff;
	  	border:  solid 1px #772222;
  	}

	.btn-submit{
		background-color: #285786;
		border: solid 1px #285786;
	}
		.btn-submit:hover {
			background-color: #fff;
			color: #285786;
			border: solid 1px #285786;
		}
  
  .btn-save{
  	background-color: #52807c;
  	border:  solid 1px #52807c;
  }
  	.btn-save:hover {
	  	color: #52807c;
	  	background-color: #fff;
	  	border:  solid 1px #52807c;
  	}

  .btn-special{
  	background-color: #604785;
    border:  solid 1px #604785;
  }
    .btn-special:hover{
      color: #604785;
      background-color: #fff;
      border:  solid 1px #604785;
    }




  .tooltip { /* div that contains the button */
    display: inline-block;
  }

  .tooltip .tooltiptext{
    visibility: hidden;
    width: 80px;
    background-color: rgba(255, 255, 255, 0.9);
    border: solid 1px #036;
    color: #036;
    text-align: center;
    padding: 2px;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    bottom: 80%;
    left: 50%;
    margin-left: -40px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
  }

  /* Tooltip arrow */
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #036 transparent transparent transparent;
  }

  /* Show the tooltip text when mouseover */
  .tooltip:hover .tooltiptext{
    visibility: visible;
    opacity: 1;
  }




/* ========= ERROR STYLES =========================== */
  div .error { padding: 0px; margin: 0 0 20px 0px; font-size: 12px; text-align:center; color: #a00; font-family:Verdana, Geneva, sans-serif;}
  div .success { padding: 0px; margin: 0 0 20px 0px; font-size: 12px; text-align:center; color: #0a0; font-family:Verdana, Geneva, sans-serif;}
  div .warning { padding: 0px; margin: 0 0 20px 0px; font-size: 12px; text-align:center; color: #d64000; font-family:Verdana, Geneva, sans-serif;}


  #alert_div {
      position: fixed;
  	left:50px;
  	right: 50px;
  	top: 110px;
  	z-index: 30;
  	margin: 20px auto;
  	padding: 10px;
  	font-size: 14px;
  	box-shadow: 2px 2px 2px #666;
  	border: 1px solid;
  	text-align: center;
  	font-family:Myriad, sans-serif;
  	-moz-animation: fadeAlert 0s ease-in 6s forwards; /* Firefox */
  	-webkit-animation: fadeAlert 0s ease-in 6s forwards;/* Safari and Chrome */
  	-o-animation: fadeAlert 0s ease-in 6s forwards;/* Opera */
  	animation: fadeAlert 0s ease-in 6s forwards;
  	-webkit-animation-fill-mode: forwards;
  	animation-fill-mode: forwards;
  	display: in-line;
  }
  	#alert_div a {
  		text-decoration: none;
  		cursor: pointer;
  	}
  	#alert_div a:hover{
  		font-family: Myriad_B;
  	}
      @keyframes fadeAlert {
          to {
              width:0;
              height:0;
              margin: 0;
              box-shadow: none;
              border-radius: 0;
              overflow:hidden;
              padding: 0;
              border: none;
              display: none;
          }
      }

      @-webkit-keyframes fadeAlert {
          to {
              width:0;
              height:0;
              margin: 0;
              border-radius: 0;
              box-shadow: none;
              border: none;
              visibility:hidden;
              display: none;
          }
      }
  	.alert_success { background-color: #c8eebf; color: green;}
  	.alert_warning { background-color: #f6f6cf; color:#d64000;}
  	.alert_error { background-color: #fce9e9; color: #c20000; }



/* ============= AUTOCOMPLETE STYLES ===============
/*the container must be positioned relative:*/
  .autocomplete {
    position: relative;
    display: inline-block;
  }
    .autocomplete input[type=text]{
      width: 175px;
      font-size: 13px;
      border: solid 1px #2166b0;
      background-color: #eff2f5;
      color: #2166b0;
      font-family: Myriad;
    }

  .autocomplete-items {
    position: absolute;
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    font-size: 13px;
    max-height: 300px;
    width: auto;
    max-width: 250px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 174px;
  }

  .autocomplete-items div {
    padding: 5px;
    cursor: pointer;
    background-color: #fff; 
    border-bottom: 1px solid #d4d4d4; 
  }

  /*when hovering an item:*/
  .autocomplete-items div:hover {
      background-color: #eff2f5;
      color: #2166b0;
  }

  /*when navigating through the items using the arrow keys:*/
  .autocomplete-active {
    background-color: #2166b0 !important; 
    color: #ffffff; 
  }


  #userIDautocomplete-list {
    top: 27px;
    left: 6px;
  }