@charset "utf-8";
/* CSS Document */

body	{margin:0; 
		background-color:#55C0A5;
		font-family:Arial, Helvetica, sans-serif;}
	
#top	{text-align:right;
		height:30px;}
	.TopNav {display:inline;
			margin-right:20px;}
	.TopNav a {color:#FFFFFF;
			text-decoration:none;
			font-size:20px;}
	.TopNav a:hover {color:#000;}

#side {margin-left:20px;
		width:300px;
		margin-right:20px;
		position:relative;
		}		
	#nav 	{height:600px;
			background-color:#FFFFFF;
			border:#FFF thick solid;
			border-radius:20px;}
	#nav a .navWeb {height:50px;
			width:300px;
			background-image:url(pics/navWebsites.png);
			background-repeat:no-repeat;
			transition: background-image 0.25s ease-in-out;
			-webkit-transition: background-image 0.25s ease-in-outt;
			-moz-transition: background-image 0.25s ease-in-out;
			-o-transition: background-image 0.25s ease-in-out;
			-ms-transition: background-image 0.25s ease-in-out; }
		#nav a:hover .navWeb {background-image:url(pics/webPop.png);}
	#nav a .navSocial {height:50px;
			width:300px;
			background-image:url(pics/navSocial.png);
			background-repeat:no-repeat;
			transition: background-image 0.25s ease-in-out;
			-webkit-transition: background-image 0.25s ease-in-outt;
			-moz-transition: background-image 0.25s ease-in-out;
			-o-transition: background-image 0.25s ease-in-out;
			-ms-transition: background-image 0.25s ease-in-out; }
		#nav a:hover .navSocial {background-image:url(pics/socialPop.png);}
	#nav a .navPromo {height:50px;
			width:300px;
			background-image:url(pics/navPromo.png);
			background-repeat:no-repeat;
			transition: background-image 0.25s ease-in-out;
			-webkit-transition: background-image 0.25s ease-in-outt;
			-moz-transition: background-image 0.25s ease-in-out;
			-o-transition: background-image 0.25s ease-in-out;
			-ms-transition: background-image 0.25s ease-in-out; }
		#nav a:hover .navPromo {background-image:url(pics/promoPop.png);}
	#nav a .navMobile {height:50px;
			width:300px;
			background-image:url(pics/navMobile.png);
			background-repeat:no-repeat;
			transition: background-image 0.25s ease-in-out;
			-webkit-transition: background-image 0.25s ease-in-outt;
			-moz-transition: background-image 0.25s ease-in-out;
			-o-transition: background-image 0.25s ease-in-out;
			-ms-transition: background-image 0.25s ease-in-out; }
		#nav a:hover .navMobile {background-image:url(pics/mobilePop.png);}
	#nav a .navSearch {height:50px;
			width:300px;
			background-image:url(pics/navSearch.png);
			background-repeat:no-repeat;
			transition: background-image 0.25s ease-in-out;
			-webkit-transition: background-image 0.25s ease-in-outt;
			-moz-transition: background-image 0.25s ease-in-out;
			-o-transition: background-image 0.25s ease-in-out;
			-ms-transition: background-image 0.25s ease-in-out; }
		#nav a:hover .navSearch {background-image:url(pics/searchPop.png);}
	#nav a .navPrint {height:50px;
			width:300px;
			background-image:url(pics/navPrint.png);
			background-repeat:no-repeat;
			transition: background-image 0.25s ease-in-out;
			-webkit-transition: background-image 0.25s ease-in-outt;
			-moz-transition: background-image 0.25s ease-in-out;
			-o-transition: background-image 0.25s ease-in-out;
			-ms-transition: background-image 0.25s ease-in-out; }
		#nav a:hover .navPrint {background-image:url(pics/printPop.png);}
	#nav ul {list-style:none;
		margin:0;
		padding:0;}
		
	#footer {}
		
#content {position:absolute;
		top:30px;
		bottom:20px;
		height:auto;
		min-height:600px;
		right:20px;
		left:340px;
		width:auto;
		min-width:700px;
		background-color:#FFFFFF;
		border:#FFF thick solid;
		border-radius:20px;}
		



		
#blanketContact {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
   min-width:1050px;
}
#blanketLinks {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
   min-width:1050px;
}

#blanketAbout {
   background-color:#111;
   opacity: 0.65;
   *background:none;
   position:absolute;
   z-index: 9001;
   top:0px;
   left:0px;
   width:100%;
   min-width:1050px;
}

#popUpContact {
	top:50px;
	left:30px;
	position:absolute;
	background-color:#FFFFFF;
	width:1000px;
	height:450px;
	border:5px solid #55c0a5;
	border-radius:75px;
	z-index: 9002;
}
#popUpLinks {
	top:50px;
	left:360px;
	position:absolute;
	background-color:#FFFFFF;
	width:400px;
	height:520px;
	border:5px solid #55c0a5;
	border-radius:75px;
	z-index: 9002;
}
#popUpAbout {
	top:50px;
	left:30px;
	position:absolute;
	background-color:#FFFFFF;
	width:1000px;
	height:550px;
	border:5px solid #55c0a5;
	border-radius:75px;
	z-index: 9002;
}

	.map {border:#999 2px solid;
		border-radius:20px;
		background-color:#55C0A5;
		margin-top:25px;
		float:left;
		margin-left:20px;
		padding-top:20px;
		padding-bottom:5px;
	}
	
	.contactinfo {float:left;
		width:350px;
		margin-left:25px;
		font-size:16px;
		margin-top:25px;
		border-top:#55C0A5 20px solid;
		text-align:left;
	}
	.contactinfo a {color:#55C0A5;
		text-decoration:none;
	}
	.contactinfo a:hover {text-decoration:underline;
	}
	
	#popUpLinks a #fbook {background-image:url(images/fbook.png);
			width:100px;
			height:100px;
			background-color:#55C0A5;
			border-radius:50%;
			border: #55C0A5 5px solid;
			float:left;
			margin-left:75px;
			margin-top:25px;}
		#popUpLinks a:hover #fbook {background-color:#3B5998;}
	#popUpLinks a #twitter {background-image:url(images/twitter.png);
			width:100px;
			height:100px;
			background-color:#55C0A5;
			border-radius:50%;
			border: #55C0A5 5px solid;
			float:left;
			margin-left:25px;
			margin-top:25px;}
		#popUpLinks a:hover #twitter {background-color:#32CCFE;}
	#popUpLinks a p.goingGreen {color:#55C0A5;
		border:none;}
		#popUpLinks a:hover p.goingGreen {color:#028653;}
	#popUpLinks a p.luvLocal {color:#55C0A5;
		border:none;}
		#popUpLinks a:hover p.luvLocal {color:#F6B80A;}
	#popUpAbout .aboutInfo {width:500px;
			float:left;
			margin-left:20px;
			margin-right:20px;}
	#popUpAbout h3 {text-align:left;
			color:#55C0A5;
			font-size:20px;}
	#popUpAbout p {text-align:left;}
		#popUpAbout .darcy {width:450px; 
				float:left;
				height:450px;
				border-left:#55C0A5 5px solid;
				}
		#popUpAbout .darcy img {width:250px; float:left;}
		#popUpAbout .darcy h4 {text-align:left; float:left;
				color:#55C0A5;
				font-size:16px;
				margin-bottom:0;}
		#popUpAbout .darcy p {text-align:left; float:left; width:180px; margin-right:20px; font-size:14px;}
		

#main {margin:0;
		padding:0;
		position:absolute;
		right:auto;
		left:auto;
		top:20px;
		overflow-x:hidden; 
		overflow-y:scroll;
		bottom:20px;
		border-top: #55C0A5 5px solid;
		border-bottom: #55C0A5 5px solid;
}
	.portfolio {width:40%;
		min-width:450px;
		margin-top:25px;
		position:relative;
		left:0;
		overflow-y:scroll;
		max-height:600px;
		overflow-x: hidden;
		margin-left:20px;
		float:left;
	}

	.portfolio a {margin-right:20px;
	}
	.portfolio a img {border:#999999 2px solid;
		margin-bottom:20px;
	}
	.text {width:40%;
		height:550px;
		position:relative;
		float:left;
		margin-right:20px;
		margin-left:20px;
		min-width:325px;
	}
	.text a {color:#55C0A5;}
	.portfolio p {font-size:12px; 
		float:right;
		margin:5px;}
	.portfolio h4 {margin:5px;}
	
/* ----------------------------- HOVER FOR Portfolios -------------------------------- */

.box {
    position: relative;
	float:left;
}
/* ------------------------------------------------------- Websites ----- */	
.webboxright {
    display: none;
    position: absolute;
	left:230px;
	top:2px;
	background-color:#BE2326;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#FFF;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .webboxright {
		display: block;
	}
.webboxleft {
    display: none;
    position: absolute;
	left:2px;
	top:2px;
	background-color:#BE2326;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#FFF;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .webboxleft {
		display: block;
	}
/* ----------------------------------------------------- Print Media ----- */
.printboxright {
    display: none;
    position: absolute;
	left:230px;
	top:2px;
	background-color:#6FCDDF;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#000;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .printboxright {
		display: block;
	}
.printboxleft {
    display: none;
    position: absolute;
	left:2px;
	top:2px;
	background-color:#6FCDDF;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#000;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .printboxleft {
		display: block;
	}	
/* ---------------------------------------------------- Social Media ----- */
.socialboxright {
    display: none;
    position: absolute;
	left:230px;
	top:2px;
	background-color:#008C4A;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#FFF;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .socialboxright {
		display: block;
	}
.socialboxleft {
    display: none;
    position: absolute;
	left:2px;
	top:2px;
	background-color:#008C4A;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#FFF;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .socialboxleft {
		display: block;
	}	
/* --------------------------------------------- Mobile Apps ----- */
.mobileboxright {
    display: none;
    position: absolute;
	left:230px;
	top:2px;
	background-color:#384FA2;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#FFF;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .mobileboxright {
		display: block;
	}
.mobileboxleft {
    display: none;
    position: absolute;
	left:2px;
	top:2px;
	background-color:#384FA2;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#FFF;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .mobileboxleft {
		display: block;
	}	
/* ------------------------------------------------- Promotionals ----- */
.promoboxright {
    display: none;
    position: absolute;
	left:230px;
	top:2px;
	background-color:#5BA1A3;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#fff;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .promoboxright {
		display: block;
	}
.promoboxleft {
    display: none;
    position: absolute;
	left:2px;
	top:2px;
	background-color:#5BA1A3;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#fff;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .promoboxleft {
		display: block;
	}	
/* ----------------------------------------------- Search Engine ----- */	
.searchboxright {
    display: none;
    position: absolute;
	left:230px;
	top:2px;
	background-color:#F9A023;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#000;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .searchboxright {
		display: block;
	}
.searchboxleft {
    display: none;
    position: absolute;
	left:2px;
	top:2px;
	background-color:#F9A023;
	opacity:0.75;
	filter:alpha(opacity=75); /* For IE8 and earlier */
	color:#000;
	width:200px;
	height:130px;
    /* More positioning, heigh, width, etc */
}
	a:hover .searchboxleft {
		display: block;
	}
	
/* ------------------------------ IMAGE GALLERY ---------------------- */
#imageGallery {
  position:relative;
  margin:25px;
  width:450px;
  background-repeat:no-repeat;
  float:left;
}
	.galleryPromo {background-image:url(promotional/portfolio/back.png);}
	.galleryPrint {background-image:url(printmedia/portfolio/back.png);}
.imageZoom ul {
  height:300px;
  padding:10px;
  margin:0;
  border: 1px #CCC solid;
}
.imageZoom ul li {
  list-style: none;
  margin:0;
  padding:0;
  float:left;
  width:0;
  height:131px;
}
.imagePreview {
  height:60px;
  margin:0;
  padding:0;
  border-top: 5px solid #5BA1A3;
  border-bottom: 5px solid #5BA1A3;
  border-right: 1px #CCC solid;
  border-left: 1px #CCC solid;
  overflow-y:scroll;
}
.imagePreview ul {
  margin:0;
  margin-left:5px;
  padding:0;
  list-style: none;
}
.imagePreview ul li{
  float: left;
  text-align: center;
  margin:13px 5px;
  padding:0;
  background: #f0f0f0;
} 

.imagePreview ul li img {
  border: 1px solid #9f9f9f;
  padding:2px;
  margin:0;
}
.imagePreview ul li a {
  outline: 0;
}
.imagePreview ul li a:hover img,
.imagePreview ul li a:active img,
.imagePreview ul li a:focus img {
  border-color:#fff;
} 

.imageZoom ul li img {
  margin:0;
  width:0;
  height:0;
  border:0;
  overflow:hidden;
  ...
} 

.imageZoom ul li img {
  ...
  -moz-transition: width 1s ease;
  -webkit-transition: width 1s ease;
  -o-transition: width 1s ease;
  transition: width 1s ease;
} 

.imageZoom ul li:target img {
  height:300px;
  width:425px;
  border:1px solid #f0f0f0;
  
}