/* -------------------------------------------------- AuntHannahsWall.com LOGIN PAGE STYLES Last revised 9 Sep 2007 -------------------------------------------------- Individual page styles Assign ID to and prepend to declarations */ /* -------------------------------------------------- Color palette: -------------------------------------------------- #fff White #800000; dark red: #0b161e; logoblue (from hasphoto) #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 #5f2900; darkreddishbrown #002d39; dark greenish blue #6f1600 ReddishBrown #993300;darkhoneybrown #ca843e; for text on login lightish brown yellow #5f2900; darker brown yellow 481600; even darker brown yellow #d6bb9d; YellowWhiteFromPictureOnwall */ /* -------------------------------------------------- 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 } /* -------------------------------------------------- LOGIN -------------------------------------------------- This section concerns generalizations and common elements */ body { color: #481600; /* White */ font: 14px Verdana, Arial, sans-serif; text-align: center; /* horizontal centering in Win IE */ background: #800000; /* darkhoneybrown */ } /* Links */ a { text-decoration: none; } a:link, a:visited { color: #001d30; /*dark blue*/ } a:focus { outline: none; -moz-outline: none; } a:hover { color: #ddd; /*#F07800; gold */ } a:active { color: #132f36; /* dark blue green */ } /* Headers */ h1, h2, h3, h4, h5, h6 { color: #ddd; /* light grey */ line-height: 1.5; margin: 1.5em 0 .75em; } h1 { color: #5f2900; /* darkreddishbrown */ 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; } h4 { font-size: 16px; line-height: 1.3125; margin: 1.3125em 0 .65625em; } p { margin-bottom: .75em; } blockquote { margin: 1.5em; } /* Lists */ ul ul, ol ol, ul ol { /* nested list indent */ margin-left: 1em; } /* -------------------------------------------------- PAGE STRUCTURE FOR LOGIN & BAD LOGIN PAGES ON INDEX -------------------------------------------------- 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; } /* grouping for main content + sidebar */ #container { line-height: 1.5; margin-top: 1.5em; padding: 0; background: transparent; } /* Main content area */ #content { padding: 0; background: transparent; } /* Main image container */ #main { width: 63em; height: 40.5em; /*34.5em;*/ position: relative; padding: 1.5em; background: transparent url(../images/ahw/wall_bigger.jpg) no-repeat; } #main img { width: auto; padding-right: 1.5em; } /* Inset links */ #inset-link { width: 27em; /*472px =27em- 4.5paddingmargin */ height: 31.5em; /* approx more than 500px @ 14*/ float: left; /*padding: 1.5em;*/ margin-right: 1.5em; background: transparent; } #inset-link li { color: #000; /*#5f2900;#993300;darkhoneybrown */ margin: 1em auto; background: transparent; } #inset-link a { color: #0e0e0e; /*#5f2900;*/ font: 40px "Helvetica neue", Verdana, Arial, sans-serif; /*font-size: 40px;*/ line-height: .525; /*21px line height divided by 40px font size = .525 em line height*/ text-transform: uppercase; letter-spacing: .1em; } #aunt { position: absolute; top: 0px; left: 10em; } #hanna { position: absolute; top: 1em; left: 19em; } #wall { position: absolute; top: 2em; left: 34em; } #inset-link a:link, #inset-link a:visited, #inset-link-badlogin a:link, #inset-link-badlogin a:visited { color: #002d39; /*dark greenish blue*/ } #inset-link a:hover, #inset-link-badlogin a:hover { color: #F07800; /* gold */ } #inset-link-badlogin a:hover { color: #800000;/*dark red */ } #inset-link a:active, #inset-link-badlogin a:active { color: #a9a9a9; /* grey */ } /* Swapped content */ #swap { width: 31.5em; /*approx 420px 30x 14px */ height: 23.25em;/* approx 304 21.75 x 14px */ position: absolute; top: 8em;/*11em;*/ right: .046875em; } #swap img { display: block; margin: 0 auto; padding: .1875em; background: #580000; } #hold { display: none; } #login-text { width: 24em; height: 25em; position: absolute; top: 6.75em; left: 11em; background: transparent; } #main-text { width: 31.5em; height: 22em; margin-top: 10em; float: right; background: transparent; } #logintable { font: 12px/1.3125em Verdana, Arial, sans-serif; color: #001d30; /*dark blue*/ width: 36.12375em; /*was 31.5em; @14px converted to width for 12px/ 1.3125 x 31.5*/ height: 10em;/* was 11.25em @14px converted to height for 12px 1.3125 x 11.25*/ clear: both; padding: 1em; margin-left: 11em; background: transparent; } /*BAD LOGIN DIFFERENT ELEMENTS*/ #main-badlogin { width: 63em; height: 34.5em; position: relative; padding: 1.5em; background: url(../images/ahw/woodgrain.jpg); } #main-badlogin img { width: auto; padding-right: 1.5em; } #main-badlogin-photo { width: 27em; height: 31.5em; float: left; background: url(../images/ahw/gav_tongue_473x570.jpg) no-repeat; } #inset-link-badlogin { width: 27em; /*472px =27em- 4.5paddingmargin */ /*height: 31.5em;*/ /* approx 598px @ 14*/ float: right; padding: 1.5em; margin-right: 1.5em; } #inset-link-badlogin li { color: #800000; /*dark red*/ margin: 1em auto; background: transparent; } #inset-link-badlogin a { color: #0e0e0e; font: 40px "Helvetica neue", Verdana, Arial, sans-serif; /*font-size: 40px;*/ line-height: .525; /*21px line height divided by 40px font size = .525 em line height*/ text-transform: uppercase; letter-spacing: .1em; } #main-text-badlogin { width: 31.5em; height: 22em; float: right; } /* Swapped content BAD LOGIN */ #swap-badlogin { width: 31.5em; /*approx 420px 30x 14px */ height: 23.25em;/* approx 304 21.75 x 14px */ position: absolute; top: 14.5em; right: 2em; } #swap-badlogin img { display: block; margin: 0 auto; padding: .1875em; background: #580000; } /* -------------------------------------------------- PAGE STRUCTURE FOR MAIN BLOG PAGE ON INDEX -------------------------------------------------- This section defines layout elements and respective environmental formatting */ #blog-wrapper { text-align: left; /* reset Win IE workaround */ width: 66em; /*924px @ 14px*/ 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; } #blog-container { /* grouping for main content + sidebar */ line-height: 1.5; margin: 0; padding: 0; background: green; /*position: relative;*/ } #blog-banner { width: 66em; /*924px @ 14px*/ height: 6em;/* 84px */ padding-bottom: .75em; background: pink; } /* Main content area */ #blog-content { width: ; /*924px @ 14px*/ clear: both; padding: 1.5em; background: transparent; } #blog-main { width: 30em; float: left; padding-bottom: .75em; } /* blogposts container */ #blogposts { color: #444; /* Very dark grey */ font: 12px/1.3125 Verdana, Arial, sans-serif; width: 33.25em; /* 38.5em @12px, 33em @14px */ height: 38.5em; position: relative; float: left; overflow: auto; /* if content exceeds the dimensions, scrollbar will appear */ margin: 0 1.75em 1.75em 0; padding: 0 1.75em .875em; background: #eee8aa; /* PaleGoldenRod */ } #blogposts .entry { margin-bottom: .875em; padding-bottom: .875em; border-bottom: 2px solid #d2691e; /* Chocolate */ } #blogposts .entry.last { margin-bottom: 0; border-bottom: none; } #blogposts .entry h3 { font-size: 14px; line-height: 1.5; margin: .75em 0; } #blogposts .entry p.summary { } /* Table layout */ .blog-gallery { float: right; background: url(../images/woodgrain.jpg) repeat-x; } .blog-gallerytable { border: 1.125em solid #fff; /* White 75em*/ padding: 0 .75em; } .blog-gallerytable th { font-size: 14px; line-height: 1.5; text-align: center; text-transform: uppercase; letter-spacing: .1em; padding: .75em 0; } .blog-gallerytable .thumbs { font-style: bold; text-align: center; padding: 0 .75em .75em; background-color: transparent; } .blog-gallerytable img { width: 13.75em; /* @178px */ border: 3px solid #fff; /* White */ } .blog-gallerytable img:hover { border: 3px solid #a52a2a; /* Brown */ } .blog-gallerytable img:active { border: 3px solid #daa520; /* GoldenRod */ } /* Main navigation */ #blog-navbar ol { color: #ba5700; /* Pantone 1525 C Honey Brown */ font-family: Verdana, Helvetica, Arial, sans-serif; width: 100%; float: left; background-color: #993300; /* darkhoneybrown */ } /* dark red: #800000; brighter red: #9a1c1c brighter red: 9c231a gold #ff9900; darkhoneybrown #993300; #cc3300; brighterorange color: #ba5700; *//* Pantone 1525 C Honey Brown */ #blog-navbar ol li { display: inline; } #blog-navbar ol li a { color: #ba5700; /* Pantone 1525 C Honey Brown */ text-decoration: none; float: left; padding: 0.375em .75em; border-right: 1px solid #fff; /* White */ background-color: #993300; /* darkhoneybrown */ } #blog-navbar ol li a:hover { color: #ff9900; /* Gold*/ background-color: #800000; /* darkred */ } #blog-navbar ol li .current { color: #9c231a; /*brighter red*/ background-color: #993300; /*darkhoneybrown*/ } /* Auxiliary navigation */ /* Footer */ #footer { color: #ba5700; /* Pantone 1525 C Honey Brown */ font: 12px/1.75 "Helvetica Neue", Arial, sans-serif; position: relative; clear: both; margin: .875em 0; padding-top: .875em; list-style: none; background: #800000; } #footer li { padding: .4375em; display: inline; background: url(../images/pipe.gif) no-repeat right; } #footer li.first { padding-left: 0; } #footer li.last { background: none; } #footer li.right { position: absolute; top: .375em; /* absolute positioning ignores padding, so reset

padding */ right: 0; background: none; } #footer a, #footer a:link, #footer a:visited { color: #993300; } #footer a:hover { color: #ff9900; } #footer a:active { color: #808000; /* Olive */ border-bottom: 1px dotted #808000; /* Olive */ } /*ELEMENTS APPLY TO ALL TEMPLATES*/ /* Utility elements */ .hidden { /* completely remove from layout */ display: none !important; } .invisible { /* does not display but remains in layout flow */ visibility: hidden; } .clip { overflow: hidden; } .scroll { overflow: auto; } .clearance { height: 0; clear: both; } .clear { clear: both; } /* -------------------------------------------------- FORMATTING STYLES -------------------------------------------------- Positional, text, font, and miscellaneous formatting not defined in environmental contexts */ /* Positional elements */ .center { text-align: center; } .flush-right { text-align: right; } .justify { text-align: justify; } .inline { display: inline; } .floatLeft { float: left; } .floatRight { float: right; } .allPad { padding: .75em; } .leftPad { padding: 0 0 .375em .75em; } .rightPad { padding: 0 .75em .375em 0; } .bottomPad { /* also use to provide paragraph spacing in IE Win */ padding-bottom: .75em; } .trim { margin: 0; padding: 0; } /* Fonts */ .italic { font-style: italic; } .bold { font-weight: bold; } .caps { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; } .normal { font-variant: normal; font-style: normal; font-weight: normal; text-transform: none; letter-spacing: normal; } .small { font-size: 12px; } .smaller { font-size: smaller; } .caption { font-style: italic; font-size: 12px; line-height: 1.75; } .sig { /* highlight of signature color */ color: #99cc00; /* Yellow-green */ } /* Typographic ornaments */ #content h1 + p > span:first-child, #content h2 + p > span:first-child { /* all caps highlight */ font-size: .786em; /* @11px */ text-transform: uppercase; letter-spacing: .1em; } #content h1 + p:first-letter, #text-swap h2 + p:first-letter { /* dropcap styling */ color: #580000; /* DARKReddishBrown */ font-size: 5em; /* inherits font-size from caps highlight */ line-height: .375; /* line-height based on 56px font-size */ float: left; margin: .09375em .09375em 0 0; } /* Lists */ .square { margin: 0 0 .75em 1.1em; list-style: square; } .inline li { margin-right: 1em; display: inline; }