form {height:100%;}

.sideNav {   
    margin-top: 8%;  
}


#videoBanner {
	clear:both;
	position:relative;
	width:100%;
	height:80%;
	 background-color:#000;
	 color:#fff;
}

#video-container {
	position: absolute;
	background-color:#333;
	top:0;
	left:0%;
	height:100%;
	width:100%;
	overflow: hidden;
}

video {
	position:absolute;
	z-index:0;
	height:auto;
}
video.fillWidth {
	width: 100%;
}

.videoOverlay {
	position:relative;
	top:200px;
	z-index:3;
	color:#fff !important;
}

.videoOverlay h1 {
	width:446px;
	font-size:2.25em !important;	
	line-height:1.25em;
	padding:10px 0;
	border-top:1px solid #999;
	border-bottom:1px solid #999;
	margin-left:auto;
	margin-right:auto;
	font-family:'Crimson Text', serif;
	font-weight:normal;
}

.videoOverlay p {
	text-align:center;
	margin:0 auto 5px;
	color:#fff;
	text-transform:uppercase;
	letter-spacing:0.3em;
	font-weight:500;
	font-size:.875em;
}

/*PHOTO BANNER*/
#visit {
	width:100%;
	height:82%;
	 background-color:#00274C;
	background:url(/_resources/images/banners/library-foliage.jpg) no-repeat bottom center;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  color:#fff;
}



#visit article {
	/*width:96%;*/
	width:100%;
	height:100%;
	padding-top:20%;
	margin-left:auto;
	margin-right:auto;
	 background-color: rgba(0, 0, 0, 0.3);
}

#visit article h1 {
	width:300px;
	font-size:2.25em !important;	
	line-height:1.25em;
	padding:10px 0;
	border-top:1px solid #999;
	border-bottom:1px solid #999;
	margin-left:auto;
	margin-right:auto;
	font-family:'Crimson Text', serif;
	font-weight:normal;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}

#visit article p {
	text-align:center;
	margin:0 auto 5px;
	color:#fff;
	text-transform:uppercase;
	letter-spacing:0.3em;
	font-weight:500;
	font-size:.875em;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

/*#visit article h1 {
	margin:0;
	text-align:center;
	color:#fff;
	font-size:2.25em !important;
	line-height:1.25em;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
}

#visit article h2 {font-weight:bold; color:#444;}

#visit article p {
	line-height:1.5em;
}*/

#linkTo {clear:both; float:left; width:100%; background-color:#E0EEF5; color:#444;}
#linkTo article {
	margin-left:auto;
	margin-right:auto;
	width:90%;
}

#linkTo article .col2 {
	float:left;
	width:48%;
	margin-top:2%;
}
.margRight2 {margin-right:2%;}

#linkTo article h2 {
	font-weight:bold;
	text-transform:uppercase;
}

#linkTo article ul {list-style-type:none;}

#linkTo article li {
	font-size:.875em;
	padding:2%;	
}

#linkTo article li img {
	vertical-align:middle;
}

.txtTop {vertical-align:text-top; padding:0; margin:0;}

.hvr-fade {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
  color:#444;
  text-decoration:none;
  padding:2%;
	border:1px solid #9CD0E8;
	width:96%;
	margin-bottom:2%;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: #fff;
  border:1px solid #fff;
  color: #333 !important;
}





/*.colVisit {
	float:left;
	width:50%;
	margin-top:4%;
}

.colVisit p {
	margin:10px 0;
	color:#444 !important;
}

.col75 {
	width:75%;
	margin-left:auto;
	margin-right:auto;
}


.colVisit ul {list-style-type:none; margin-top:20px;}

.colVisit li {
	padding:2%;	
	color:#444;
	font-size:.875em;
}

.colVisit li img {vertical-align:middle;}

.colVisit a:link, .colVisit a:visited {
	text-decoration:none !important;
}

.colVisit a:hover {border-bottom:1px dotted #444 !important;}

.hvr-fade {
	background-color:rgba(255, 255, 255, 0.75);
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: color, background-color;
  transition-property: color, background-color;
  text-decoration:none;
  padding:2% 3%;
	border:1px solid #ccc;
	width:94%;
	margin-bottom:2%;
}
.hvr-fade:hover, .hvr-fade:focus, .hvr-fade:active {
  background-color: #eee;
  color: white !important;
}
*/


a.button:link {
	background-color: rgba(255, 255, 255, 0.7);
    display: block;
    margin-bottom: 3%;
	padding: 15px 15px 15px 15px;
    width: 80%;
	color:#000 !important;
	text-decoration:none;
	-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:left !important;
}

a.button:hover {
	background-color:rgba(255, 255, 255, 1);
}

.anchorLink {
	background:url(/_resources/images/icons/anchor.png) no-repeat left center;
}

.directLink {
	background:url(/_resources/images/icons/link2.png) no-repeat left center;
}


.txtTop {
    vertical-align: text-top;
    padding: 0;
    margin: 0;
	color:#000 !important;
}


/*-----MAPS-----*/
#mainMap {
	clear:both;
	/*float:left;*/
	width:100%;
	padding-top:25px;
	background-color:#f7f7f7;
}
#mainMap article {
	/*float:right;
	width:85%;
	margin-right:3%;*/
	width:90%;
	margin-left:auto;
	margin-right:auto;
}

#mainMap h1 {margin-top:4%; margin-bottom:3%; color:#444;}


#mainMap a.download:link, #mainMap a.download:visited {
	font-size:.75em;
	color:#333 !important;
	text-decoration:none;
	padding:8px 20px;
	-webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px; background-color:#ccc;}
#mainMap a.download:hover {color:#fff !important; background-color:#333; text-decoration:none;}	

.mapCategory {text-align:center;}
.mapCategory a {margin-right:20px; text-decoration:none; color:#06c;}
a.mapButton:link, a.calendarButton:visited {
    border-radius: 5px;
    letter-spacing: 0.045em;
    padding: 0.25em 1em;
	background-color:transparent;
}

a.mapButton:hover {background-color:#0059b2; color: #fff;}

.legend {
	width:100%;
	float:left;
}

.legend h2 {font-weight:bold; text-transform:uppercase;}

.legend ul {
	float:left;
	width:31%;
	padding:1%;
	border-right:1px dotted #ccc;
	list-style-type:none;
	margin:0;
}

.legend li {
	float:left;
	width:100%;
	border-bottom:1px dotted #ccc;
	padding: 2% 1%;
	}
	
.legend li h3 {
	float:left;
	font-size:1em;
	margin:0;
	padding:0;
	color:#00274C;
	font-weight:bold;
}

.legend li h3.entrance {
	color:#b10006 !important;}

.legend li p {
	font-size:1em;
	margin:0 0 0 70px;
	padding:0;
	color:#444;
}

#IrvineMap {
	clear:both;
	float:left;
	width:100%;
	background-color:#D9DDDC;
}

#IrvineMap h1 {text-align:center;}

#IrvineMap article {
	float:right;
	width:85%;
	margin-right:3%;
}

#IrvineMap h1 {margin-top:4%; margin-bottom:3%; color:#444;}

#GCACMap {
	clear:both;
	float:left;
	width:100%;
	background-color:#484f5f;
	 color:#eee;
}

#GCACMap h1 {margin-top:4%; margin-bottom:3%; text-align:center;}

#GCACMap article {
	float:right;
	width:85%;
	margin-right:3%;
}

#GGMap {
	clear:both;
	float:left;
	width:100%;
	background-color:#00274C;
	 color:#fff;
}

#GGMap h1 {margin-top:4%; margin-bottom:3%; text-align:center;}

#GGMap article {
	float:right;
	width:85%;
	margin-right:3%;
}

.top {clear:both; padding-top:5%; margin-bottom:3%; text-align:center;}


.embed-container {
  position: relative; 
  padding-bottom: 56.25%; /* ratio 16x9 */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
  border:1px solid #ddd;
}
.embed-container iframe {

  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}
/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}

.clearBoth {clear:both !important;}

/* -------------- @MEDIA -------------*/
/* ----------- iPhone 1-5S and GALAXY S3-S5 ----------- */


/* Portrait */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 640px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {	
	#visit {height:50%;}
	#visit article {width:96%; height:100%; margin-left:auto; margin-right:auto; padding:40% 4% 4%; background-color: rgba(0, 0, 0, 0.7);}
	#visit article h1 {width:200px; font-size:1.25em !important;}
	
	#linkTo article .col2 {clear:both !important; float:none; width:100%;}
	.margRight2 {margin-right:0 !important;}
	
	#mainMap {
	clear:both !important;
	float:none !important;}
	#mainMap article {
	float:none !important;
	clear:both !important;
	width:100%;
	margin-right:0;}
	#mainMap h1 {margin-top:3%; padding-top:0;}
	.legend {float:none !important; clear:both !important;}
	.legend ul {float:none !important; clear:both !important; width:98%;}
	#IrvineMap article, #GCACMap article, #GGMap article {float:right; width:96%; margin-right:2%;}
}

/* iPhone 1-5 and Galaxy: Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 640px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) {
	#visit {height:60%; background:url(/_resources/images/banners/visit-bg.jpg) no-repeat 75% 90% !important;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
	#visit article {width:96%; height:100%; margin-left:auto; margin-right:auto; padding:20% 4% 4%; background-color: rgba(0, 0, 0, 0.7);}
	#visit article h1 {width:200px; font-size:1.5em !important;}
	
	#linkTo article .col2 {clear:both !important; float:none; width:100%;}
	.margRight2 {margin-right:0 !important;}
	
	#mainMap {
	clear:both !important;
	float:none !important;}
	#mainMap article {
	float:none !important;
	clear:both !important;
	width:100%;
	margin-right:0;}
	#mainMap h1 {margin-top:3% !important padding-top: 0 !important;}
	.legend {float:none !important; clear:both !important;}
	.legend ul {float:none !important; clear:both !important; width:98%;}
	#IrvineMap article, #GCACMap article, #GGMap article {float:right; width:96%; margin-right:2%;}

}

/* ----------- iPhone 6 ----------- */


/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 
	#visit {height:50%;}
	#visit article {width:96%; height:100%; margin-left:auto; margin-right:auto; padding:40% 4% 4%; background-color: rgba(0, 0, 0, 0.7);}
	#visit article h1 {width:200px; font-size:1.25em !important;}
	
	#linkTo article .col2 {clear:both !important; float:none; width:100%;}
	.margRight2 {margin-right:0 !important;}
	
	#mainMap {
	clear:both !important;
	float:none !important;}
	#mainMap article {
	float:none !important;
	clear:both !important;
	width:100%;
	margin-right:0;}
	#mainMap h1 {margin-top:3%; padding-top:0;}
	.legend {float:none !important; clear:both !important;}
	.legend ul {float:none !important; clear:both !important; width:98%;}
	#IrvineMap article, #GCACMap article, #GGMap article {float:right; width:96%; margin-right:2%;}

}

/* iPhone 6: Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 
	#visit {height:80%; background:url(/_resources/images/banners/library-foliage.jpg) no-repeat 75% 90% !important;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
	#visit article {width:96%; height:100%; margin-left:auto; margin-right:auto; padding:20% 4% 4%; background-color: rgba(0, 0, 0, 0.7);}
	#visit article h1 {width:200px; font-size:1.5em !important;}
	
	#linkTo article .col2 {clear:both !important; float:none; width:100%;}
	.margRight2 {margin-right:0 !important;}
	
	#mainMap {
	clear:both !important;
	float:none !important;}
	#mainMap article {
	float:none !important;
	clear:both !important;
	width:100%;
	margin-right:0;}
	#mainMap h1 {margin-top:3% !important padding-top: 0 !important;}
	.legend {float:none !important; clear:both !important;}
	.legend ul {float:none !important; clear:both !important; width:98%;}
	#IrvineMap article, #GCACMap article, #GGMap article {float:right; width:96%; margin-right:2%;}

}

/* ----------- iPhone 6+ ----------- */


/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
	#visit {height:50%;}
	#visit article {width:96%; height:100%; margin-left:auto; margin-right:auto; padding:40% 4% 4%; background-color: rgba(0, 0, 0, 0.7);}
	#visit article h1 {width:200px; font-size:1.5em !important;}
	
	#linkTo article .col2 {clear:both !important; float:none; width:100%;}
	.margRight2 {margin-right:0 !important;}
	
	#mainMap {
	clear:both !important;
	float:none !important;}
	#mainMap article {
	float:none !important;
	clear:both !important;
	width:100%;
	margin-right:0;}
	#mainMap h1 {margin-top:3%; padding-top:0;}
	.legend {float:none !important; clear:both !important;}
	.legend ul {float:none !important; clear:both !important; width:98%;}
	#IrvineMap article, #GCACMap article, #GGMap article {float:right; width:96%; margin-right:2%;}
}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 
	#visit {height:80%; background:url(/_resources/images/banners/library-foliage.jpg) no-repeat 75% 90% !important;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;}
	#visit article {width:96%; height:100%; margin-left:auto; margin-right:auto; padding:20% 4% 4%; background-color: rgba(0, 0, 0, 0.7);}
	#visit article h1 {width:200px; font-size:1.5em !important;}
	
	#linkTo article .col2 {clear:both !important; float:none; width:100%;}
	.margRight2 {margin-right:0 !important;}
	
	#mainMap {
	clear:both !important;
	float:none !important;}
	#mainMap article {
	float:none !important;
	clear:both !important;
	width:100%;
	margin-right:0;}
	#mainMap h1 {margin-top:3% !important padding-top: 0 !important;}
	.legend {float:none !important; clear:both !important;}
	.legend ul {float:none !important; clear:both !important; width:98%;}
	#IrvineMap article, #GCACMap article, #GGMap article {float:right; width:96%; margin-right:2%;}
}

/* ----------- iPad ----------- */
/* Portrait */
@media only screen and (max-width : 1020px) and (min-width : 760px) {
   /* 768 x 1024 and 800 x 600 */
   #visit {height:60%;}
	#visit article {width:96%; margin-left:auto; margin-right:auto; padding-top:20%;}
	.sideNav {margin-top: 12%;}
	.sideNav li {padding-top: 5%; padding-bottom: 5%;}
}
/* Landscape */
@media only screen and (max-width : 1050px) and (min-width : 1022px) {
   /* 1024 x 768 */
	.sideNav {margin-top: 10%;}
	.sideNav li {padding-top: 5%; padding-bottom: 5%;}
}