@import url("reset.css") screen;
@import url("animation.css") screen;

#popup {
    display:block;
    position:absolute;
    margin:0px 0px 0px 0px;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index:1000;
    width:100%;
}

#popup img{display:block;max-width: 100%; height: auto;}
#popup button{
	display:block;    
    background: red;
	color: white;
	margin:0px auto;
    
    }
img {
    max-width: 100%;
    height: auto;
    display: block;
}

#top-banner		{background-image:url('../images/site_images/TriangleHeader.png');background-repeat:repeat-x;margin: 0; padding: 0;
					width:100%;height:71px;}
#title-banner	{ background-color:#FFC000;margin:0 auto 0px auto;width:100%;height:auto;overflow:hidden;}
#logo			{
	float: left;
	width: 10%;
	background: inherit;
	position: center;
}
#logo img		{ margin: 20px 2% 0px 0px; float: left;width:50%;}
#logo h3		{ margin:5px 2% auto 0px; font-family:Georgia, "Times New Roman", Times, serif; 
					font-size:15px; color:#000099; vertical-align:middle;float:left;text-align:center;}

#title			{ float:left;width:80%;height:auto;background:inherit;}
#title h1		{ margin:3px 0 3px 0; font-family: "Matura MT Script Capitals","Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
					font-size:36px; color:#000099; text-align:center; vertical-align:middle; }
#title h2		{  margin:3px 0 3px 0; font-style:italic; font-family:"Brush Script MT", Helvetica, sans-serif; font-size: 30px; color: #000099;  text-align:center;
					vertical-align:middle; padding:0 0 10px 0; }
					
#title h3		{ margin:3px 0 3px 0; font-family:Georgia, "Times New Roman", Times, serif; font-size:12px;color:#000099; text-align:center; vertical-align:middle;
				padding:5px 0 5px 0;}

#title img		{display:block;padding:0 0 1% 0; margin:0px auto;width:3%;}
#title table 	{width:60%;margin:0 auto 0 auto;}
#title table td {width:50%;}

#right-images {float:left;width:10%;height:auto;background:inherit; display:block;vertical-align:middle;}
#right-images img {margin: 20px 2% 2% 2%;float:right; display:block;vertical-align:middle;padding:2%;width:90%;}



#small-screen-menu {display:none;}


				

#topnav {
	color: #000000;
	background: linear-gradient(white, #FFC000);
}



#topnav	ul {
	font: bold 12px/18px sans-serif;
	text-align: center;
	display: inline-block;
	margin-right: 4px;
	padding: 15px 20px;
	list-style: none;
/* background: linear-gradient(white, green);*/width: 100%;
	-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
	
}
#topnav ul li {
	font: bold 12px/18px sans-serif;
  	display: inline-block;
  	margin-right: 10px;
  	position: relative;
 	padding: 15px 20px;
 	margin-bottom:10px;
  	background: #fff;
  	cursor: pointer;
  	background: linear-gradient(white, #FFC000);
  	border:2px black solid;
  	

  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  
}
#topnav ul li a{
	 font: bold 12px/18px sans-serif;
	

  text-decoration:none;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
  
}

#topnav ul li a:link 		{ color:black; }
#topnav ul li a:visited		{ color:black; }



#topnav ul li:hover {
	background: linear-gradient(white,white);
	
}
#topnav ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  margin-top:2px;
	border:0px;
	
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;*/
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#topnav ul li ul li { 
	
  border:0px;
  display: block; 
  background: linear-gradient(white,#FFC000);
  text-shadow: 0 -1px 0 #000;
  position:relative;
  z-index:2;
  margin-bottom:1px;
  

}
#topnav ul li ul li:hover { background: linear-gradient(white,white); }
#topnav ul li:hover ul {
  display: block;
  opacity: 1; 
  visibility: visible;
  
}


/*Style 'show menu' label button and hide it by default*/
#small-screen-menu .dropmenu { display:none;}




#border			{padding:0 53px 0 53px;background:url('../images/site_images/curtain.jpeg') top left repeat-y,url('../images/site_images/curtain.jpeg') top right repeat-y; 
					height:auto;}

#wrapper		{width: 95%; height:auto; margin: 0px auto 0px auto; background-image:url('../images/site_images/whiteaumbackground.JPG'); padding:0;
				overflow:hidden;z-index:1;}	


#left-side		{float: left; width: 23%;	display:inline-block; margin:1%;}
#leftboxes		{padding:2%; margin:1%; width: 98%;border:2px #cccccc solid;}
#leftboxes h1	{margin: 1% 0; line-height: 160%;text-align:center;font-size:20px;font-style:normal;font-weight:bold;color:#CC0000;
					text-decoration:underline;}
#leftboxes a 	{color:#cc0000;}
#leftboxes h2	{margin: 1%;color:#CC0000;font-size:12px;font-weight:bold;text-align:center;}

#leftboxes p	{margin:1% 0; line-height: 120%;text-align:center;}
#leftboxes a img{display:block;padding: 1%; margin: 1%;width:30%;height: auto;margin-left:auto;margin-right:auto; }
#leftboxes ul li   {margin:1%;;text-align:center;}
#leftboxes hr		{height:1px;color:#cccccc;width:60%; }
#content		{ width: 75%;float:left;display:inline-block;margin:0.5%;}
#content h1     { margin: 2%; padding: 2% 0; font-size: 32px; color:#CC0000;
				border-bottom: 1px #cccccc solid; text-align:center; }
				
#content marquee { margin:0; font-size: 22px; color:#CC0000;}


#content p 		{margin: 2%; line-height: 160%; font-size:15px;display:block;}
#content ul		{}
#content ul li  {margin: 2%; line-height: 160%; font-size:15px;}

#content hr		{margin: 2%;}
#content h2		{margin: 2%;color:#cc0000;}
#content h3		{margin: 2%;color:blue;text-align:center;}
#content img 	{display:block;padding: 1%; margin:0px auto;width:30%;} 
#content blockquote	{padding:1%;  border: 2px black inset;margin:auto 5%; display:block;margin:2%;}
#content blockquote p {text-align:center; color:black;}
#content blockquote img {float:left; padding:1%; margin: auto 2% auto 2%; width:25%;}
#content video 	{display:block;padding: 8px; margin:0px auto;width:50%;} 
#content audio	{display:block;padding: 8px; margin:0px auto;width:50%;} 

#content h4			{margin: 2%;color:blue;}
#content table  	{overflow-x:auto;border-collapse:collapse;font-size: 15px;  
					text-align:center; margin-left: auto;  margin-right: auto;  width: 80%;}
#content th			{background-color:#FF6666;}
#content table td,th{padding:15px 35px;}
#content p box		{border:2px black inset; text-align:center;}
#content iframe		{display:block;padding: 1%; margin:2%;}



#content .collapse > * + *{
  display:none;
}
#content .collapse > *{
  cursor:pointer;
}
#content .collapse:focus{
  outline:none;
}
#content .collapse:focus > * + *{
  display:block; 
}


/* CONTENT SLIDER */
#content-slider {
	width:99%;
	margin:2%;
}
/* SLIDER */
#slider {
	background:#000;
	border:5px solid #eaeaea;
	box-shadow:1px 1px 5px rgba(0,0,0,0.7);
	height:330px;
	width:100%;
	
	overflow:visible;
	position:relative;
}
#mask {
	overflow:hidden;
	height:inherit;
}
#slider ul {
	margin:0;
	padding:0;
	position:relative;
}
#slider li {
	width:100%;
	height:inherit;
	position:absolute;
	top:-325px;
	list-style:none;
	padding:0px;
	margin:0px;
}

#slider li.firstanimation {
	-moz-animation:cycle 25s linear infinite;	
	-webkit-animation:cycle 25s linear infinite;		
}
#slider li.secondanimation {
	-moz-animation:cycletwo 25s linear infinite;
	-webkit-animation:cycletwo 25s linear infinite;		
}
#slider li.thirdanimation {
	-moz-animation:cyclethree 25s linear infinite;
	-webkit-animation:cyclethree 25s linear infinite;		
}
#slider li.fourthanimation {
	-moz-animation:cyclefour 25s linear infinite;
	-webkit-animation:cyclefour 25s linear infinite;		
}
#slider li.fifthanimation {
	-moz-animation:cyclefive 25s linear infinite;
	-webkit-animation:cyclefive 25s linear infinite;		
}

#slider .tooltip {
	background:rgba(0,0,0,0.7);
	width:300px;
	height:60px;
	position:relative;
	bottom:75px;
	left:-320px;
	-moz-transition:all 0.3s ease-in-out;
	-webkit-transition:all 0.3s ease-in-out;  
}
#slider .tooltip h1 {
	color:#fff;
	font-size:24px;
	font-weight:300;
	line-height:60px;
	padding:0 0 0 20px;
}
#slider li#first:hover .tooltip, 
#slider li#second:hover .tooltip, 
#slider li#third:hover .tooltip, 
#slider li#fourth:hover .tooltip, 
#slider li#fifth:hover .tooltip {
	left:0px;
}
#slider:hover li, 
#slider:hover .progress-bar {
	-moz-animation-play-state:paused;
	-webkit-animation-play-state:paused;
}

/* PROGRESS BAR */
.progress-bar { 
	position:relative;
	top:-5px;
	width:100%; 
	height:5px;
	background:#000;
	-moz-animation:fullexpand 25s ease-out infinite;
	-webkit-animation:fullexpand 25s ease-out infinite;
}
#right-side			{
	float: right;
	width: 23%;
	display: inline-block;
	margin: 0.5%;
	position: relative;
}
#rightboxes			{padding:2%; margin:1%; width: 98%;border:2 px #cccccc solid;}
#rightboxes h1		{margin: 1% 0; line-height: 160%;text-align:center;font-size:20px;font-style:normal;font-weight:bold;color:#CC0000;
					text-decoration:underline;}
#rightboxes h2		{margin: 2%;color:#CC0000;font-size:12px;font-weight:bold;text-align:center;}
#rightboxes p		{margin: 1% 0; line-height: 120%;text-align:center;}
#rightboxes ul li   {margin:2%; text-align:center;}
#rightboxes a img	{display:block;padding: 1%; margin: 1%;width: 180px;height: auto;margin-left:auto;margin-right:auto; }
#rightboxes img		{display:block;padding: 1%; margin: 1%;width: 180px;height: auto;margin-left:auto;margin-right:auto; }

#rightboxes hr		{height:0px;color:#cccccc;width:75%; }

#footer				{background-color:#000099;width: 100%;margin:0px; height:auto;overflow:hidden;}
#footer-wrapper 	{ padding: 0px;}
#footer-left   		{ margin: 0 0 2% 1%; float: left; vertical-align:middle;width:24%;padding:2% 2% 0 2%;}
#footer-left p 		{ margin: 2%; line-height: 160%; font-size:15px;display:block;color:white;}
#footer-center 		{ width:40%;padding:2% 2%; float:left;margin:0px;}
#footer-center h1	{ margin:00 0 00 0; font-family:Georgia, "Times New Roman", Times, serif;
					font-size:20px; color:white; text-align:center;line-height:120%; }
#footer-center h2	{ margin:00 0 00 0; font-style:italic; font-family:"Brush Script MT", Helvetica, sans-serif; font-size: 20px; color: white;  text-align:center;
					padding:0 0 1% 0; }


#footer-right		{ float:left;	margin:1%; width:24%; padding:2% 2%;right:0;}
#footer-right p 	{ color:#ffffff; font-size: 11px; margin: 4px 10px 4 px 0 px; }
#footer-right img 	{ float:left; width: 24px; height: 24px; vertical-align:top;  }
#footer-right ul li { display:block; vertical-align:top;right:0;}

					
/*Layout for small screens */

@media only screen and (max-device-width: 480px) {

#top-banner		{display:none;}
#title-banner	{ background-color:#FFC000;margin:0 auto 0px auto;width:100%;height:20px;}
#logo			{ float:left;width:10%;height:80%;background:inherit;}
#logo img		{ margin: 2px 2px 0px 0px; float: left;height: 80%;}
#logo h3		{display:none;}
#title			{ float:left;width:80%;height:auto;background:inherit;}
#title h1		{ margin:30 0 30 0; font-family: "Matura MT Script Capitals","Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
					font-size:16px; color:#000099; text-align:center; vertical-align:middle; }
#title h2		{ display:none; }
#title img		{display:none;}					
#title h3		{display:none;}
#title table	{display:none;}

#right-images	{display:none;}
#small-screen-menu { display:none;}
#small-screen-menu .dropmenu { display:block;}


#border {}
#wrapper { width: 100%;}
#topnav {display:none;}
#left-side { display:none;}
#content { width:100%;}
#right-side { display:none;}
#footer-center { display:none;}


}



/* Layout Extra */


/* Navigation Extra */

/* Forms */

form { text-align: left; margin: 20px; }
input, textarea {
	border: 1px #333 solid; margin-left: 10px;
	}
	
input { 
	width: 280px; margin-bottom: 16px;
	}
	
textarea {
	width: 280 px; height: 150 px;
	margin-bottom: 16px;
	}
	
select {	}

.submit	{
	width: 90px; height: 25px;
	margin-left: 150px;
	font-size: 12px;
}

br { clear: left; }

/* Miscellaneous */



.copyright-text { font-size: 80%; font-style: italic; color: #333; }
.footer-test	{ font-size: 80%; font-style: normal; color: #666; }	

.title			{ font-size: 18px; font-weight: bold; color: #333; }
,subtitle		{ font-size: 14px; font-style:italic; color: #333; }

.artist			{ font-size: 16px; font-weight: bold; color: #333; }
.author			{ font-size: 14px; font-weight: bold; color: #555; }
.editor			{ font-size: 14px; font-style: italic; color: #555; }

.pub-date		{ font-size: 10px; font-style: italic; color: #555; }
.article-date	{ font-size: 10px; font-style: italic; color: #555; }
.location		{ font-size: 10px; font-style: italic; color: #555; }

.float-right	{ float: right; }
.float-left		{ float: left; }
.clear			{ clear: both; }

.hide			{ display: none; }
.block			{ display: block; }
.inline			{ display: inline; }

.first			{ font-weight: bold; }
.last			{ font-weight: bold; }
.left			{ font-weight: bold; text-align: left; }
.right			{ font-weight: bold; text-align: right; }

.added			{ background: #D7D7FF; }
.removed		{background: #FFCECE; color: #f00; }
.changed		{background: #FFB; }


.error, .alert, .notice, .success, .info {
	padding: 0.8em; margin-bottom: 1em; border: 2px solit #ddd; }
	
.error, .alert	{ background: #fbe3e4; color: #8a1f11; border-color: #fbc2c4; }

.notice			{ background: #fff6bf; color: #514721; border-color: #ffd324; }

.success		{ background: #e6efc2; color: #264409; border-color: #c6d880; }

.info			{ background: #d5edf8; color: #205791; border-color: #92cae4; }

.error a 		{ color: #8a1f11; }
.alert a 		{ color: #8a1f11; }

.notice a		{ color: #514721; }
.success a		{ color: #264409; }
.info a			{ color: #205791; }