/*DirkWestfall layout as of 03-10 */ /* ----------------------------------------------------------------------*/ /* ----------------------------------- RESET first ---------------------------------------*/ /* ----------------------------------------------------------------------*/ html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; } h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th { font-size: 1em; font-weight: normal; font-style: normal; } ul,ol { list-style: none; } fieldset,img { border: none; } caption,th { text-align: left; } table { border-collapse: collapse; border-spacing: 0; } /* ----------------------------------------------------------------------*/ /* BASIC BEHAVIORS */ /* ----------------------------------------------------------------------*/ body { background:#000; color: #eee; } .clear { clear:both; } .clearer { clear: both; display: block; margin: 0; padding: 0; height: 0; line-height: 1px; font-size: 1px; } img { behavior: url(../scripts/iepngfix.htc); } img.framed { border: 1px solid #000; margin: 12px; } img.left { float: left; margin: 8px 20px 16px 0; } img.right { float: right; margin: 8px 0 16px 20px; } img.center { margin: 12px auto; } img.full { width: 95%; margin: 2% auto; } img.more { margin: 4px 0 -8px 0; } embed.left { float: left; margin: 8px 20px 16px 0; } embed.right { float: right; margin: 8px 0 16px 20px; } #containerouter { background: transparent; width: 100%; height: auto; margin: 0 auto; position: relative; } #container { background-image: url('../media/00_primary/css_images/000_dirk_ui_images/main_background.jpg'); background-repeat: no-repeat; width: 1900px; height: 1080px; margin: 0 auto; padding: 0 0; position: relative; color: #eee; } #header { background: transparent; height: 125px; margin: 0; background-image: url(../media/00_primary/css_images//000_dirk_ui_images/main_title.gif); background-repeat: no-repeat; position: relative; } #searchbox { display: inline; font-size: 90%; background: transparent; width: 280px; height: 1em; margin: 1em 1em; float: right; } #main { width:1250px; position: relative; margin: 0 18px; } #content { color: #eee;} /* ----------------------------------------------------------------------*/ /* LAYOUT */ /* ----------------------------------------------------------------------*/ .column { float: left; } .layout2col, .layout2cola, .layout2colb, .layout2colc, .layout2cold, .layout2cole, .layout2colf, .layout3col, .layout3cola, .layout4col, .layout5col, .layout6col, .layout7col { width: 100%; } /* ----------------------------------------------------------------------*/ /* ------------------- 1-COLUMN DEFAULT LAYOUT ---------------*/ .layout1col { float: left; width: 1250px; margin-left: 4.5%; } /* ----------------------------------------------------------------------*/ /* ------------------- 2-COLUMN (EQUAL SIZE) ---------------*/ .layout2col .column { width: 49%; } .layout2col .layout2col .column { width: 47.8%; } /* ----------------------------------------------------------------------*/ /* ----------------------------------------------------------------------*/ .layout3col .layout2col .column { width: 46%; } /* ----------------------------------------------------------------------*/ .layout4col .layout2col .column { width: 45%; } /* ----------------------------------------------------------------------*/ /* -------------------- LEFT MAIN W RIGHT SIDEBAR --------------------------*/ .layout2cola .column.first { width: 66%; } .layout2cola .column.last { width: 32%; } /* ------------------- LEFT MAIN W RIGHT SIDEBAR (SMALLER) ----------*/ .layout2colb .column.first { width: 74.9%; } .layout2colb .column.last { width: 23%; } /* -------------------- RIGHT MAIN W LEFT SIDEBAR ----------------------------*/ .layout2colc .column.first { width: 32%; } .layout2colc .column.last { width: 66%; } /* ------------------ RIGHT MAIN W LEFT SIDEBAR (SMALLER) -------------*/ .layout2cold .column.first { width: 23%; } .layout2cold .column.last { width: 74.9%; } /* ------------------ LARGE LEFT W RIGHT SIDEBAR (SMALLEST) ----------*/ .layout2cole .column.first { width: 79%; } .layout2cole .column.last { width: 19%; } /* ----------------- LARGE RIGHT W LEFT SIDEBAR (SMALLEST) -------------*/ .layout2colf .column.first { width: 19%; } .layout2colf .column.last { width: 79%; } /* ----------------------------------------------------------------------*/ /* ------------------- 3-COLUMN (EQUAL SIZE) ---------------*/ .layout3col .column { width: 32%; margin-left: 2%; } .layout2col .layout3col .column { width: 31%; } /* ----------------------------------------------------------------------*/ /* ------ 3-COLUMN (CENTER MAIN WITH SIDEBARS BOTH SIDES) ------*/ .layout3cola .column { width: 58%; margin-left: 2%; } .layout3cola .column.first, .layout3cola .column.last { width: 19%; } /* ----------------------------------------------------------------------*/ /* ------------------- 4-COLUMN (EQUAL SIZE) ---------------*/ .layout4col .column { width: 23%; margin-left: 3%; } /* ------------------- 5-COLUMN (EQUAL SIZE) ---------------*/ .layout5col .column { width: 18.4%; margin-left: 2%; } /* ------------------- 6-COLUMN (EQUAL SIZE) ---------------*/ .layout6col .column { width: 15%; margin-left: 2%; } /* ----------------GENERAL LAYOUT CONSTRAINTS ---------------*/ .column.first, .column.last { margin-left: 0 !important; } .column.last { float: right !important; } .column.black { width: 48.5%; background: #000; padding: 4px; border: solid 1px #06f; } p.last, ul.last, ol.last, li.last { _width:auto !important; _float:none !important; } /* ---------------- CONTAINER CONSTRAINTS ---------------*/ #container:after, #content:after, .layout2col:after, .layout2cola:after, .layout2colb:after, .layout2colc:after, .layout2cold:after, .layout2cole:after, .layout2colf:after, .layout3col:after, .layout3cola:after, .layout4col:after, .layout5col:after, .layout6col:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } #container, #content, .layout2col, .layout2cola, .layout2colb, .layout2colc, .layout2cold, .layout2cole, .layout2colf, .layout3col, .layout3cola, .layout4col, .layout5col, .layout6col { _zoom:1; } /* ----------------------------------------------------------------------*/ /* ------------------------- TYPE ------------------------- */ /* ----------------------------------------------------------------------*/ body { font: 12px/18px "Lucida Grande", Geneva, Arial, Verdana, sans-serif; background-color: #eee;color: #eee; } a { color: #3ff; } strong, b { font-weight:bold; } em, i { font-style:italic; } sup { padding-left:1px; font-size:10px !important; font-weight:normal !important; vertical-align: baseline; position: relative; bottom: 0.33em; color:#76797c; _position:static !important; } .fineprint { font-size: 10px !important; color:#666; } #main p { margin-bottom: 18px;color: #eee; } #main h1 { font-family: times; font-weight: bold; font-size: 20px; line-height: 36px; margin-bottom: 18px; } #main h1.banner { font-family: times; font-weight: bold; font-size: 36px; line-height: 44px; margin-bottom: 18px; color: #ff3300; } #main h2 { font-weight: bold; font-size: 16px; line-height: 18px; margin-bottom: 18px; } #main h3 { font-weight: bold; font-size: 14px; line-height: 18px; } #main h4 { font-weight: bold; font-size: 12px; line-height: 18px; } #main h5 { font-weight: normal; font-size: 10px; line-height: 18px; margin-bottom: 18px; } #main h6 { font-weight: normal; font-size: 10px; line-height: 18px; text-align: center; margin-bottom: 18px; } #main h1 { color: #ff3300; } #main h2 { color: #ddd; } #main h3 { color: #ddd; } #main h4 { color: #f93; } #main h5 { color: #eee; } #main h6 { color: #ccc; } #main p.intro { font-weight: bold; } #main .more { text-align: right; } #main ul { margin-bottom: 18px; list-style: none outside; } #main ul li { margin-bottom: 12px; list-style: disc; margin-left: 2.2em; color: #eee; } #main ol { margin-bottom: 18px; list-style: decimal; margin-left: 2.2em; } #main ul.square, #main ul.circle { margin-left: 2em; } #main ul.square { list-style: square outside; } #main ul.circle { list-style: circle outside; } #main ul ul.circle, #main ul ul.square { margin-top: 4px; margin-bottom: 5px; } #main ol.fineprint { margin-left: 0; padding-left: 2em; } #main p a.pdf { background: url(../media/00_primary/css_images/00_newest/icon_pdf_12x12.gif) 0 0.4em no-repeat; display: block; padding-left: 20px; } #main h3 a.pdf { background: url(../media/00_primary/css_images/icon_pdf_32x32.gif) 0 0.4em no-repeat; display: block; padding-left: 36px; } #main .sidebar { font-size: 10px; line-height: 18px; color:#eee; } #main .last { margin-bottom: 0; } /* ----------------------------------------------------------------------*/ /***** GENERAL LAYOUT *****/ /* ----------------------------------------------------------------------*/ html { *background:url(../media/00_primary/css_images/00_newest/blank.gif) fixed; } body { background:#000; color: #eee; } #container { overflow:visible; } .layout2cola .column.first { width:680px; } .layout2cola .column.last { width:223px; } .layout2colc .column.first { width:223px; } .layout2colc .column.last { width:680px; } .layout2colc .layout2col .column { width:336px; display:inline; } .layout2colc .layout3col .column { width:195px; margin-right:26px; } /* ----------------------------------------------------------------------*/ /* PRINT */ /* ----------------------------------------------------------------------*/ @media print { body, #main, #content { color:#000 !important; } a, a:link, a:visited { color:#000 !important; text-decoration:none !important; } #tabs, #globalheader, .noprint, .hide { display: none !important; } #main a.pdf { padding-left: 0 !important; background-image: none !important; } } /* ----------------------------------------------------------------------*/ /* ----------------------------------- (NAV CSS begins here) ---------------------------------------*/ /* ----------------------------------------------------------------------*/ /* GLOBALNAV */ #globalnav { width: 1250px; height: 40px; margin: 0 auto; position: relative; z-index: 9998; } /* ----------------------------------------------------------------------*/ /* -------------------- PURE CSS DROP-DOWN MENU -----------------*/ /* ----------------------------------------------------------------------*/ .gnavmc .gnavdivider { display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;} .gnavmc .gnavdividery {float:left;width:0px;} .gnavmc .gnavtitle {display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;} .gnavclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;} .gnavmc {position:relative;zoom:1;z-index:10;} .gnavmc a, .gnavmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;} .gnavmc div a, .gnavmc ul a, .gnavmc ul li {float:none;} .gnavsh div a {float:left;} .gnavmc div {visibility:hidden;position:absolute;} .gnavmc .gnavcbox {cursor:default;display:block;position:relative;z-index:1;} .gnavmc .gnavcbox a {display:inline;} .gnavmc .gnavcbox div {float:none;position:static;visibility:inherit;left:auto;} .gnavmc li {z-index:auto;} .gnavmc ul {left:-10000px;position:absolute;z-index:10;} .gnavmc, .gnavmc ul {list-style:none;padding:0px;margin:0px;} .gnavmc li a {float:none} .gnavmc li:hover>ul {left:auto;} #gnav0 ul {top:100%;} #gnav0 ul li:hover>ul {top:0px;left:100%;} /* -------------------- MENU CONTAINER -----------------*/ #gnav0 {width:auto;padding:5px 20px;margin:0px;background: transparent; ;background-image:url(../media/00_primary/gnavimages/chocolate_gradient.gif); background-repeat: repeat-x; border: none; } /* -------------------- MAIN ITEMS -----------------*/ #gnav0 a {padding:3px 30px 3px 3px;margin:0px 20px 0px 0px;background-color:transparent;color:#aaa;font-family:Arial;font-size:12px;text-decoration:none;border-width:0px 1px 0px;border-style:none;border-color:#000;} /* -------------------- MAIN HOVER STATE -----------------*/ #gnav0 a:hover {color:#fff;border-color:#fc3;} /* -------------------- MAIN HOVER STATE -----------------*/ #gnav0 li:hover>a {color:#fff;border-color:#fc3;} /* -------------------- MAIN ACTIVE STATE -----------------*/ body #gnav0 .gnavactive, body #gnav0 .gnavactive:hover {color:#c30;border-color:#fc3;} /* -------------------- SUB CONTAINER -----------------*/ #gnav0 div, #gnav0 ul { padding:15px;background: transparent; color: #300; background-image:url(../media/00_primary/gnavimages/transparent_dark_gradient.png); background-repeat: repeat-y; border-width:1px;border-style:solid;border-color:#900;} /* -------------------- SUB ITEMS -----------------*/ #gnav0 div a, #gnav0 ul a {padding:3px 20px 3px 5px;margin:0px;color:#ccc;border-width:0px;border-color:#93f;} /* -------------------- SUB HOVER STATE -----------------*/ #gnav0 div a:hover {color:#0cf;text-decoration:underline;} /* -------------------- SUB HOVER STATE -----------------*/ #gnav0 ul li:hover>a {color:#0cf;text-decoration:underline;} /* -------------------- SUB ACTIVE STATE -----------------*/ body #gnav0 div .gnavactive, body #gnav0 div .gnavactive:hover {color:#00FC2B;text-decoration:underline;} /* -------------------- SUB TITLES -----------------*/ #gnav0 .gnavtitle {margin:2px 5px 5px 5px;color:#ff6;font-family:Arial;font-size:12px;font-weight:bold;} /* -------------------- HORIZONTAL DIVIDERS -----------------*/ #gnav0 .gnavdividerx {border-top-width:1px;margin:4px 5px 4px 5px;border-color:#f90;} /* -------------------- ARROW GRAPHICS -----------------*/ ul#gnav0 li .gnavparent {background-image:url(../media/00_primary/gnavimages/arrow_03.png);background-repeat:no-repeat;background-position:90% 50%;} /* -------------------- ARROW GRAPHICS -----------------*/ ul#gnav0 li:hover > a.gnavparent {background-image:url(../media/00_primary/gnavimages/arrow_04.png);} /* -------------------- ARROW GRAPHICS -----------------*/ ul#gnav0 ul li .gnavparent {background-image:url(../media/00_primary/gnavimages/arrow_01.png);} /* -------------------- ARROW GRAPHICS -----------------*/ ul#gnav0 ul li:hover > a.gnavparent {background-image:url(../media/00_primary/gnavimages/arrow_02.png);} /* --------------------------------------------------------------------------------------*/ /* --------------------------------------------------------------------------------------*/ /* ------------------------- LEFT SIDE NAV WITH POPUP IMAGES ---------------*/ /* --------------------------------------------------------------------------------------*/ #main #sidenav_l a { display: block; margin: 2em 1.5em; color: #eee; } #main #sidenav_l a.activelink { display: block; margin:2em 1.5em 0; padding:0; color:#c30; text-decoration:none; } #main #sidenav_l a:hover { color:#ff3; } #main #sidenav_l a img { visibility: hidden; position: absolute; top: 24px; left: 200px; width: 250px; width: 188px; border-width: 0; } #main #sidenav_l a:hover img { visibility: visible; position: absolute; top: 0; left: 250px; width: 250px; width: 188px; border-width: 0; } /* --------------------------------------------------------------------------------------*/ /* ------------------------- POPUP IMAGES FOR GLOBAL NAV ---------------*/ /* --------------------------------------------------------------------------------------*/ ul#gnav0 li a img { visibility: hidden; position: absolute; top: 300px; left: 12px; width: 250px; height: 188px; border-width: 0; } ul#gnav0 li a:hover img { visibility: visible; position: absolute; top: 300px; left: 12px; width: 250px; height: 188px; border-width: 0; } /* --------------------------------------------------------------------------------------*/ /* ----------------- THUMBNAIL WITH POPUP IMAGES ------------*/ /* --------------------------------------------------------------------------------------*/ #main a img.preview img { margin: 6px; } #main a img.preview span { position: absolute; visibility: hidden; top:0px; left: 250px; } #main a img.preview:hover span { position: absolute; visibility: visible; top:0px; left: 250px; z-index: 50; } /* --------------------------------------------------------------------------------------*/ /* ------------------------- Dirk STYLE-SPECIFIC CSS begins here -------------------------------*/ /* --------------------------------------------------------------------------------------*/ /***** HEADER, TOP ELEMENTS *****/ #main #localnav { padding:1em 0 .2em; border-bottom:1px solid #006699 } #main #localnav h1 { font-size: 16px; width:48px; height:32px; float:left; margin:0 0 .1em 8px; color: #6cf; } #main #localnav h1 a { display:block; width:48px; height:32px; color:#858585; font-weight:normal; text-decoration:none; text-indent:-99999px; } #main #localnav h1.home { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/home_icon_48x24.png) no-repeat; } #main #localnav h1.concepts { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/concepts_icon_48x24.png) no-repeat; } #main #localnav h1.cad { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/cad_icon_48x24.png) no-repeat; } #main #localnav h1.tools { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/tools_icon_48x24.png) no-repeat; } #main #localnav h1.photography { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/photography_icon_48x24.png) no-repeat; } #main #localnav h1.br { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/br_icon_48x24.png) no-repeat; } #main #localnav h1.bio { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/bio_icon_48x24.png) no-repeat; } #main #localnav h1.about { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/about_icon_48x24.png) no-repeat; } #main #localnav h1.links { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/links_icon_48x24.png) no-repeat; } #main #localnav h1.contact { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/email_icon_48x24.png) no-repeat; } #main #localnav h1.tech { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/tech_icon_48x24.png) no-repeat; } #main #localnav h1.products { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/products_icon_48x24.png) no-repeat; } #main #localnav h1.calendar { width:48px; height:24px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/calendar_icon_48x24.png) no-repeat; } #main #localnav h1.nav { width:42px; height:42px; background:url(../media/00_primary/menugraphics/mjm_subnav_icons/nav_icon_42x42.png) no-repeat; } #main #localnav ul { float:right; margin:0 -.3em; padding:0 0 1px; } #main #localnav ul li { display:inline; margin:0; padding:0; } #main #localnav ul li a { float:left; margin:1em 1.5em 0; padding:0; color:#3ff; text-decoration:none; } #main #localnav ul li a.activelink { float:left; margin:1em 1.5em 0; padding:0; color:#c30; text-decoration:none; } #main #localnav ul li a:hover { color:#ff3; } /* ----------------------------------------------------------------------*/ /***** BODY VARIATIONS *****/ /* ----------------------------------------------------------------------*/ body.home #main #localnav ul li#ln-home a { color:#900; } body#home #main #localnav ul li#ln-home a { cursor:default; } /* ----------------------------------------------------------------------*/ /* ------- As more of these "body" styles as needed ------*/ /* ----------------------------------------------------------------------*/ /* ----------------------------------------------------------------------*/ /***** MAIN, CONTENT *****/ #main #content { clear:both; padding:1.6em 0; } /* ----------------------------------------------------------------------*/ /* -------------------- TRANSPARENT SIDEBAR -----------------*/ /* ----------------------------------------------------------------------*/ #main #subnav { width: 235px; margin: 4px auto 12px auto; } #main #subnav p,#main #subnav h2,#main #subnav h3, #main #subnav h4 { margin: 6px 16px 4px 14px; } /* TOP */ #main #subnavheader { height:32px; position:relative; overflow:hidden; background:transparent url(../media/00_primary/css_images/220_rounded_inset/220_top.png) no-repeat; padding-bottom:10px; margin-bottom: -10px; z-index:100; behavior: url(../scripts/iepngfix.htc); } /* MID (CONTENT) */ /* #main #subnavmidcontent { width: 220px;padding:4px 12px; border:1px solid #000; border-width:0 1px; } */ #main #subnavmidcontent { position:relative; overflow:hidden; background:transparent url(../media/00_primary/css_images/220_rounded_inset/220_mid.png) repeat-y; padding-bottom:10px; margin-bottom: -10px; z-index:100; behavior: url(../scripts/iepngfix.htc); } /* BOTTOM */ #main #subnavcapbtm { height: 14px; margin-top: 10px; background: url(../media/00_primary/css_images/220_rounded_inset/220_btm.png) no-repeat; position:relative; z-index:100; behavior: url(../scripts/iepngfix.htc); } /* ----------------------------------------------------------------------*/ /* ----------------------------------------------------------------------*/ /* HEADERS, TEXT */ /* ----------------------------------------------------------------------*/ body, #main #content { color:#eee; } #main h1 { font-family: times; font-weight:normal; color:#ff3300; margin-bottom:.5em; } #main h1.banner { font-weight: normal; font-style: italic; color: #ff3300; } #main h1 span { color:#8F9EC4; } #main h3 { font-size:14px; margin-bottom: 12px; } #main h4 { font-size:12px; margin-bottom: 10px; } #main h2 { color: #ddd; } #main h3 { color: #ddd; } #main h4 { color: #ee6; } #main h5 { color: #eee; } #main h6 { color: #ccc; } .center { text-align:center; } /* ----------------------------------------------------------------------*/ /* LINKS */ /* ----------------------------------------------------------------------*/ #main a { text-decoration:none; } #main a:hover { color: #ff3; } /* ----------------------------------------------------------------------*/ /* IMAGES */ /* ----------------------------------------------------------------------*/ img { margin-bottom: 14px; } img.glow { margin-top:0; margin-bottom:14px; } img.inline { margin-top:12px; } img.shadow { margin-bottom:5px; } div.center { text-align:center; } #main .hr { padding:4px 0; width:100%; text-align:center; } #main .hr { background:url(../media/00_primary/css_images/hr850x2.png) no-repeat 50% 100%; margin: -12px auto 12px auto; _background:url(../media/00_primary/css_images/hr850x2.gif) no-repeat 50% 100%; margin: -12px auto 12px auto; } #main .hrbold { padding:4px 0; width:100%; text-align:center; } #main .hrbold { background:url(../media/00_primary/css_images/bold_hr_800x16.png) no-repeat 50% 100%; margin: -12px auto 12px auto; _background:url(../media/00_primary/css_images/bold_hr_800x16.gif) no-repeat 50% 100%; margin: -12px auto 12px auto; } #main #subnav .hr { padding:1px 0 1px 0; width:100%; text-align:center; } #main #subnav .hr { background: url(../media/00_primary/css_images/subnav_hr_dark.png) no-repeat 50% 100%; margin: 0; _background: url(../media/00_primary/css_images/subnav_hr_dark.gif) no-repeat 50% 100%; margin: 0; } /* --------------------------- FOOTER ------------------------------*/ #footer { width: 1250px; margin: 0px auto; text-align: center; font-size: 10px; color: #6e6e6e; } #footer a { margin: 0 2px; text-decoration: none; } #footer a:hover { text-decoration: underline; } #footer p.left { width: 50%; float: left; text-align: left; text-indent: 10px; } #footer p.right { width: 50%; float: right; } #footer p.links { border: 1px solid #666; border-width: 1px 0; padding: .5em 0; margin: 1.5em 0 2em; } /* ----------------------------------------------------------------------*/ /* -------------------------- "LIGHTBOX" Image Display -----------------------------*/ /* ----------------------------------------------------------------------*/ #lightbox{position: absolute; left: 0; margin-top: 120px; 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(../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; outline: none; } #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } /* ----------------------------------------------------------------------*/ #final {background: transparent; height: auto; width: 100%; clear: both; position: relative; } /* ----------------------------------------------------------------------*/