body { 
			background: url("../images/background_dilogo_x-faded.jpg") fixed center;
			margin: auto;
			padding: 0 2px;
			}
		

#wrapper { overflow: hidden; word-wrap: break-word;} 		
		
.validate  {	font-family:verdana; font-size:10pt; color: black;
						font-weight:600; vertical-align:text-bottom;
						text-align: right; padding-bottom:0.5cm; 
					}	
		
.navbar-top { background-color: #e0e3eb;
					border-radius: 5px 5px 0px 0px;
					font-family: courier new, courier;
					color: #e9ba17;
					font-size: 15pt;
					text-align: center;
					margin-top: 1%;
					}

.navbar-bottom { background-color: #e0e3eb;
					border-radius: 0px 0px 5px 5px;
					font-family: courier new, courier;
					color: #e9ba17;
					font-size: 15pt;
					text-align: center;
					}
					
a { text-decoration: none; }
a:link { color: blue; }
a:active { color: yellow; }
a:visited { color: maroon; }
a:hover	{ color: red; background-color: #fdf2b4; border-radius: 5px; }

#contents-1 { margin: auto; padding: 5px; align-items: center; vertical-align: middle;
							}

.contents_1 { border-radius: 10px; padding: 30px 30px; border: 15px;
							background-color: #ffffcc;  
							font-size: 2em;
							text-align: center;
							font-family: Helvetica, Palatino Linotype, Arial Black;
							vertical-align: middle;
						
							}

#contents-2 { margin: auto; padding: 5px; align-items: center; vertical-align: middle;
							}
							
.contents_2 { border-radius: 10px; padding: 30px 30px; 
							background-color: white; 
							font-size: 2em;
							text-align: center;
							font-family: Helvetica, Palatino Linotype, Arial Black;
							vertical-align: middle;
							}


#name { 	font-weight: 600; color: white; 
				font-family: sans-serif, Helvetica, Georgia, Arial Black;
				position: absolute; z-index: 1;
				float: left; padding: 20px 0 0 20px;
				}

#wording { width: 100%; }				
#motivation { color: #f4d62f; } 
#what-motivates { color: white; }

#quote {	color: #daebef; font-style: italic; font-family: Georgia, Verdana, Helvetica; 
				text-align: center;  
				}
					
#text 	{	color: #ffffcc; font-family: courier new; }

#signature {	 font-family: Book Antigua, Georgia; text-align: right; 
							position: relative; left: 500px;}

/* .photo-border { border-radius: 15px; } */

/*   ########   Small Media   ##########  */
@media (min-width: 200px) and (max-width: 650px) {
	body { width: 550px; }
	#buttn-wrap { display: block; opacity: 0.8; background: url('../images/glass+purple-effects.jpg'); }

	.contents_1 , .contents_2  {	padding: 24px; font-size: 1.5em; 
															transition: padding 3s, transform 4s;}
	#contents-1, #contents-2  { 	width: 30%; padding: 10px 0; 
															display: flex; flex-direction: column; box-sizing: border-box;
		}

.contents_1:hover, .contents_2:hover	{	
										padding: 20px; 
										transform: rotate(-360deg); 
										font-family: sans-serif;
										}

.photo-wide { width: 70%; }
#sf-golden-gate { display: block; width: 100%; opacity: 0.9;}
#yosemite, #tahoe { display: none; }

/*
#cap-img3 { display: block; width: 100%; opacity: 0.9;}
#cap-img2, #cap-img1 { display: none; }
*/

#name { font-size: 22pt; color: #f4d62f; 	} 

#wording 	{ position: absolute; top: -180px; }			
#motivation { font-size: 25pt; 
							position: absolute; top: 427px; left: 35px; 
						}
#quote { font-size: 12pt; width: 80%; 
				position: absolute; left: 35px; top: 475px; 
				}
#text { font-size: 11pt; width: 99%; 
				position: absolute; top: 535px; left: 15px;
			}
#signature { color: #f4d62f;	}

}

/*   ########   Medium Media (tablets, etc.)  ##########  */
@media (min-width: 650px) and (max-width: 890px) {
	body { width: 700px; }
	#buttn-wrap { display: block; opacity: 0.6; 
								position: absolute; left: 1%; top: 200px; }

	.contents-1 { width: 75%; }
	.contents-2 { width: 75%; }								
	
	#contents-1 { 	position: relative; 
								top: -80px; left: 17%; right: 17%;						
							}

	#contents-2 { 	position: relative; 
								top:-20px;; left: 17%; right: 17%;
							}
				
 /* The animation code
@keyframes backgrnd {
    from {background: url("../images/tahoe_snowed-peaks.jpg");}
    to {background: url("../images/yosemite_snowed.jpg");}
}

/* The element to apply the animation to 
div#backgrnd-pic {
    animation-name: backgrnd;
    animation-duration: 5s;
}
*/

#yosemite { display: block; width: 100%; opacity: 0.9;}
#tahoe, #sf-golden-gate { display: none; }

/*	
#cap-img2 { display: block; width: 100%; opacity: 0.9;}
#cap-img3, #cap-img1 { display: none; }
*/

#name { font-size: 28pt; color: #daebef; padding-top: 10px;}
#wording 	{	position: absolute; top: -75px; }
#motivation { font-size: 28pt; 
							position: absolute; top: 385px; left: 15px; 
						}
#quote { width: 99%; font-size: 12pt; 
				position: fixed; left: 10px; top: 360px;
				}
#text 	{ font-size: 13pt; width: 99%;
				position: absolute; top: 470px; left: 2%;
			}
#signature { color: #041bb9;	}

/* make the top and bottom navbar font smaller, so that the menu doesn't "break"  */
.navbar-top { font-size: 12pt; }
.navbar-bottom { font-size: 12pt; }

}


/*   ########   Large Media   ##########  */
@media (min-width: 890px) {
	
	body { width: 900px; }
	#buttn-wrap { display: none; }
	
	#quote { font-size: 13pt; }

/*	
	#contents-1 { 	position: relative; 
								top: -80px; left: 17%; right: 17%;						
							}

	#contents-2 { 	position: relative; 
								top:-20px;; left: 17%; right: 17%;
							}	
*/


 /* The animation code 
@keyframes backgrnd {
    from {background: url("../images/tahoe_snowed-peaks.jpg");}
    to {background: url("../images/yosemite_snowed.jpg");}
}

 /* The element to apply the animation to 
div#backgrnd-pic {
    animation-name: backgrnd;
    animation-duration: 5s;
}
*/

#tahoe { display: block; width: 100%; opacity: 0.9;}
#yosemite, #sf-golden-gate { display: none; }	
/*
#cap-img1 { display: block; width: 100%; opacity: 0.9;}
#cap-img2, #cap-img3 { display: none; }
*/

#name { font-size: 35pt; color: white; }
#wording 	{	position: absolute; top: -15px; }
#motivation { font-size: 40pt; 
							position: absolute; top: 415px; left: 35px; 
						}
#quote { position: absolute; left: 50px; top: 475px; }
#text 	{ font-size: 16pt; width: 80%;
				position: absolute; top: 525px; left: 25px;
			}							
#signature { color: white; }

}

#disclaimer  { display: none; }
							
#footer { color: gray; float: left; font-weight:300;}
#bottom { font-size:9pt; color: orange; line-height: 110%;}	

table 		{ border-collapse: collapse; font-family: helvetica, verdana; }	

.sitemap	{ text-indent: 20px; }

/*

<!--
.bordered, .bordered th, .bordered td { border: 2px dotted orange; margin-left: 25%; margin-right: 25%; color: #fffeab;}
table 		{ border-collapse: collapse; font-family: helvetica, verdana; font-size: 12pt;}
.center-col	{ margin-left: 25%; margin-right:25%; text-align: center; }
.borderless { border: 0px; padding:4px; background-color: #cdf12f; color:black;}
.pastel		{ font-family: palatino linotype; font-weight:600; color: #fffeab; }
.captions	{ font-weight:600; font-size: 13pt; color: blue; }
.magenta	{ font-family: verdana; color: #bd36c9; }
.bgd-cyan	{ background-color: cyan; color: #465e79; }
.bgd-yellow	{ background-color: yellow; color: black !important;}


li:hover	{ color: red; background-color: yellow; }
li 			{ padding-top: 20px; }
p.centr		{ text-align : center; color: #138edc; }
-->

hr { margin-right: 250px;}
h1 { text-align: center; color:#efce18; }
.announce { color:green; }

.title { text-align: center; color: #f80c17; }

#imag { 	float: right; 
			padding: 2px 2px 2px 2px;
			border: 5px double dotted;
			margin: 2px 2px 10px 10px;
			width: 350px; height: 200px;
		}	
		
#paragr {	padding: 2px 2px 2px 2px;
			border-style: solid;
			border-width: 5px;
			margin: 2px 2px 10px 10px;
			background-color: #cccccc;
		}	



.section { 	padding: 10px; 
			border: 1px dashed; border-radius: 10px;
			margin: 2px;
			background-color: #ffffdd;
			font-family: arial; font-size:13pt;
		}

.section:hover { background-color: #fff0dd; color: gray;}

a:hover {
color: blue;
background-color: yellow;
}


		
*/