/*--Basic template for all secondary pages other than the "Cities" section.  Each page may have has its own unique stylesheet for individual quirks.--*/

/*-------------------Eric Meyer CSS Reset-------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;	
	background: #f2efe4;
	font-family: 'Antic Slab','Bookman Old Style','Century Schoolbook', Georgia, 'Droid Serif', serif;
	overflow-x: hidden;
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
}	
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* media fix */
img, embed, object, video {
	max-width: 100%;
	}	
@font-face {
    font-family: 'nevisBold';
    src: url('../fonts/nevis/nevis-webfont.eot');
    src: url('../fonts/nevis/nevis-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/nevis/nevis-webfont.woff') format('woff'),
         url('../fonts/nevis/nevis-webfont.ttf') format('truetype'),
         url('../fonts/nevis/nevis-webfont.svg#nevisBold') format('svg');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('../fonts/bebas/bebasneue-webfont.eot');
    src: url('../fonts/bebas/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas/bebasneue-webfont.woff') format('woff'),
         url('../fonts/bebas/bebasneue-webfont.ttf') format('truetype'),
         url('../fonts/bebas/bebasneue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
	}
@font-face {
    font-family: 'Courier Prime';
    src: url('../fonts/courierPrime/courier_prime-webfont.eot');
    src: url('../fonts/courierPrime/courier_prime-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/courierPrime/courier_prime-webfont.woff') format('woff'),
         url('../fonts/courierPrime/courier_prime-webfont.ttf') format('truetype'),
         url('../fonts/courierPrime/courier_prime-webfont.svg#CourierPrime') format('svg');
    font-weight: normal;
    font-style: normal;
	}
	@font-face {
    font-family: 'Courier Prime Bold';
    src: url('../fonts/courierPrime/courier_prime_bold-webfont.eot');
    src: url('../fonts/courierPrime/courier_prime_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/courierPrime/courier_prime_bold-webfont.woff') format('woff'),
         url('../fonts/courierPrime/courier_prime_bold-webfont.ttf') format('truetype'),
         url('../fonts/courierPrime/courier_prime_bold-webfont.svg#CourierPrimeBold') format('svg');
    font-weight: bold;
    font-style: bold;
	}
a {
	font-family: 'nevisBold', 'Arial Black', 'GillSans-Bold', 'Droid Sans', sans-serif;
	color: #fff;
	text-decoration: none;
	}
a:hover, a:active { outline: 0; }

h6 {
	font-family:'Patua One','Rockwell', 'Century Schoolbook', 'AmericanTypewriter-Bold', Georgia, 'Droid Serif',serif;
	font-size: 140%;
	}
.bold {
	font-weight: bold;
	}
	
::-webkit-scrollbar {
    width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
/*    -webkit-border-radius: 10px;
    border-radius: 10px;*/
    width: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
/*
	COLORS
*/
/* Page background color: #f2efe4 */
/* Sprite red #D10610 */
/* Inactive main nav links gray #BABDB5 */

/*-------------------------UNIVERSAL PAGE STYLES-----------------------*/
.IE {
	display: none;
	}
	.border {
		border: solid 3px #9E4011;
		max-width: 100%;
		margin: 0px auto;
	}
	#page {
		margin: 3px auto;
		width: 94%; 
		max-width: 1240px; 
	}
		.title{
			font-family: 'Cutive Mono', 'Patua One', 'American Typewriter', 'Rockwell', 'Century Schoolbook', 'AmericanTypewriter-Bold', Georgia, 'Droid Serif',serif;
			font-size: 175%;
			color: #000;
			padding: 3%;
		}			
		.map-caption{
			width: 56.666667%;
			clear: both;
			padding-bottom: 5%;
		}
			.map-caption p{
				font-family: 'Antic Slab','Bookman Old Style','Century Schoolbook', Georgia, 'Droid Serif', serif;
				font-size: 90%;
				clear: both;
				color: #000;
				margin-left: 5%;
				line-height: 140%;
			}
		.name-wrapper {
			height: 174px;
		} 
			.triangle {
		    border-top: 85px solid rgb(67, 142, 172);
		    border-left: 45px solid transparent;
		    border-right: 45px solid transparent;
		    height: 0;
		    position: absolute;
		    width: 0;
		    -webkit-transform:rotate(-38deg);
		    -moz-transform:rotate(-38deg);
    		-ms-transform:rotate(-38deg);
     		-o-transform:rotate(-38deg);
        transform:rotate(-38deg);
		  }
		  .diamond-shield {
				width: 0;
				height: 0;
				border: 50px solid transparent;
				left: -50px;
				border-bottom: 20px solid rgb(95, 138, 192);
				position: relative;
				-webkit-transform:rotate(-38deg);
				-moz-transform:rotate(-38deg);
    		-ms-transform:rotate(-38deg);
     		-o-transform:rotate(-38deg);
        transform:rotate(-38deg);
			}
			.diamond-shield:after {
				content: '';
				position: absolute;
				left: -50px; top: 19px;
				width: 0;
				height: 0;
				border: 50px solid transparent;
				border-top: 70px solid rgb(95, 138, 192);
			}
			.name {
        color: #40403B;
				font-family: 'BebasNeueRegular','Arial Narrow','Futura-CondensedMedium', 'Droid Sans', sans-serif;
				font-size: 200%;
				float: left;
				line-height: 97%; 
        margin-top: 16px;
        margin-bottom: 20px;
        position: relative;
			}
			/* projects.css .project-description */
			.description {
				color: #000000;
				float: left;
				font-size: 80%;
				line-height: 140%;
        margin-top: 16px;
        margin-left: 43px;
				width: 45%;
				padding: 1% 0% 0% 5%;
			}
      .caption{
        clear: both;
        color: rgb(137, 139, 121);
        font: 77% "Cutive Mono", monospace;
        line-height: 140%;
      }		
	footer{
		border-top: rgb(191, 192, 186) solid 1px;
		clear:both;
		color: rgb(117, 117, 117);
		font-size: 90%;
		height: 250px;
		margin: 0 auto;
		text-align: center;
		padding: 80px 0 2% 0;
		width: 400px;
	}
		footer div {
			margin: 0 auto;
			padding: 0% .833333% .833333% .833333%;
		}	
		footer h6 {
			font-family:'nevisBold', 'Arial Black', 'GillSans-Bold', 'Droid Sans', sans-serif;
			text-transform: uppercase;
			font-size: 80%;
			padding-bottom: 2em;
		}
		footer a, footer p{
			font-family: 'Antic Slab','Bookman Old Style','Century Schoolbook', Georgia, 'Droid Serif', serif;
			font-weight: normal;
			color: #2a2a2a;
			font-size: 82%;
			letter-spacing: .06em;
		}
		footer a{
			line-height: 170%;
		}
		footer a:hover {
			color: #9E4011;
		}	
		footer p {
			line-height: 143%;
		}
		
			/* .bottom is the class that's added to .footer-four so that there is enough room for the slidedown address paragraph*/		
			.bottom {
				padding-bottom:10%;
			}				
				#address {
					display: none;
					position: absolute;
					background: gray;
					color: #fff;
					padding: 1%;
				}				
		.footer-five {
			color: #2a2a2a;
			font: 70% 'Antic Slab','Bookman Old Style','Century Schoolbook', Georgia, 'Droid Serif', serif;
			font-weight: normal;
			float: right;
			margin-top: 50%;
			width: 10%;
		}
		#connect .active-page .link-circle-fill, #blog .active-page .link-circle-fill {
	    background: #4D698A;
	    color: #4D698A;
	  }

		#splash{
			margin: 12% auto;
			text-align: center;
			height: 100%;
			position: relative;

			display: none;
		}
		#splash-text{
			font-family: "Cutive Mono", monospace;
		}
		#splash-img{
			margin-top: 60px;
		}

	  
/*-------------------------MEDIA QUERIES-----------------------*/

@media screen and (max-width: 952px) {
	#page {
		width: 94%;
		}
}

@media screen and (max-width: 825px) {

	/*container for max-width of page*/
	#page {
		margin: 5px auto;
		width: 95%; /*width proportional of the viewport size*/
		max-width: 1240px; /*maxes the page size*/
		color: #000;
		background:#f2efe4;
		}
}

@media screen and (max-width: 675px) {

	#page {
		width: 93%;
		}
	
}
@media screen and (max-width: 620px){
	.mobile-hide {
		display: none;
	}
}

@media screen and (max-width: 522px) {	
	#page {
		width: 90%;
		}
}




/*SMARTPHONE PORTRAIT*/
@media screen and (max-width: 400px) {
	.border {
		border:solid 4px #9E4011;
		max-width: 100%;/*i don't understand this. but it works. it makes the border smaller than body width*/
		margin: 0px auto;
		}
	/*container for max-width of page*/
	#page {
		margin: 2px auto;
		width: 97%; /*width proporitonal of the viewport size*/
		max-width: 1240px; /*maxes the page size*/
		background:#f2efe4;
	
		}
	}