/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls.com/menu/photo_click.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

body { margin: auto; padding: 0; font-family: Helvetica, sans-serif;}


/*The whole gallery: Includes spot for large view, thumbnails, and descriptive text.*/
/*#gallery {width:750px; height:360px; position:relative; border:1px solid #ddd; background:#f8f8f8;}*/
#gallery {height:550px; position:relative; background:white; }

/*The Box with all the thumbnails*/
/*#gallery ul {list-style:none; padding:5px; margin:0; width:195px; float:right; height:219px; overflow:auto; background:yellow;}*/
#gallery ul {list-style:none; padding:5px; margin:0; width:240px; float:left; overflow:auto;}

/*The Box for a single thumbnail, margin:0 4px 4px 0; border:1px solid white;*/
#gallery ul li {display:inline; width:50px; height:50px; float:left;  cursor:pointer; overflow:hidden;border:1px solid gray;}


/*The thumbnail image width:50px;*/
#gallery ul li img {display:block; width:50px;}

/*The text to be desplayed for each image*/
/*#gallery ul li span {display:none; position:absolute; left:720px; top:285px; width:200px;font-family:verdana, arial, sans-serif; color:#444; font-size:11px; line-height:15px; text-align:justify;}*/
#gallery ul li span {display:none; position:absolute; left:5px; top:410px; width:200px;font-family:verdana, arial, sans-serif; color:#444; font-size:11px; line-height:15px;}
#gallery ul li span b {color:#444;}

/*Unhide the text to be displayed for caption*/
#gallery ul li.click span {display:block;}


/*Needs to be fine tuned*/
/* required for IE5.x and IE6 to display the start image size correctly:height:450px; width:320px; */
#gallery ul li.click i img.defaultF1 {margin:5px auto 0 auto; height:449px; width:615px;  border:1px solid #fff;}
#gallery ul li.click i img.defaultF2 {margin:5px auto 0 auto; height:450px; width:306px;  border:1px solid #fff;}
#gallery ul li.click i img.defaultB {margin:5px auto 0 auto; height:450px; width:300px; border:1px solid #fff;}
#gallery ul li.click i img.defaultA {margin:5px auto 0 auto; height:450px; width:596px; border:1px solid #fff;}
#gallery ul li.click i img.defaultW1 {margin:5px auto 0 auto; height:450px; width:675px; border:1px solid #fff;}
#gallery ul li.click i img.defaultW2 {margin:5px auto 0 auto; height:450px; width:318px; border:1px solid #fff;}

/*switch off a box for a single thumbnail that was clicked */
#gallery ul li.off {display:none;}

/*change the background and border color for box for a single thumbnail that was clicked, #f8f8f8*/
#gallery ul li.click {border:1px solid gray; background:white; cursor:default;}

/*Move the display of thumbnail to original size to top left corner of div GALLERYbackground:yellow; overflow:hidden; */
/*#gallery ul li.click i {position:absolute; left:210px; top:0; width:500px; height:500px;}*/
#gallery ul li.click i {position:absolute; left:250px; top:0; width:500px; height:500px;}

/*Set the properties of the clicked image to be displayed large margin:5px auto 0 auto;*/
#gallery ul li.click i img {margin:5px auto 0 auto; width:auto; height:auto; border:1px solid #fff;}

/*#gallery a.nextPage{position:absolute; left:160px; top:320px; font:10pt Helvetica, sans-serif;}*/


/* nav hyperlinks */
#nav #inactiveL a.headLinks:link {
	font: bold 8pt helvetica, sans-serif;
	color: black;
	background: white;
	text-decoration: none;
	color: rgb(70,75,75);
}
#nav #inactiveL a.headLinks:visited {
	font: bold 8pt helvetica, sans-serif;
	color: black;
	color: rgb(70,75,75);
	text-decoration: none;
}
#nav #inactiveL a.headLinks:hover {
	font: bold 8pt helvetica, sans-serif;
	color: #996699;
	/*color: rgb(70,75,75);*/

}
#nav #activeL a.headLinks:link {
	font: bold 8pt helvetica, sans-serif;
	color: black;
	color: rgb(70,75,75);
	color: #996699;
	text-decoration: none;
}
#nav #activeL a.headLinks:visited {
	font: bold 8pt helvetica, sans-serif;
	color: black;
	color: rgb(70,75,75);
	color: #996699;
	text-decoration: none;
}
#nav #activeL a.headLinks:hover {
	font: bold 8pt helvetica, sans-serif;
	color: black;
	color: rgb(70,75,75);
	color: #996699;
	text-decoration: none;
}

#plinks {
	overflow:hidden;
	display:inline-block;
	padding-right:70px;
}

.highlight {
	padding: 2px 5px 0;
	text-transform: uppercase;
	background-color: #DCDCDC;
}


#navi span {display:none;} 

#navi a.navi:active {background-color: yellow;
	text-decoration:none;}
	
.nava {
	text-transform: uppercase;
	margin:0;
}
.nava a {
	color: rgb(70,75,75);
	text-decoration:none;
	margin: 0 15px 10px 0;
	font-weight: bold;
}
.nava a:hover {
	color: #666;
	text-decoration:underline;
}

.nava a.activeLink {
	color: #996699;
	text-decoration:none;
}

.profilePic img {display:block; width:120px;float:right;margin:0px 10px 10px 10px;border:1px solid gray;}

.logoPic img {display:block; margin:0px 10px 10px 10px;border:1px solid white;}
.logoPic2 img {display:block; margin:0px 10px 10px 10px;border:1px solid white;}

.logoLink a {text-decoration:none;}

a.textLink {text-decoration:none; color:black;font-weight:bold;}
a.textLink:hover {text-decoration:underline;}

a.portLink {font-family: helvetica, sans-serif;text-decoration:underline; color:black;}
a.portLink:hover {background-color: #DDA0DD;}


/*FOR NEXT action*/
.nextBox {
	text-transform: uppercase;
	margin:0;
	display:block;
	position:absolute; left:173px; top:330px;
	font-size:12pt;
	
}
.nextBox a.nextPage1{
	color: #DCDCDC;
	text-decoration:none;
	margin: 0 15px 10px 0;
	font-weight: bold;	
	font-size:15pt;
}
.nextBox a.nextPage1:hover {
	color: #808080;
	text-decoration:underline;
}

.nextBox a.nextPage2 {
	color: #808080;;
	text-decoration:none;
	margin: 0 15px 10px 0;
	font-weight: bold;
	font-size:15pt;	
}
.nextBox a.nextPage2:hover {
	color: #808080;;
	text-decoration:underline;
}

/*FOR NEXT Video action*/
.nextBoxVideo {
	text-transform: uppercase;
	margin:0;
	display:block;
	position:absolute; left:0px; top:330px;
	font-size:12pt;
	color: #808080;
	
}
.nextBoxVideo a.video{
	color: #808080;
	text-decoration:none;
	margin: 0 15px 10px 0;
	font-weight: bold;	
}
.nextBoxVideo a.video:hover {
	color: #808080;
	text-decoration:underline;
}

h4.headliner {font-family: helvetica, sans-serif;color: #808080;}
h2.pink {color: #FFC0CB;}
a.pink {color: #FFC0CB; text-decoration:none; font-size:24px;}
a.pink:hover {color: #FFC0CB; text-decoration:underline; font-size:24px;}
p.soft {font-size: 8pt; font-family: helvetica, sans-serif;color: #808080;}
.mix {color: white;}

/* Slide show stuff */
#slideshow1 {height:450px; position:relative; background:white; }
pre { text-align: left; overflow: visible }
code { background-color: white }
pre code { background-color: white }

/* .pics { width: 332px; padding:0; margin:0; overflow: hidden }
.pics img { background-color: white; top:0; left:0 }
.pics img {
	-moz-border-radius: 10px; -webkit-border-radius: 10px;
}
*/

.pics {padding:0; margin:0; overflow: hidden}
.pics img { background-color: white; top:0; left:0 }
.pics img {
	-moz-border-radius: 10px; -webkit-border-radius: 10px;
}

/* p.welcome { font-size: 20pt; font-size: 200%; line-height: 150%; text-align: justify; margin-top: 1em;} */
p.welcome { font-size: 16pt;}
li.summary { font-size: 14pt; color: #707070}

#goRight {float: right; width: 100px;}

h4.wedLabel {color: darkgray; font-weight: bold;}

#grayBlock {background-color: #F8F8F8; height:225px; margin-bottom:25px; padding:5px;}
#grayBlockShort {background-color: #F8F8F8; height:250px; margin-bottom:25px; padding:10px;-moz-border-radius: 10px; -webkit-border-radius: 10px;}
#grayBlockLong {background-color: #FFF0F5; height:430px; margin-bottom:25px; padding:10px;-moz-border-radius: 10px; -webkit-border-radius: 10px;}

#onPicLink {position:absolute; left:250px; top:650px; width:250px;}

a.onPic {font-family: helvetica, sans-serif;text-decoration:none; color:black; font-size: 14pt;}
a.onPic:hover {text-decoration:none;background-color: #DDA0DD;}

p.clients { font-size: 120%; line-height: 150%; text-align: justify; margin-top:1em;}

/**** Masonry CSS ****/

.wrap {
    background: #FFF;
    border: 0px solid #456;
    padding: 10px;
	margin-bottom: 20px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.wrap:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.box {
    margin: 5px;
    padding: 5px;
    background: #D8D5D2;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    font-size: 11px;
    float: left;
}

.col1 { width: 80px; }
.col2 { width: 180px; }
.col3 { width: 280px; }
.col4 { width: 380px; }
.col5 { width: 480px; }

.col1 img { max-width: 80px; }
.col2 img { max-width: 180px; }
.col3 img { max-width: 280px; }
.col4 img { max-width: 380px; }
.col5 img { max-width: 480px; }