html {margin:0 auto; padding-top:1em; height:100%; width:100%; display:table; background-image:url(assets/images/background.jpg); background-repeat:repeat-x; background-position:bottom;}
div#container {min-width:720px; width:720px; margin:0 auto; margin-bottom:70px;}
ul#secondnav {float:right; margin-top:-4.5em; margin-bottom:0;}
ul#secondnav li {display:inline;}
ul#secondnav li a {outline:none;}
ul#secondnav li a img {border:0;}
ul#secondnav li:last-child {margin-left:5px;}
ul#secondnav li a.contact {display:inline-block; background-image:url(assets/images/contact-link.gif); background-repeat:no-repeat; background-position:0 0; width:64px; height:52px;}
ul#secondnav li a.portfolio {display:inline-block; background-image:url(assets/images/home-link.gif); background-repeat:no-repeat; background-position:0 0; width:56px; height:52px;}
ul#secondnav li a.quotation {display:inline-block; background-image:url(assets/images/quotation.gif); background-repeat:no-repeat; background-position:0 0; width:56px; height:52px;}
ul#secondnav li a:hover.contact {background-image:url(assets/images/contact-link-over.gif);}
ul#secondnav li a:hover.portfolio {background-image:url(assets/images/home-link-over.gif);}
ul#secondnav li a:hover.quotation {background-image:url(assets/images/quotation-link-over.gif);}
ul#mainnav {background-color:#fff; text-align:center; -webkit-border-radius:7px; -moz-border-radius:7px; -o-border-radius:7px; border-radius:7px; border:1px solid #00a5de; padding:.5em; margin-top:-1em; -moz-box-shadow: 0 0 10px #888; -webkit-box-shadow: 0 0 10px #888; -o-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888;}
ul#mainnav li {display:inline; padding:1em 1em; font-family:"Myriad Pro", "Lucida Grande", sans-serif; font-size:19px; font-weight:500;}
ul#mainnav li a {color:#000; text-decoration:none; outline:none; text-transform:capitalize;}
ul#mainnav li a:hover {color:#00a5de; border-bottom:1px solid #b2d234;}
ul#mainnav li a:active {color:#b2d234; border-bottom:1px solid #00a5de;}
div#body-content {background-color:#fff; -webkit-border-radius:18px; -moz-border-radius:18px; -o-border-radius:18px; border-radius:18px; border:1px solid #00a5de; padding:2em; -moz-box-shadow: 0 0 10px #888; -webkit-box-shadow: 0 0 10px #888; -o-box-shadow: 0 0 10px #888; box-shadow: 0 0 10px #888;}
div#body-content dl.categories {margin:0 auto;}
div#heart {width: 100%; margin:0 -1em;}
ul.description {margin-left:-2em; margin-top:1em; width:10em; font-family:"Myriad Pro", Geneva, sans-serif; color:#000; font-size:14px;}
ul.description li {list-style-type:none; text-align:left;}
dl.categories {display: table-cell; padding:0 1em;}
dl.categories dd {margin-left:1em; margin-top:.5em; font-family:"Myriad Pro", Geneva, sans-serif; font-weight:400; font-size:large; color:#00a5de;}
dl.categories dd.topic {font-weight:bolder; font-size:18px;}
dl.categories dt#first, dt#second, dt#third {-webkit-border-radius: 15px; -moz-border-radius:15px; -o-border-radius:15px; border-radius:15px; border:1px solid #fff; width:183px; height:183px; background-repeat:no-repeat; background-position:center; margin-right:1em;}
dl.categories dt#first {background-image:url("assets/images/graphic-art.gif");}
dl.categories dt#second {background-image:url("assets/images/texture.jpg");}
dl.categories dt#third {background-image:url("assets/images/3d-can-opener.jpg");}
dd.topic a {color:#00a5de; text-decoration:none; outline:none;}
dd.topic a:hover {border-bottom:2px groove #b2d234; border-top:2px groove #b2d234; text-shadow:#CCC 2px 2px 2px; color:#000;}

h2 {color:#00a5de; text-align:right; font-family:"Myriad Pro", Geneva, sans-serif; text-transform:capitalize;}
p#footer {text-align:center; font-family:"Myriad Pro", Geneva, sans-serif; font-size:11px; font-weight:500; letter-spacing:1px; margin-top:1.5em;}
p#footer a {text-decoration:none; text-transform:uppercase; color:#00a5de; font-weight:bolder; outline:none;}
p#footer a:visited {color:#00a5de;}
/*FOLLOWING CODE IS FOR LIGHTBOX ONLY*/
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(assets/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(assets/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
/*FOLLOWING CODE WAS FOR LIGHTBOX ONLY*/