/* -------------------------------------------------- HASPhotography.com INDEX PAGE STYLES Last revised 15 April 2007 -------------------------------------------------- Individual page styles Assign ID to and prepend to declarations */ /* -------------------------------------------------- Color palette: -------------------------------------------------- White #fff Black #000 Dark red #800000 Logo blue #0b161e #7f0700; pantone 188c illus hex value (navbar on home) #460400; Pantone 188c + 50%black (navbar home hover) #731513 Pantone 181c 770001 illus 781631 photoshop Pantone 506c 5f0000 Pantone 505c 8e001c Pantone 202 #9a1c1c brighter red: 9c231a brighter red: #993300; darkhoneybrown #993300; darkorangy #cc3300; brighterorange #ff9900; gold #a9a9a9; gray #999; Medium grey #ddd; very light grey #1ab5cc; turquoise #3f6166; turquoise green #1b4166; darker green */ /* -------------------------------------------------- GLOBAL RESET -------------------------------------------------- undohtml.css (CC) 2004 Tantek Celik. Some Rights Reserved. */ :link, :visited { text-decoration: none } ul, ol { list-style: none } h1, h2, h3, h4, h5, h6, pre, code { font-size: 1em } body, html, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, p, blockquote, img { margin: 0; padding: 0; } a img, :link img, :visited img { border: none } address { font-style: normal } /* -------------------------------------------------- DEFAUTL HTML ELEMENTS -------------------------------------------------- This section concerns generalizations and common elements */ body { color: #fff; /* White */ font: 14px/1.5 Helvetica, Arial, Verdana, sans-serif; text-align: center; /* horizontal centering in Win IE */ background: #000; /* Black */ } /* Links */ a { text-decoration: none; } a:link, a:visited { color: #fff; /*White*/ } a:focus { outline: none; -moz-outline: none; } a:hover { color: #ff9900; /* gold */ } a:active { color: #cc3300; /* brighter orange */ } /* Headers */ h1, h2, h3, h4, h5, h6 { color: #ddd; /* very light grey */ line-height: 1.5; margin: 1.5em 0 .75em; } h1 { color: #800000; /* dark red */ font-size: 21px; line-height: .75; margin: .75em 0; } h2 { color: #fff; /* White */ font-size: 24px; line-height: .875; margin: .4375em 0; } h3 { font-size: 18px; line-height: 1.167; margin: 1.167em 0 .5835em; } p { margin-bottom: .75em; } blockquote { margin: 1.5em; } /* Lists */ ul ul, ol ol, ul ol { /* nested list indent */ margin-left: 1em; } /* -------------------------------------------------- PAGE STRUCTURE -------------------------------------------------- This section defines layout elements and respective environmental formatting */ #wrapper { text-align: left; /* reset Win IE workaround */ width: 66em; margin: 0 auto; /* standard CSS horizontal centering if ie 6 didn't exist, this is the way it SHOULD be done*/ padding: 0; background: transparent; } #container { /* grouping for main content + sidebar */ line-height: 1.5; /*position: relative;*/ height: 41em;/* 574px */ margin: 0; padding: 0; background: transparent; } #banner { margin: 0; padding: 2px 0; } #banner h1 { height: 164px;/* new ht is 164px +4px pad = 168px> 12em OLD height: 101px; 101px + 4px padding = 105px > 7.5em */ margin: 0; background: transparent url(../images/hasphoto_banner_924x164.png) no-repeat; /*size of the actual banner graphic should be 101 + 63px as doesn't include padding = 164px*/ /*total height of banner will then be 168px = 12 ems */ } #banner h1 span { visibility: hidden; } /* Main content area */ #content { /*padding: 1.5em;*/ height: 29em; /*previous height: 33.5em; 41em - 7.5em banner = 33.5em *//*height of new content will be 41em (size of container) - 12em (new size of banner (includ padding) = 29em;*/ position: relative; background: transparent; } #main li h2 { display: none; } #portraits, #weddings, #stock1, #stock2, #stock3, #stock4, #stock5, #stock6, #stock7, #commercial { position: absolute; border: 4px solid #333; /* very dark grey */ } #portraits { top: 0; /* approx 4.5em @14 *//* 63px; with new banner and content height, simply set absolute position to top:0, and photo rests right at top of content box. very easy to then repostion photo, or change*/ left: 0; background: transparent url(../images/portrait_180x205.jpg) no-repeat; } #portraits a { width: 180px; height: 205px; /*was 200px*/ } #weddings a span { } #weddings { bottom: 0; /* was 276px;*/ left: 0; background: transparent url(../images/wedding_180x180.jpg) no-repeat; } #weddings a { width: 180px; height: 180px; } #stock1 { top: 0; /*63px;*/ left: 194px; background: transparent url(../images/ballet_155x254.jpg) no-repeat; } #stock1 a { width: 155px; height: 254px; } #stock2 { bottom: 0; /*longer vert ballet girl above at 254 +14px padding & border = 268px*/ left: 194px; background: transparent url(../images/udaipur_bathe_344x131.jpg) no-repeat; } #stock2 a { width: 344px; height: 131px; /*was 236px, but needed 5 more px to match neighbor */ } #stock3 { top: 0; left: 363px; background: transparent url(../images/romastpeters_175x254.jpg) no-repeat; } #stock3 a { width: 175px; height: 254px; /* was 303px;*/ } #stock4 { top: 0; left: 552px; background: transparent url(../images/maroc_200x150.jpg) no-repeat; } #stock4 a { width: 200px; height: 150px; /* was 150px but resized to be in porportion with other horiz */ } #stock5 { top: 164px; left: 552px; background: transparent url(../images/udaipur_arch_200x149.jpg) no-repeat; } #stock5 a { width: 200px; height: 149px; } #stock6 { top: 0; left: 766px; background: transparent url(../images/tajmahal_150x250.jpg) no-repeat; } #stock6 a { width: 150px; height: 250px; } #commercial { bottom: 0; left: 766px; background: transparent url(../images/com_150x135.jpg) no-repeat; } #commercial a { width: 150px; height: 135px; /*was 131px; */ } #main a { position: relative; display: block; } #main a span { font: bold 12px/1.75 Helvetica, Arial, sans-serif; text-align: center; text-transform: uppercase; letter-spacing: .1em; position: relative; display: block; visibility: hidden; /* remains in layout */ top: 45%; } #main a:hover { color: #7f0700; /* Pantone 188 C */ background: transparent url(../images/utility/light/transparent-50.png); } #main a:hover span { visibility: visible; } #content p { /* Copyright notice */ color: #333; /* very dark grey */ font-size: 11px; line-height: 1.90909; position: absolute; bottom: 0; margin-bottom: 0; left: 552px; } /* -------------------------------------------------- NAVIGATION -------------------------------------------------- */ #navbar_home { color: #ddd; /* lightgrey */ font-family: Helvetica, Arial, Verdana, sans-serif; margin-top: 1.125em; border-bottom: 1px solid #333; /* nearly black -- dropshadow effect */ height: 1.909090909em; background-color: #7f0700; } #navbar_home li { float:left; } #navbar_home li.first { margin-left:10px; background: url(../images/utility/nav-pipe.gif) no-repeat center right; line-height: 1.909090909em; width:1px; display:block; } #navbar_home li a { color: #ddd; /* very light grey */ font-size: 11px; line-height: 1.909090909em; text-transform: uppercase; letter-spacing: .1em; display:block; padding: 3px 46px 2px; /* previously RL padding .9545em; 2386363636em top-bottom padding */ background: transparent url(../images/utility/nav-pipe.gif) no-repeat right;/* pantone 188c illus hex value*/ } #navbar_home li a:hover { background-color: #460400; /* Pantone 188c + 50%black*/ }