/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
/*End CSS Reset*/
/*Some general CSS rules------------------------------------------------------------------------------------------------------------------*/
#daughters, #family, #login /*This rule is for the whole body area*/ {background-image:url(../images/background-wallpaper.png);}
p {/*font-family:Helvetica, Verdana, sans-serif; font-size:12px; color:#333; line-height:18px;*/
font-family:"Courier New", Courier, monospace; font-size:12.5px; color:#333333; line-height:20px; margin:3px 0 20px 0; padding:0;}
#content {width:1100px; min-height:545px; margin:0 auto; background-color:#FFF; border:1px solid #999999;}
a {text-decoration:none; color:#333333;}
a:hover {border-bottom:1px solid #999999; color:#999; font-weight:bold;}
#album-iframe-area a, #body-copy-area a, #login-content a {border-bottom:1px dotted #999999; text-decoration:none;}
#album-iframe-area a:hover, #body-copy-area a:hover, #login-content a:hover {border-bottom:none; text-decoration:none;}
#family #body-copy-area a:hover, #family #album-iframe-area a:hover {color:#ABC7CE;}
#daughters #body-copy-area a:hover, #daughters #album-iframe-area a:hover {color:#BCABD0;}
#top-banner-stuff {font-family:"Courier New", Courier, monospace; width:1100px; height:110px; margin:0 auto;}
#top-banner-stuff h1 {font-family:Helvetica, Verdana, Arial, sans-serif; display:inline; width:190px; height:110px; float:left; font-weight:normal;
font-variant:small-caps; letter-spacing:2px; border-right:1px solid #999999;}
#h1-sans-banner h1 {font-family:Helvetica, Verdana, Arial, sans-serif; display:inline; width:190px; height:110px; float:left; font-weight:normal;
font-variant:small-caps; letter-spacing:2px; background-repeat:no-repeat; background-position:left;}
#h1-and-nav {float:left; width:190px; min-height:810px;}
h1 {font-size:14px; font-family:Helvetica, Verdana, Arial, sans-serif; display:block; font-weight:bold;
font-variant:small-caps;}
h2 {font-size:18px; font-family:Helvetica, Verdana, Arial, sans-serif; display:block; font-weight:normal;
font-variant:small-caps; margin-bottom:20px; letter-spacing:.75px;}
h3 {font-size:12.5px; font-family:Helvetica, Verdana, Arial, sans-serif; display:block; font-weight:normal; color:#999;
font-variant:small-caps; margin:30px 0 7px 0; letter-spacing:.8px; color:#888;}
h4 {font-size:12px; font-family:Helvetica, Verdana, Arial, sans-serif; display:block; font-weight:normal; color:#999;
font-variant:small-caps; margin:14px 0 2px 0; letter-spacing:.75px;}
.narrow-paragraph {width:300px; line-height:19px; padding-top:8px; margin-bottom:27px;}
#nav-and-body-copy {width:1100px; min-height:700px;}
#h1 and nav #main-nav-sans-banner {min-height:1000px;}
#h1-and-nav #main-nav {min-height:1000px;}
#billboard {margin:7px 25px 20px 0; width:350px; height:450px; float:left; display:inline; border:1px solid #999;}
#body-copy-area /*Here if you add to padding, you must subtract from width. If you subtract from padding, add to width.*/
{float:left; margin:0; padding:/*need less left padding, but that messes up the background img...*/66px 70px 20px 70px; width:770px; background-image:url(../images/background-border.png);
background-repeat:no-repeat; background-color:#FFF; min-height:495px; border-top:1px solid #999999;}
#body-copy-area #page-image {width:250px; height:300px; float:right; border:1px solid #999; margin-left:50px; margin-bottom:50px;}
#magnet-area {width:300px; float:left;}
#magnet-area #welcome-text {font-family:"Courier New", Courier, monospace; line-height:21px; margin-top:12px; margin-bottom:12px;}
#magnet-1, #magnet-2, #magnet-3 {float:left; width:300px; height:91px; margin:4px 0; padding-top:9px; clear:left}
#magnet-1 p, #magnet-2 p, #magnet-3 p {width:266px; height:43px; padding:10px; margin:9px auto 0 auto;}
#magnet-area #magnet-1 h3, #magnet-area #magnet-2 h3, #magnet-area #magnet-3 h3 {height:10px; font-weight:bold; padding-left:9px;
display:inline; color:#EAE6EF;}
.italic {font-style:italic;}
.outlined {border:1px solid #999;}
.centered {text-align:center;}
.centered-small-caps {text-align:center; font-variant:small-caps; font-size:15.5px; letter-spacing:.75px; margin:8px 0 35px 0;}
.small-caps {font-variant:small-caps; font-size:16px; letter-spacing:.75px; margin:0;}
.body-copy-list {
font-family:"Courier New", Courier, monospace; font-size:12.5px; color:#333333; line-height:19px; margin:5px 0 16px 0;}
.body-copy-list li {
margin-top:8px; margin-left:16px; list-style-type:circle;}
#footer {clear:both; letter-spacing:2px; padding:20px 0 8px 340px; border-top:1px solid #999999;}
#footer a {text-decoration:none; font-weight:normal;}
/*Differences in concepts from here down-----------------------------------------------------------------------------------------------*/
#daughters h2/*, #daughters h3*/ {color:#BCABD0;}
#family h2/*, #family h3*/ {color:#ABC7CE;}
#daughters {background-image:url(../images/background-wallpaper.png); background-color:#E4D6E8;}
#family {background-image:url(../images/background-wallpaper.png); background-color:#DCF0F9;}
#daughters .narrow-paragraph {border-top:1px dotted #BCABD0;}
#family .narrow-paragraph {border-top:1px dotted #ABC7CE;}
/*Top banner area rules-----------------------------------------------------------------------------------------------*/
#daughters #top-banner-stuff {background-color:#BCABD0; background-image:url(../images/top-banner-photo-1.jpg);
background-position:right; background-repeat:no-repeat;}
#family #top-banner-stuff {background-color:#ABC7CE; background-image:url(../images/top-banner-photo-3.jpg);
background-position:right; background-repeat:no-repeat;}
#daughters #content #top-banner-stuff h1 {background-image:url(../images/logotype-daughters.png); color:#EAE6EF; text-indent:-999999px;
background-position:right;}
#family #content #top-banner-stuff h1 {background-image:url(../images/logotype-family.png); color:#EAE6EF; text-indent:-999999px;
background-position:right;}
#daughters #content #h1-sans-banner h1 {background-color:#BCABD0; background-image:url(../images/logotype-daughters.png);
color:#EAE6EF; text-indent:-999999px;}
#family #content #h1-sans-banner h1 {background-color:#ABC7CE; background-image:url(../images/logotype-family.png);
color:#EAE6EF; text-indent:-999999px;}
/*Login page rules-----------------------------------------------------------------------------------------------*/
#login #login-content h1 {background-image:url(../images/logotype-login.png); color:#333333; text-indent:-999999px; width:600px; height:107px;
margin-top:125px; border-bottom:1px solid #999999; border-top:1px solid #999999; background-position:center top; background-repeat:no-repeat;}
#login {background-color:#F0EFF4;}
#login-content {width:600px; height:485px; background-image:url(../images/brandrup-daughters-login-pic.jpg); background-repeat:no-repeat;
background-color:#FFF; background-position:center top; margin:50px auto 0 auto; border:1px solid #999999;}
#daughters-login-area, #family-login-area {height:184px;}
#daughters-login-area {width:299px; border-right:1px solid #999999; float:left;}
#family-login-area {width:300px; float:left;}
#daughters-login-area h2, #family-login-area h2 {height:25px; text-align:center; color:#999999; padding-top:10px;}
#daughters-login-area h2 {width:299px; background-color:#E4D6E8; margin-bottom:0;}
#family-login-area h2 {width:300px; background-color:#DCF0F9; margin-bottom:0;}
.login-copy {padding:18px 25px; margin:0;}
#daughters-actual-login-button, #family-actual-login-button {font-size:20px; height:55px; margin:0; text-align:center; padding-top:1px;}
#daughters-actual-login-button {width:299px; background-color:#E4D6E8; background-image:url(../images/login-button-daughters.png);
background-repeat:no-repeat; background-position:center; text-indent:-999999px;}
#family-actual-login-button {width:300px; background-color:#DCF0F9; background-image:url(../images/login-button-family.png);
background-repeat:no-repeat; background-position:center; text-indent:-999999px;}
#daughters-actual-login-button a, #family-actual-login-button a {color:#666666; text-decoration:none; width:110px; height:45px; margin:5px auto 0 auto;}
.login {width:110px; height:45px; margin:5px auto 0 auto;}
#login-page-footer {font-size:11px; line-height:22px; width:580px; height:85px; text-align:center; padding:13px 10px 0 10px;
border-top:1px solid #999999; clear:both;}
/*Main nav rules-----------------------------------------------------------------------------------------------*/
#main-nav a {display:block; height: 21px; margin: 0 auto; text-align:center; font-size:15.4px; letter-spacing:.3px; font-weight:normal; padding-top:6px;}
#main-nav {font-family:"Courier New", Courier, monospace; width:190px; height:1092px; float:left;
border-top:1px solid #EAE6EF;}
#daughters #main-nav {background-color:#E4D6E8;}
#daughters #main-nav li {width:189px; height:27px; background-color:#BCABD0;
border-top:1px solid #BCABD0; border-right:1px solid #BCABD0; border-bottom:1px solid #BCABD0; margin-bottom:1px;}
#daughters #main-nav #active {background-color:#FCF; border-top:1px solid #BCABD0; border-right:1px solid #BCABD0; border-bottom:1px solid #BCABD0;}
#daughters #main-nav #active a {color:#BCABD0;}
#daughters #main-nav li a {color:#EAE6EF; text-decoration:none;}
#daughters #main-nav li a:visited {text-decoration:none;}
#daughters #main-nav li a:hover {text-decoration:none; background-color:#E4D6E8; border-bottom:none;
font-weight:bold; color:#BCABD0;}
#daughters #main-nav li a:active {text-decoration:none; color:#FCF; border-top:1px solid #BCABD0; border-right:1px solid #BCABD0;
border-bottom:1px solid #BCABD0;}
#family #main-nav {background-color:#EAE6EF;}
#family #main-nav li {width:189px; height:27px; background-color:#ABC7CE;
border-top:1px solid #ABC7CE; border-right:1px solid #ABC7CE; border-bottom:1px solid #ABC7CE; margin-bottom:1px;}
#family #main-nav #neg-space {margin-top:223px;}
#family #main-nav #active {background-color:#DCF0F9; border-top:1px solid #ABC7CE; border-right:1px solid #ABC7CE; border-bottom:1px solid #ABC7CE;}
#family #main-nav #active a {color:#ABC7CE;}
#family #main-nav li a {color:#EAE6EF; text-decoration:none;}
#family #main-nav li a:visited {text-decoration:none;}
#family #main-nav li a:hover {text-decoration:none; background-color:#DCF0F9; border-bottom:none;
font-weight:bold; color:#E4D6E8;}
#family #main-nav li a:active {text-decoration:none; color:#ABC7CE; border-top:1px solid #ABC7CE; border-right:1px solid #ABC7CE;
border-bottom:1px solid #ABC7CE;}
#family #main-nav #adele-and-margo-nav-button {padding:0; background-color:#EAE6EF; margin:20px auto 0 auto; width:175px; height:175px;
border:none; background-color:transparent;}
/*Drop-down menu rules-------------------------------------------------------------------------------------------------------------*/
#family #content #h1-and-nav #main-nav #active #drop-menu {}
#family #content #h1-and-nav #main-nav #active #drop-menu .drop-li {color:#ABC7CE; background-color:#EAE6EF;
width:189px; height:22px; text-align:center; border-top:1px solid #ABC7CE; padding-top:7px;}
#family #content #h1-and-nav #main-nav #active #drop-menu .drop-li a {font-size:12.4px; font-weight:bold; display:inline; padding:9px 6px 5px 6px;}
#family #content #h1-and-nav #main-nav #active #drop-menu .drop-li a:hover {background-color:#DCF0F9; border:none; font-weight:bold;}
/*Welcome page magnet rules-----------------------------------------------------------------------------------------------*/
#daughters #magnet-1, #daughters #magnet-2, #daughters #magnet-3 {background-image:url(../images/welcome-page-magnet-background-daughters.png);}
#family #magnet-1, #family #magnet-2, #family #magnet-3 {background-image:url(../images/welcome-page-magnet-background-family.png);}
#daughters #magnet-1 p, #daughters #magnet-2 p, #daughters #magnet-3 p {background-color:#F6F6F6;}
#family #magnet-1 p, #family #magnet-2 p, #family #magnet-3 p {background-color:#DCF0F9;}
#daughters #magnet-area a:link, #daughters #magnet-area a:visited, #daughters #magnet-area a:hover,
#daughters #magnet-area a:active {color:#333333; text-decoration:none;}
#daughters #magnet-area p a:hover {border-bottom:/*1px solid #BCABD0*/none; color:#BCABD0;}
#family #magnet-area a:link, #family #magnet-area a:visited, #family #magnet-area a:hover,
#family #magnet-area a:active {color:#666666; text-decoration:none;}
#family #magnet-area p a:hover {border-bottom:/*1px solid #ABC7CE*/none; color:#ABC7CE;}
/*Other magnet rules----------------------------------------------------------------------------------------------------------*/
#daughters .daughters-magnet-box {width:240px; height:88px; border:1px solid #BCABD0; padding:0; margin:15px 9px 5px 0;
background-color:#F6F6F6; float:left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;}
#daughters .daughters-magnet-box p {margin:5px 10px;}
#daughters .daughters-magnet-box h3 {width:auto; height:auto; margin:0; padding:8px; color:#FCF; background-color:#BCABD0;
font-family:"Courier New", Courier, monospace; font-weight:normal; font-size:16px; text-align:center;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;}
#family .family-magnet-box {width:240px; height:105px; border:1px solid #BCABD0; padding:0; margin:15px 9px 5px 0;
background-color:#EAE6EF; float:left;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;}
#family .family-magnet-box p {margin:5px 10px;}
#family .family-magnet-box h3 {width:auto; height:auto; margin:0; padding:8px; color:#ABC7CE; background-color:#DCF0F9;
font-family:"Courier New", Courier, monospace; font-weight:normal; font-size:16px; text-align:center;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;}
/*Dual footer rules, common ones above-----------------------------------------------------------------------------------------------*/
#daughters #footer, #daughters #footer a {color:#BCABD0;}
#family #footer, #family #footer a {color:#BCABD0;}
#daughters #footer a:hover {border-bottom:1px dotted #BCABD0; color:#BCABD0; font-weight:bold;}
#family #footer a:hover {border-bottom:1px dotted #ABC7CE; color:#ABC7CE; font-weight:bold;}
/*Rules for photo album pages and iframes-----------------------------------------------------------------------------------------------*/
/*This acts as the div 'body-copy-area' acts on non-gallery pages. Here if you add to padding, you must subtract from width. If you subtract from padding, add to width.*/ #album-iframe-area {float:left; margin:0; padding:45px 20px 0px 20px; width:868px; background-image:url(../images/background-border.png);
background-repeat:no-repeat; background-color:#FFF; min-height:810px; /*border-left:1px solid #999999;*/}
iframe {margin-top:15px; /*border:1px solid #999999*/; width:100%; height:950px;}
#link-box {width:858px; float:right; margin:0; padding:5px; text-align:center; font-size:11.5px;}
#link-box a {border-bottom:none; list-style-type:none;}
#link-box a:hover {text-decoration:none; border-bottom:1px solid #999; border-top:1px solid #999;}
#family #link-box #active-box-link {font-weight:bold; color:#ABC7CE;}
#daughters #link-box #active-box-link {font-weight:bold; color:#BCABD0;}
#family #link-box {border:1px solid #ABC7CE; background-color:#DCF0F9;}
#daughters #link-box {border:1px solid #BCABD0; background-color:#E4D6E8;}