/*** MAIN STYLES and CLASSES***/

html, body { height: 100%; }
.wrapper { height: auto !important; height: 100%; margin: 0 auto -103px; min-height: 100%; }

body { background: url(http://drollic.net/img/bg.gif) 112px 122px rgb(251, 252, 250); color: rgb(1, 29, 38); font: 9.5pt "Lucida Grande", Arial, sans-serif; margin: 0; padding: 0; text-align: left; }
.container { margin: 0 auto 0 auto; padding: 0; width: 780px; }

h1, h2, h3, h4, h5 { font-family: "MS Sans Serif", Geneva, sans-serif; }
h2, h3, h4, h5, ul, ul li { line-height: 1.5em; }
h1 { font-size: 13pt; font-weight: normal; letter-spacing: 1px; line-height: 1.8em; margin: 0; padding: 30px 60px 5px 60px; }
h1 strong { color: rgb(1, 39, 48); font-weight: bold; font-size: 16pt; }
h2 { font-size: 18pt; font-weight: bold; letter-spacing: 3px; margin: 0; padding: 10px 0 10px 0; text-transform: uppercase; }
.contentleft h2, .contentright h2 { padding: 0 0 10px 0; }
h3 { font-size: 16pt; font-weight: bold; letter-spacing: 2px; margin: 0; padding: 0 0 10px 0; }
h4 { font-size: 13pt; font-weight: normal; margin: 0; padding: 0 0 10px 0; }
h5 { font-size: 9pt; font-weight: bold; letter-spacing: 1px; margin: 0; padding: 0; }

p { line-height: 1.7em; margin: 0; padding: 0 0 10px 0; }
p.snug { font-size: 7.5pt; letter-spacing: 1px; margin: -10px 0 0 0; }

a:link, a:visited { color: rgb(1, 64, 84); font-weight: bold; text-decoration: none; }
a:hover, a:active { color: rgb(102, 159, 178); font-weight: bold; text-decoration: none; }

ul { list-style-image: url(img/bullet.gif); margin: 0 0 10px 16px; padding: 0; }
ul li { line-height: 1.7em; padding: 0 0 5px 0; }
ul.nobull { list-style: none; margin: 0 0 10px 0; padding: 0; }
ul.right { list-style: none; margin: 0; padding: 0; text-align: right; }

.small { font-size: 7.5pt; font-weight: bold; }
.center { text-align: center; }
.right { text-align: right; }
.clear { clear: both; }
.leadin { font-size: 12pt; margin: 0; padding: 10px 0 15px 0; text-align: center; }
.qstart { color: rgb(133, 164, 173); float: left; font-size: 700%; height: 45px; margin: -26px 0 -50px -2px; padding: 45px 0 0 0; }
.qend { color: rgb(133, 164, 173); float: right; font-size: 700%; height: 25px; margin: -25px 0 0 0; padding: 0; }

hr { background-color: rgb(210, 210, 210); border: 0; color: rgb(210, 210, 210); height: 1px; }

/*** IMAGES ***/

img { border: none; outline: none; }
img.alignleft { display: inline; float: left; padding: 0 7px 2px 0; }
img.alignright { display: inline; float: right; padding: 0 0 2px 7px; }
img.floatright { float: right; }

/* Thumbnails on front page and Projects page */

.screenthumb { border-top: 1px; border-right: 1px; border-bottom: 10px; border-left: 1px; border-style: solid; float: right; margin: 0 0 5px 0; padding: 0; }	
.screenthumb a:link, .screenthumb a:visited { border-color: rgb(1, 64, 84); }
.screenthumb a:hover, screenthumb a:active { border-color: rgb(102, 159, 178); }

/* Screenshots with captions on individual project pages */

.screen { border: 1px solid rgb(210, 210, 210); margin: 0; padding: 0; }
.screen1 { margin: 0; padding: 0; width: 540px; }
.screen2 { float: left; margin: 0; padding: 15px 10px 0 0; width: 300px; }
.screen3 { float: right; margin: 0; padding: 15px 0 0 10px; width: 220px; }

.screen1 p, .screen2 p, .screen3 p { color: rgb(100, 100, 100); font-size: 7.5pt; font-style: italic; font-weight: normal; padding: 2px 0 0 0; }

/*** HEADER ***/

#header { background: rgb(180, 205, 210) url(http://drollic.net/img/bg-header.gif) repeat top left; border-top: 10px solid rgb(1, 29, 38); font-size: 8.5pt; font-weight: normal;height: 150px; margin: 0; padding: 0; }
#header a { outline: none; }

#logo { display: inline; float: left; height: 150px; margin: 0; padding: 0; width: 320px; }
#logo a img { border: none; margin: 0; padding: 0; }

#navprojects, #navservices, #navabout { display: inline; margin: 0; }
#navprojects { float: left; padding: 70px 0 0 60px; width: 160px; }
#navservices { float: left; padding: 70px 0 0 0; width: 130px; }
#navabout { float: right; padding: 70px 0 0 0; width: 80px; }

.page { font-family: "MS Sans Serif", Geneva, sans-serif; font-size: 14pt; font-weight: bold; letter-spacing: 3px; text-transform: uppercase; }

/*** CONTENT ***/

.bigcontentleft, .contentleft, .contentright, .smallcontentleft, .smallcontentcenter, .smallcontentright { margin: 0; }
.bigcontentleft { float: left; padding: 0 10px 0 0; width: 540px; }
.contentleft { float: left; padding: 10px 0 10px 0; width: 450px; }
.contentright { float: right; padding: 10px 0 10px 0; width: 300px; }
.smallcontentright { float: right; padding: 10px 0 10px 0; width: 220px; }

.projectrow { margin: 0 0 10px 0; padding: 0; width: 780px; }
.projectitemleft, .projectitemright {  margin: 0; padding: 10px 0 0 0; text-align: center; width: 370px; }
.projectitemleft { float: left; }
.projectitemright { float: right; }

/*** FOOTER ***/

#footer { background: rgb(102, 159, 178) url(http://drollic.net/img/bg-footer.gif) repeat top left; clear: both; height: 65px; margin: 0; padding: 28px 0 10px 0; }
.push { clear: both; height: 103px; }
.footerleft { float: left; font-size: 9pt; padding: 9px 0 0 0; width: 200px; }
.footercenter { float: left; padding: 12px 0 0 0; width: 200px; }
.footerright { float: right; padding: 0; width: 380px; }

/*** FORMS ***/

input { background: rgb(180, 205, 210); border: none; letter-spacing: 2px; margin: 0 0 10px 0; padding: 5px; width: 450px; }
form #contactname, form #contactemail { margin: 0; width: 440px; }
form #contactcomments { background: rgb(180, 205, 210); border: none; height: 200px; letter-spacing: 2px; margin: 0; padding: 5px; width: 440px; }

/*** LIGHTBOX ***/
 
#lightbox { position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; }
#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: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../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; }
#overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }