/* Albertina Kerr - MAIN CSS (main.css) COPYRIGHT 2009 Albertina Kerr. All Rights Reserved. Code by Red Crown Studio - http://www.redcrownstudio.com/ Author: Chris King */ /* COLOR PALLETTE =================================================================================================================================================================================================== Blue - #17beee Dark Blue - #03547b Light Blue - #c8f7ff Dark Gray - #1f2e31 Brown - #523a2d Text - #000 Links - #000 /* GLOBAL RESET =================================================================================================================================================================================================*/ 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;} ul {list-style: none;} blockquote, q {quotes: 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;} /* GENERAL SELCTORS =================================================================================================================================================================================================*/ body { font: 12px "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #c8f7ff; background-color: #000; } p {margin: 0 0 15px 0; line-height: 1.5em; text-shadow: 0 0 0 #17beee;} /* HEADINGS */ #who h1 {margin: 0 0 20px 0; width: 359px; height: 29px; background: transparent url(../images/who-h1.png) no-repeat 0 0; text-indent: -9999px;} #wings h1 {margin: 0 0 30px 0; width: 224px; height: 29px; background: transparent url(../images/getwings-h1.png) no-repeat 0 0; text-indent: -9999px;} h2 {margin: 0 0 10px 0; font-size: 18px; color: #000;} #angels #jenelle h2, #story #jenelle h2 {margin: 0 0 10px 0; width: 115px; height: 18px; background: transparent url(../images/jenelle-heading.png) no-repeat 0 0; text-indent: -9999px;} #angels #don h2, #story #don h2 {margin: 0 0 10px 0; width: 84px; height: 18px; background: transparent url(../images/don-heading.png) no-repeat 0 0; text-indent: -9999px;} #angels #rivah h2, #story #rivah h2 {margin: 0 0 10px 0; width: 96px; height: 18px; background: transparent url(../images/rivah-heading.png) no-repeat 0 0; text-indent: -9999px;} #angels #marsha h2, #story #marsha h2 {margin: 0 0 10px 0; width: 117px; height: 18px; background: transparent url(../images/marsha-heading.png) no-repeat 0 0; text-indent: -9999px;} #angels #bernie h2, #story #bernie h2 {margin: 0 0 10px 0; width: 114px; height: 18px; background: transparent url(../images/bernie-heading.png) no-repeat 0 0; text-indent: -9999px;} #wings #volunteer {text-indent: -9999px;} #wings #volunteer a {display: block; margin: 0 0 5px 0; width: 124px; height: 17px; cursor: pointer; background: transparent url(../images/volunteer-heading.png) no-repeat 0 0;} #wings #volunteer a:hover {background-position: 0 -17px;} #wings #give {text-indent: -9999px;} #wings #give a {display: block; margin: 0 0 5px 0; width: 63px; height: 17px; cursor: pointer; background: transparent url(../images/give-heading.png) no-repeat 0 0;} #wings #give a:hover {background-position: 0 -17px;} #wings #work {text-indent: -9999px;} #wings #work a {display: block; margin: 0 0 5px 0; width: 169px; height: 17px; cursor: pointer; background: transparent url(../images/work-heading.png) no-repeat 0 0;} #wings #work a:hover {background-position: 0 -17px;} h3 {margin: 0 0 5px 0; font-size: 14px; font-weight: bold; color: #000;} h4 {margin: 0 0 5px 0; font-size: 12px; font-weight: bold; color: #000;} /* LINKS */ a:link {color: #523a2d; text-decoration: none; border-bottom: dashed 1px;} a:visited {color: #523a2d; text-decoration: none; border-bottom: dashed 1px;} a:hover {color: #fff; text-decoration: none;} a:active {color: #523a2d; text-decoration: none; border-bottom: dashed 1px;} /* LAYOUT =================================================================================================================================================================================================*/ html, body{ height: 100%; width: 100%; margin: 0; } #image {position: absolute; z-index:-99; top: 0; left: 0; width:100%; height:100%; background-repeat: no-repeat;} /* MAIN WRAP */ #mainWrap {margin: 0 auto; width: 971px;padding: 27px 0 0 27px;} /* LEFT COLUMN ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #leftColumn {float: left; width: 112px;} /* LOGO */ #logo {width: 63px; height: 83px; background: transparent url(../images/logo.png) no-repeat;} #logo a {display: block; width: 63px; height: 83px; border: none; } /* MAIN NAV */ #mainNav {margin: 28px 0 0 0; list-style-type: none;} #mainNav li {margin: 0 0 6px 0;} #mainNav li a {text-decoration: none; padding: 2px 4px; background: #17beee; color: #1f2e31; font: 11px arial, helvetica, sans-serif; font-weight: bold; border: none;} #mainNav li a:hover {color: #fff;} #mainNav #selected {background: transparent url(../images/mainnav-selected.png) 0 50% repeat-x;} /* RIGHT COLUMN ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #rightColumn {float: left; margin: 111px 0 0 0; width: 832px;} /* WHO WE ARE CONTENT */ #who #content {padding: 45px 58px; height: 422px; background: transparent url(../images/content-bg.png) no-repeat 0 0; width: 716px;} #who #contentLeft {float: left; padding: 40px 92px 0 0; width: 388px;} #who #contentLeft p { margin-bottom: 10px; margin-right: 18px;} #who #contentLeft #watch-the-video { float: left; width: 181px; height: 108px; margin: 11px 0 0 10px; border: 0; background: transparent url(../images/whoweare_video.png) no-repeat 0 0; } #who #contentLeft #watch-the-video:hover { background-position: 0 -108px; } #who #contentLeft ul { float: left; margin: 25px 0 0 18px; } #who #contentLeft ul li a { display: block; width: 179px; height: 11px; margin-bottom: 10px; text-indent: -9999px; border: 0; background: transparent url(../images/whoweare_links.png) no-repeat 0 0; } #who #contentLeft ul li#video-link a { height: 14px; } #who #contentLeft ul li#manifesto-link a { background-position: 0 -24px;} #who #contentLeft ul li#facebook-link a { background-position: 0 -45px;} #who #contentLeft ul li#website-link a { background-position: 0 -66px;} #who #contentLeft ul li#video-link a:hover { height: 14px; background-position: 0 -77px;} #who #contentLeft ul li#manifesto-link a:hover { background-position: 0 -101px;} #who #contentLeft ul li#facebook-link a:hover { background-position: 0 -122px;} #who #contentLeft ul li#website-link a:hover { background-position: 0 -143px;} #who #contentRight {float: left; padding: 0 0 0 50px; border-left: dashed 1px #b5e7f5; width: 185px;} #who #contentRight h2 {margin: 0 0 5px 0; font: 11px arial, helvetica, sans-serif; font-weight: bold; color: #03547b; text-transform: uppercase; letter-spacing: 1px; line-height: 1.5em;} #who #contentRight p {font-family: arial, helvetica, sans-serif; font-weight: bold; color: #03547b; text-shadow: 0 0 0 #17beee;} #who #contentRight p:last-child, #who #contentRight p.last {margin: 0;} /* ANGELS CONTENT */ #angels #content {padding: 45px 40px; height: 422px; background: transparent url(../images/content-bg.png) no-repeat 0 0; } #angels #contentLeft {float: left; margin: 0 20px 0 0; width: 356px;} /* ANGEL WRAP */ .angelWrap {float: left; margin: 0 0 20px 0;} .angelWrap a.thumb {float: left; margin: 0 13px 0 0; padding: 8px 7px 7px 7px; width: 151px; height: 110px; background: transparent url(../images/thumb-border.png) no-repeat 0 0; border: none;} .angelWrap a.thumb:hover {background-position: 0 -125px;} .angelWrap .textBox {float: left; margin: 14px 0;} .angelWrap li {margin: 0 0 3px 0; font-family: Georgia, Times, serif; font-size: 11px; font-style: italic;} .angelWrap .textBox a {font-size: 10px; border-bottom: dashed 1px;} #angels #contentRight {float: left; margin: 0 0 0 20px; width: 356px;} /* ANGEL STORY */ #story #content {position: relative; padding: 45px 40px 0 40px; height: 467px; background: transparent url(../images/content-bg.png) no-repeat 0 0;} #story .contentLeft {float: left; margin: 0 30px 0 0; width: 220px;} #story .contentRight {float: left; width: 482px;} #story .angelWrap .photo {float: left; margin: 0 20px 0 0; padding: 10px; background: transparent url(../images/photo-border.png) no-repeat 0 0;} #story .angelWrap .textBox p {margin: 0; font-family: Georgia, Times, serif; font-style: italic;} #story #jenelle .leadIn {margin: 0 0 15px 0; width: 424px; height: 64px; background: transparent url(../images/jenelle-leadin.png) no-repeat 0 0; text-indent: -9999px;} #story #don .leadIn {margin: 0 0 15px 0; width: 426px; height: 64px; background: transparent url(../images/don-leadin.png) no-repeat 0 0; text-indent: -9999px;} #story #rivah .leadIn {margin: 0 0 15px 0; width: 423px; height: 64px; background: transparent url(../images/rivah-leadin.png) no-repeat 0 0; text-indent: -9999px;} #story #marsha .leadIn {margin: 0 0 15px 0; width: 427px; height: 63px; background: transparent url(../images/marsha-leadin.png) no-repeat 0 0; text-indent: -9999px;} #story #bernie .leadIn {margin: 0 0 15px 0; width: 415px; height: 64px; background: transparent url(../images/bernie-leadin.png) no-repeat 0 0; text-indent: -9999px;} #story p {margin: 0 0 5px 0; text-shadow: 0 0 0 #17beee;} #story span {font-family: Georgia, Times, serif; color: #03547b; font-size: 10px; font-weight: bold;} #story .backLink {display: block; position: absolute; z-index: 100; bottom: 25px; right: -7px; padding: 3px 10px; background: #03547b; border: none; color: #0ba2cd;} #story .backLink:hover {background: #fff; color: #1f2e31;} /* GET YOUR WINGS */ #wings #content {padding: 45px 58px; height: 422px; background: transparent url(../images/content-bg.png) no-repeat 0 0;} #wings #contentLeft {float: left; padding: 55px 40px 0 0; border-right: dashed 1px #b5e7f5; width: 440px;} #wings #contentLeft h2 {margin: 0;} #wings #contentLeft p {margin: 0 0 10px 0;} #wings #contentLeft h2 {margin: 15px 0 0 0; color: #fff; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-size: 20px; font-weight: normal; letter-spacing: 2px;} #wings #contentLeft h2 a {color: #fff; border: none; cursor: pointer;} #wings #contentLeft h2 a:hover {color: #03547b;} #wings #contentLeft h2 span {color: #03547b;} #wings #contentLeft p {margin: 0 0 20px 0; color: #c8f7ff; text-shadow: 0 0 0 #17beee;} #wings #contentLeft .linkDesc {font-family: Georgia, Times, serif; font-style: italic;} #wings #contentRight {float: left; padding: 50px 0 0 50px; width: 185px;} #wings #contentRight .photo {margin: 0 0 10px 0; padding: 10px 10px 10px 8px; background: transparent url(../images/getinvolved-photo-border.png) no-repeat 0 0;} #wings #contentRight p {margin: 0 20px; font-family: arial, helvetica, sans-serif; font-weight: bold; color: #03547b; text-shadow: 0 0 0 #17beee;} #video #content {padding: 45px 58px; height: 422px; background: transparent url(../images/content-bg.png) no-repeat 0 0;} #video .youtube { margin: 0 auto; width: 560px; height: 340px; border: 5px solid #fff; } #video #content ul { margin: 28px auto 0 auto; width: 565px; } #video #content ul li { float: left; padding-bottom:3px; text-align: center; border-right: 1px dashed #fff; } #video #content ul li a { font-size: 11px; padding-right: 17px; border: 0; background: transparent url(../images/camera.gif) no-repeat right center; } #video #content ul li a span { border-bottom: 1px dashed #523a2d; } #video #content ul li a:hover span { border-bottom: 1px dashed #fff; } #video #content ul li .title { display: block; margin: 0 auto 6px auto; height:19px; text-indent: -9999px; background: transparent url(../images/video_links.png) 0 0; } #video #content ul li#manifesto .title {width: 159px;} #video #content ul li#techniques .title { width:101px; background-position: -228px 0;} #video #content ul li#confessions .title { width:111px; background-position: -402px 0;} #video #content ul li#manifesto {width:216px;} #video #content ul li#techniques { width:168px;} #video #content ul li#confessions { width:178px; border:0; } #slider { width: 758px; height: 450px; overflow: hidden; } #slider li {float: left; width: 755px; height: 436px; } #prevBtn {position: absolute; top: 245px; left: -7px;} #prevBtn a {display: block; padding: 3px 5px; border: none; background: #1C99BE; color: #fff; font-size:13px;} #prevBtn a:hover {background: #fff; color: #1f2e31;} #nextBtn {position: absolute; top: 245px; right: -7px;} #nextBtn a {display: block; padding: 3px 5px; border: none; background: #1C99BE; color: #fff; font-size:13px;} #nextBtn a:hover {background: #fff; color: #1f2e31;} #prevBtn.disabled, #nextBtn.disabled { visibility: hidden; } /* FOOTER ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/ #footer {clear: both; padding: 20px 58px 0 170px; width: 716px;} #footer p {font-size: 9px; color: #777; text-shadow: none;} /* GENERIC CLASSES =================================================================================================================================================================================================*/ .hide {display: none;} .clear {clear: both;} .center {text-align: center;}