/* PORTFOLIO STYLESHEET 
	AUTHOR: ELIZABETH BEST
	CREATED 10/21/2015
	MODIFIED: 01/15/2022

	FILE NAME: portfolioStyles.css
*/

body {
		margin:0 auto;
		max-width:85%;

		background:rgb(123, 200, 159);
		background:-webkit-linear-gradient(rgba(123, 200, 159,1) 15%, rgba(123, 200, 159, 0) 95%) no-repeat;
		background:-moz-linear-gradient(rgba(123, 200, 159,1) 15%, rgba(123, 200, 159, 0) 95%) no-repeat;
		background:-o-linear-gradient(rgba(123, 200, 159,1) 15%, rgba(123, 200, 159, 0) 95%) no-repeat;
		background:linear-gradient(rgba(123, 200, 159,1) 15%, rgba(123, 200, 159, 0) 95%) no-repeat;

		font-family:'BRLNSR';
	}

h2  {
		font-size:1.7em;
	}

h3  {
		font-size:1.35em;

	}

/* LOGO AREA */
	header {
		font-family: Magneto;
		margin-left:4.5%;
		margin-bottom:11.2px;
		background:rgb(123, 200, 159);
	}

	div.header_text {
		margin:0;
		padding:0;
		padding-left:3.5%;
		width:53%;
		float:left;
	}

	header h1 {
		margin:0;
		padding-bottom:.2em;
		font-size: 2.25em;
		font-weight:700;
		color:#810f88;
		text-shadow: 4px 4px 5px #c5dc93, -4px 4px 5px #c5dc93, 4px -4px 5px #c5dc93, -4px -4px 5px #c5dc93;
		border-bottom:#810F88 solid 3px;
	}

	header p {
		margin-top:0;
		padding-top: .25em;
		font-size: 1.15em;
		color:#e3e48e;
		text-align:right;
		text-shadow: 3px 3px 4px #7f5891, -3px 3px 4px #7f5891, 3px -3px 4px #7f5891, -3px -3px 4px #7f5891;
	}

	header img {
		margin:0;
		padding:0;
	}

	header a, nav a {
		text-decoration:none;
	}

	#printLogo, #show_menu, img#menu_icon{
		display:none;
	}	

	#logoSeal {
		float:left;
	}

	#portraitRt {
	display:block;
	float: right;
	margin-left: 1.5%;
	margin-right:2.5%;
	width: 6.6%;
	}		

/* NAVIGATION FORMAT */
	nav {
		clear:both;
	}

	nav li {
		list-style:none;
	}

	nav.MainNavBar  > ul {
		margin-left: 27%;
		padding:0;
		text-align:center;
	}

	nav.MainNavBar a {
		text-decoration:none;
		font-size:1.4em;
		font-weight:700;
		color:rgb(106,67,25);
		padding: 10px 2px;
		width: 99.75%;
		display: block;
		margin-bottom:0;
	}

	nav.MainNavBar ul li.NavLinks {
		float:left;
		margin-top: -2.1em;
		text-align:center;
		width: 17%;
		position:relative;

		border-bottom: 3px solid #83693B;
		border-right: 3px solid #83693B;

		background:#dddea3;
		background:-webkit-linear-gradient(top, #dddea3, #808150);
		background:-moz-linear-gradient(top, #dddea3, #808150);
		background:-o-linear-gradient(top, #dddea3, #808150);
		background:linear-gradient(top, #dddea3, #808150);
		-webkit-background-size:100% 175%;
		-moz-background-size:100% 175%;
		-o-background-size:100% 175%;
		background-size:100% 175%;

		-webkit-transition:all 0.45s;/* makes the drop down reveal slower for fx */
		-moz-transition:all 0.45s;
		-o-transition:all 0.45s;
		transition:all 0.45s;
	}

	nav.MainNavBar ul li.NavLinks:hover {
		-webkit-background-position:0 100%;
		-moz-background-position:0 100%;
		-o-background-position:0 100%;
		background-position:0 100%;

		border-color:#dddea3;
	}

	nav.MainNavBar li.NavLinks:hover > a {
		color:rgb(248,249,202);
		text-shadow:rgb(106,67,25) 3px 3px 5px;
		cursor:pointer;
	}

/*Hides sub menu links until hover */
	li.NavLinks .subNav {
		left:-99999px;
		display:block;
		z-index:99;
		width: 100%;
		position: absolute;
		background: #dddea3;
		margin: 0;
		}

	li.NavLinks:hover .subNav  {
		left:0;
	}

	nav.MainNavBar .subNav a {
		font-size:1.1em;
		padding: 6px 0;
	}

	li.NavLinks ul {
		padding:0;
	}

	.subNav ul.CategoryLevel li {
		float: none;
		width: auto;
	}
	
	.subNav a:hover {
		background:#808150;
		color:rgb(248,249,202);
	}

/*hides home page button */
	li.homePg {
		display:none;
	}
	
/*  END of MainNAV  */	


/*  SUB MENUES FOR MAIN NAV AND SIDEBAR NAV PANEL FORMATTING */	
	nav.SideNav {
		margin:2% 0% 0% 2.75%;
		background-color:rgba(198,199,123,0.44);
		border: 2pt #898989 solid;
		border-radius:10px;
		clear:both;
		float:left;
		width: 18.5%;
		padding: 0 .1% 2.1% 0;
	}

	nav.SideNav p, aside p {		/*  ALSO INCLUDES IMAGE DESCRIPTION TEXT FORMATTING  */
		color:rgb(148,93,34);
		font-size:1.05em;
		padding:2%;
		text-align:left;
	}

	nav.SideNav h2, nav.SideNav a, nav.subNav a, a h2 {
		color:rgb(106,67,25);
		text-align:center;
		text-decoration:none;
	}

	nav.SideNav ul.CategoryLevel, nav.sub ul.CategoryLevel {
		margin-bottom:0;
		padding-left:7%;
	}

	nav.SideNav ul.CategoryLevel li a.CategoryLevelLnk, nav.subNav ul.CategoryLevel li a.CategoryLevelLnk  {
		color: #7C4774;
		font-size: 1.3em;
		padding-bottom: .25em;
		font-weight: 700;
		/*margin-left: 5%;*/
		display: block;	
		border-bottom: solid 2px;
	}

/*For when Sub Menu items are not links */
	a.SubLvlNoLink:hover {
	background:rgba(198,199,123,0.44);
	cursor:default;
	}

	nav.SideNav ul.subCategory {
		padding-left:15%;
	}

	nav.SideNav h2.pgLinks:hover {
		background-color:rgb(214,215,134);
	}

	nav.SideNav ul.subCategory li a {
		color:rgb(148,93,34);
		font-size: 1.15em;
		line-height: 1.35em;
		list-style-type:none;
		padding-left:0.75%;
	}	

	nav.SideNav li a.currentPage {
		color:rgb(248,249,202)
	}
	
	nav.SideNav li a:hover {
		text-decoration:underline;
		color: rgb(106,67,25);
		list-style-type:disc;
	}

	nav.SideNav li a.currentPage:hover {
		color:rgb(248,249,202);
		font-weight:normal;
		letter-spacing:normal;
		list-style-type:none;
	}
		
/*  MAIN CONTENT AREA  */

	/*.SideNav, #MainContent, .wrapper, #FeatureImage, #FeatureImage h2, #FeatureImage a, .Samples, .Samples img, #bannerImg, #ImgDesc {
		z-index: -99;
		position:relative;
		}*/

	section {
		background-color:rgba(248,249,202,0.83);
		margin:2% 0 2% 2%;
		float:left;
		padding:0.35%;
		width:73%;
	}

	.Index section {
		float:none;
		margin:4.5% auto;
		width:80%;
	}	
		
/*IMAGE AREA */		
	article {
		background-color:rgba(106,67,25,0.9);
		margin:3% auto;
		padding:0 1.5% 0% 1.5%;
		width:89%;
		overflow:hidden;
	}
	
	article h2 {
		padding-top:0;
		padding-bottom:0.5em;
		margin-bottom:0.5em;
		color:rgb(214,215,134);
		text-align:center;
		font-weight:heavy;
		line-height:1.25em;
	}

	article h2.leftAlign-h2 {
		padding-bottom:1%;
		padding-left:4%;
		text-align:left;
		margin-bottom:0;
	}

	article h3 {
		color:rgb(248,249,202);
		padding:1.15%;
		border:3px solid #7cc89f;
		margin:2px 5% 0 30%;
	}
		
	article p {
		font-size:1.15em;
		color:rgba(214,215,134,0.9);
	}

	aside h2, aside h3 {
		padding-top:0;
		padding-bottom:0;
		margin-bottom:0.35em;
		color: #7C4774;
	}

	aside h2 {
		text-align:center;
		line-height:1.25em;
	}

	aside p {
		padding-left:4%;
		margin-top:0%;
		padding-bottom:0;
	}

	aside ul {
		padding-left:8%;
		color:rgb(148,93,34);
	}


/*GALLERY STYLE LAYOUT */	
	article div.Samples {
		height:210px;
		width:38%;
		margin: 0 4% 2em 4%;
		overflow:hidden;
		background: rgba(227,228,142,.75);
	    border: 12px double #810F88;
		
		display:-webkit-box;
		display:-moz-box;
		display:-o-box;
		display:box;

		-webkit-box-pack:center;
		-moz-box-pack:center;
		-o-box-pack:center;
		box-pack:center;

		-webkit-box-orient:vertical;
		-moz-box-orient:vertical;
		-o-box-orient:vertical;
		box-orient:vertical;

		-webkit-box-shadow: rgba(0,0,0,.4) 5px 5px;
		-moz-box-shadow: rgba(0,0,0,.4) 5px 5px;
		-o-box-shadow: rgba(0,0,0,.4) 5px 5px;
		box-shadow: rgba(0,0,0,.4) 5px 5px;
		-webkit-transition:box-shadow .25s;
		-moz-transition:box-shadow .25s;
		-o-transition:box-shadow .25s;
		transition:box-shadow .25s;
	}
	
	article div.Center {
		height: 300px;
		width: 65%;
		margin: 0 auto 2em;	
	}	

	.Left {
		float:left;
	}

	.Right {
		float:right;
	}
	
	article > img, article a > img	{
		display:block;
		margin:0.5% auto 3% auto;
		max-width:93%;
	}
		
	.Samples img {
		display:block;
		max-width:100%;
		margin:0 auto;
		
		-webkit-transition-duration:0.5s;
		-moz-transition-duration:0.5s;
		-o-transition-duration:0.5s;
		transition-duration:0.5s;
	}	
	
	.Banner img{
		width:initial;
		max-width:initial;
		max-height:100%;
		height:auto;
		overflow:hidden;
	}
	
	article div.Samples:hover, article div.Samples:active {
		box-shadow:rgb(255, 255, 255) 5px 5px 25px,rgb(255, 255, 255) -5px -5px 25px;
	}
	
	.Samples:hover img {
		max-width:80%;
	
		-webkit-transform:max-width;
		-moz-transform:max-width;
		-o-transform:max-width;
		transform:max-width;
	}

	.Banner:hover img {
		max-width:initial;
		max-height:60px;
	
		-webkit-transform:max-height;
		-moz-transform:max-height;
		-o-transform:max-height;
		transform:max-height;
	}
	
	.Sites iframe {
		height:250px;
		max-width:100%;
	}

	.tallImgs {				/* originally used for Hawaii ad on Portfolio index page  */
		display:inline;
		padding-left:7.5%;
		max-height:175px;
	}

	.before_afterImgs {		/*  style rule to be used with side-by-side comparisons of works  */
		display:inline;
		padding: 0 2% 2% 6%;
		max-width: 40%
	}

/** STYLING FOR SPECIAL CASES **/
	div.wrapper {
		float: left;
		margin: 2%;
	}

	.home_page section#MainContent {
		width: 85%;
		margin: 0 auto;
		float: none;
	}

	#myPortrait {   /* for ABOUT PAGE (set width for full HD screens to 17%)  */
		padding:0 2% 2% 2%;
		float:left;
		width:22%;
		margin-bottom:0;
	}

	.aboutPg aside h3 {
		padding-left:2.5%;
		margin-bottom:0;
	}
	
	.appContain {   /* for displaying mobile Zoo App */
		margin:auto;
		margin-bottom:2em;
		max-width:450px;
		height:750px;
		border:solid #000;
		border-width: 3.5em 1.5em 6.5em 1.5em;
		border-radius:20px;
		background:#333;
	}
	
	.appContain iframe {
		width:99%;
		height:99%;
		margin:auto;
	}

/** CONTACT FORM */	
	form {
		width:75%;
		background-color:#E3E48E;
		margin:0 auto 1.5% auto;
		padding:5%;
	}
	
	form label, form input[type="text"], form  textarea {
		width:85%;
		font-size:1.15em;
		display: block;
		padding: 0.25em 0;
		margin:0 auto;	
	}
	
	form label {
		margin-top:.25em;
	}
	
	form textarea {
		height:150px;
	}
	
	form input[type="text"]:focus, form  textarea:focus {
		-webkit-box-shadow: 0 0 6% rgba(248,249,202,0.83);
		-moz-box-shadow: 0 0 6% rgba(248,249,202,0.83);
		-o-box-shadow: 0 0 6% rgba(248,249,202,0.83);
		box-shadow: 0 0 6% rgba(248,249,202,0.83);
	}

	form input#form_submit {
		margin:0 auto;
		margin-top:1.5em;
		display:block;
		color:rgb(248,249,202);
		text-shadow:rgb(106,67,25) 2px 2px 3px;
		font-size:1.5em;
		font-family:'BRLNSR';
		padding:1.5%;

		background:#808150;
		background:-webkit-linear-gradient(bottom, #dddea3, #808150);
		background:-moz-linear-gradient(bottom, #dddea3, #808150);
		background:-o-linear-gradient(bottom, #dddea3, #808150);
		background:linear-gradient(bottom, #dddea3, #808150);

		-webkit-background-size:100% 175%;
		-moz-background-size:100% 175%;
		-o-background-size:100% 175%;
		background-size:100% 175%;

		-webkit-border-radius:10px;
		-moz-border-radius:10px;
		border-radius:10px;
	}

	form input#form_submit:hover {
		-webkit-background-position:0 100%;
		-moz-background-position:0 100%;
		-o-background-position:0 100%;
		background-position:0 100%;
	
		color:rgb(106,67,25);
		text-shadow:rgb(248,249,202) 2px 2px 3px;
		
		-webkit-box-shadow: 0 0 6% rgba(248,249,202,0.83);
		-moz-box-shadow: 0 0 6% rgba(248,249,202,0.83);
		-o-box-shadow: 0 0 6% rgba(248,249,202,0.83);
		box-shadow: 0 0 6% rgba(248,249,202,0.83);
	}
	
/*FOOTER AREA */	
	footer {
		clear:both;
		float:right;
		margin:0 2.5% 1% 1%;
		text-align:right;
		width:100%;
	}

/**** MEDIA QUERIRES ****/

	@media screen and (min-width:1921px) {
		body {
			width:75%;
		}
	}
	
	@media screen and (max-width:1536px) {
		article div.Center {
			height:370px;
		}	

	}

	@media screen and (min-width:1441px) {
		#myPortrait {
			width:17%;
		/* for full HD screens make width 17%  */
		}
		article div.Center {
			height:350px;
		}			
	}
	
	@media screen and (max-width:1360px) {
		body {
			max-width:90%;
		}

		article div.Center {
			height:310px;
		}	

	}

	@media screen and (max-width:1281px) {
		body {
			max-width:95%;
		}
	}

	@media screen and (max-width:1049px) {
		article div.Works {		/*removing center img div for 2 column layout */
			width:47.3%;
		}
		
		article div.Middle {
			display:none;
		}

	}
	
	@media screen and (max-width:1030px) {
		#portraitRt {
			display:none;
		}
		
		div.header_text {
		width:72%;
		}
	}

	@media screen and (max-width:980px) {
		nav.SideNav {
			width:28%;
		}
		
		section {
			width:63%;
		}

		article div.Samples, article div.Center {
			margin: 5% auto;
			float: none;
			width: 68%;
			max-height:250px;
		}
	
		article div.Middle {
			display:block;
		}
	}
	
	@media screen and (max-width:875px) {
		#logoSeal {
			max-width:21%;
		}		
		
		nav.MainNavBar a {
			font-size:1.5em;
		}
		
		.header_text h1 {
			font-size:2.25em;
		}
		
		.header_text p {
			font-size:1.25em;
		}
		
		#middleSection {
			max-width:68%;
		}

	}

	@media screen and (max-width:781px) {
		article div.Samples, article div.Center {
			max-height:220px;
		}
	}
	
	@media screen and (max-width:650px) {
		article div.Samples, article div.Center {
			width:80%;
			max-height:200px;
		}
	}
	
	@media screen and (max-width:680px) {
		div.header_text {
			width:72%;
		}
		
		.header_text h1 {
			font-size:2.25em;
		}
		
		.header_text p {
			font-size:1.1em;
		}
		
		nav.MainNavBar > ul {
			margin-left: 0;
		}
		
		/*nav "unfloat" */
		nav.MainNavBar ul li.NavLinks {
			float:none;
			margin:auto;
			margin-left:auto;
			width:65%;
		}
		li.homePg {
			display:block;
		}
	}
	
	@media screen and (max-width:610px) {
		nav.SideNav { /*hides side nav on small screens */
			left:-599px;
			position:absolute;
		}

		/*nav.MainNavBar ul li.NavLinks {
			width:95%;
			
		}
*/
		section {
			width:95%;
		}
		article div.Samples, article div.Center {
			max-height:175px;
		}	

	}

	@media screen and (max-width:530px) {
		#logoSeal {
			/*float:none;*/
		}

		.header_text h1 {
			font-size: 2.15em;
		}

		div.header_text {
			/*float:none;*/
			width:70%;
		}

		article div.Samples {
			max-height:160px;
		}	
	}

	@media screen and (max-width:505px) {
		#logoSeal {
			max-width:23%;
		}

		.header_text h1 {
			font-size: 1.85em;
		}
	}

	@media screen and (max-width:435px) {
		#logoSeal {
			max-width:25%;
		}

		.header_text h1 {
			font-size: 1.85em;
		}
	}