/* CSS Document for wishes and me */

/* contents --------------------------------------------------

1. Main page elements
2. Header elements
3. Main content
4. Footer elements
5. Content page

colours:
Blue :#0972bb;
Dark grey: #606060;


-------------------------------------------------------------*/

/* 1. Main page elements -------------------------------------------------------*/

img {border:none;}

body {margin:0; padding:0;}

div#wrapper {width:945px; margin-left:auto; margin-right:auto;}

div#header-wrapper {width:100%; background:url(../../images/header-pixels.gif) repeat-x; height:50px; }

div#header {height:50px; width:945px; margin-left:auto; margin-right:auto; position:relative;}

div#logo-area {top:0; left:0; height:175px; width:225px; z-index:100; position:absolute; background:url(../../images/logo-bg-primed.png) no-repeat;}

div#flash-area {height: 330px; width:100%; background:white; margin:5px 0 0 0;}

div#flash-area-page {height: 177px; width:100%; background:white; margin:0px 0 0 0;}

div#main-content-wrapper {width:305px; float:left; padding-right:15px;}
div#main-content-wrapper p {font-size:0.9em;}

div#feature-item-wrapper {float:left; width:465px; margin:16px 0 0 0;}

div#secondary-nav {width:144px; margin:16px 0 0 15px; float:left; display:inline;}

div#footer-wrapper {width:100%; height:300px; background:url(../../images/footer_border.gif) repeat-x #dfdfdf;}

div#footer {width:945px; margin-left:auto; margin-right:auto;}

div.floatFix {clear:both;}



/* 2. Header elements -------------------------------------------------------*/


div#logo-area img {margin-left:15px; margin-top:50px;}
ul#nav {margin:0; padding:0; list-style:none; margin:0 0 0 235px;}
ul#nav li {float:left; margin:0px 0 0 0; padding:0px 3px 0 3px;}
ul#nav li.divide {border-right:solid 1px #4d4d4d; height:30px; margin-right:5px;}
ul#nav li a, ul#nav li a:active, ul#nav li a:visited { font-family: Times, serif; font-size:0.75em; position: relative; text-decoration:none; color:#fff; z-index:5; padding:16px 5px 0 5px; height:40px; display:inline-block; }
ul#nav li a:hover {background:url(../../images/nav-bg.gif) repeat-x; color:#606060; }
ul#nav li a:hover span.right {background:url(../../images/nav-bg-rght.gif) no-repeat right top; width:10px; height:40px; display:block; float:left; z-index:3; position:absolute; top:0; right:-5px;}
ul#nav li a:hover span.left {background:url(../../images/nav-bg-lft.gif) no-repeat left top; width:10px; height:40px; display:block; z-index:3; position:absolute; top:0; left:-5px;}


/* 3. Main content -------------------------------------------------------*/

h1 {font-family: Times, serif; color:#0972bb; font-weight:normal;}
h1.red{color:#CC2133;}
h1.blue{color:#1678BF;}
h1.brown{color:#C9A068;}
h1.grey{color:#99A5B1;}
p {font-family: Times, serif; font-size:0.75em; color:#606060;}
h5 {font-family: Times, serif; font-size:12px; font-weight:normal; color:#fff;}
p.intro {font-weight:bold;}
div.feature-item {width:225px; display:inline; height:161px; float:left;}
div.emergency {background:url(../../images/emergency-bg.jpg) no-repeat;}
div.obituary {background:url(../../images/obituary-bg.jpg) no-repeat; margin:16px 0 0 15px;}
div.living-will {background:url(../../images/living-will-bg.jpg) no-repeat;  margin:0 0 0 15px; }
div.time-capsule {background:url(../../images/time-cap-bg.jpg) no-repeat; margin:16px 0 0 0px;}
div#secondary-nav-top {background:url(../../images/secondary-nav-top.gif) no-repeat; height:18px; display:block; font-size:1px; }
div#secondary-nav-btm {background:url(../../images/secondary-nav-btm.gif) no-repeat; height:18px; padding:0; display:block; font-size:1px;}
div#share {margin-left:10px; margin-top:30px;}
div#secondary-nav a {color:#fff;}
div#second {margin:0 0 0 0; padding:5px 15px 3px 15px; background:#6e6e6e;}
div#second .tools {margin-left:30px;}
ul#second-nav {list-style:none; margin:0 0 0 0; padding:5px 15px 3px 15px; background:#6e6e6e;}
ul#second-nav li {display:block; width:100%;}
ul#second-nav li.divide {border-bottom:solid 1px #ffffff;}
ul#second-nav li a, ul#second-nav li a:visited, ul#second-nav li a:active {text-decoration:none; display:block; padding:3px 6px 6px 3px; font-weight:normal; font-size:0.85em;}

ul#second-nav li a:hover {background:#8b8b8b;}
div.feature-item h1 {margin:10px 0 0 75px; color:#fff;}
div.feature-item p {margin:7px 5px 0 75px; color:#fff;}
div.feature-item h5 {margin:7px 5px 0 75px; color:#fff;}
h3 {color:#0972bb; font-weight:normal; font-size:0.9em;}
h4 {color:#CC2132; font-weight:normal; font-size:0.9em;}
h2 {font-family: Times, serif; color:#0972bb; font-weight:normal; font-size: 1.2em;}
a {font-family: Times, serif; font-size:1em; color:#606060; text-decoration:none;}
a:hover {font-family: Times, serif; font-size:1em; color:#606060; text-decoration:underline;}

div#card-button {float:left; padding:15px 15px 15px 15px; margin-right:20px; margin-left:150px;}
div#storage-button {float:left; padding:15px 15px 15px 15px;}

/* 4. Footer elements -------------------------------------------------------*/

div#footer img {margin:-8px 0 0 0;}
div#footer p {color:#0972bb; margin:0;}
div#footer a {color:#0972bb}
div#footer-frank {float:right; color:#0972bb; margin-top:-15px; font-size:0.75em;}
div#footer-frank-splash {float:right; color:#fff; margin-top:-15px; font-size:0.75em;}
div#footer-details {float:left; color:#0972bb; margin-top:-15px; font-size:0.75em;}

/* 5. Content page elements -------------------------------------------------------*/

div#main-content-wrapper-loggedinpage {width:755px; float:left; margin:16px 0 0 0; padding-right:15px;}
div#main-content-wrapper-loggedinpage p {font-size:0.9em;}
div#main-content-wrapper-loggedinpage a {font-family: Times, serif; font-size:1em; color:#0972bb; text-decoration:none;}
div#main-content-wrapper-loggedinpage a:hover {font-family: Times, serif; font-size:1em; color:#0972bb; text-decoration:underline;} 
div#image-area {height: 177px; width:100%; margin:5px 0 0 0; background:url(../../images/primed-placeholder.jpg) no-repeat top center;}
div#image-area-brown {height: 177px; width:100%; margin:5px 0 0 0; background:url(../../images/wishes-me-brown.jpg) no-repeat top center;}
div#image-area-red {height: 177px; width:100%; margin:5px 0 0 0; background:url(../../images/wishes-me-red.jpg) no-repeat top center;}
div#image-area-grey {height: 177px; width:100%; margin:5px 0 0 0; background:url(../../images/wishes-me-grey.jpg) no-repeat top center;}
div#feature-item-wrapper-loggedinpage {width:225px; float:left; margin:16px 0 0 0;}
div#feature-item-wrapper-loggedinpage div.time-capsule {margin:16px 0 0 0px;}
div#feature-item-wrapper-loggedinpage div.obituary {margin:16px 0 0 0px;}
div#feature-item-wrapper-loggedinpage div.living-will {margin:16px 0 0 0px;}
div#main-content-wrapper-loggedinpage li {color:#0972bb;}
div#main-content-wrapper-contentpage {width:730px; float:left; margin-left:15px;}
div#main-content-wrapper-contentpage p {font-size:0.9em;}
div#main-content-wrapper-contentpage a {font-family: Times, serif; font-size:1em; color:#0972bb; text-decoration:none;}
div#main-content-wrapper-contentpage a:hover {font-family: Times, serif; font-size:1em; color:#0972bb; text-decoration:underline;} 
div#image-area {height: 177px; width:100%; margin:5px 0 0 0; background:url(../../images/primed-placeholder.jpg) no-repeat top center;}
div#feature-item-wrapper-contentpage {width:225px; float:left; margin:16px 0 0 0;}
div#feature-item-wrapper-contentpage div.time-capsule {margin:16px 0 0 0px;}
div#feature-item-wrapper-contentpage div.obituary {margin:16px 0 0 0px;}
div#feature-item-wrapper-contentpage div.living-will {margin:16px 0 0 0px;}

div#boxes {margin-top:17px; width:730px;}
div#box1 {margin:0px; display:inline;}
div#box2 {margin-left:20px; display:inline;}
div#box3 {margin-left:20px; display:inline;}
div#box4 {margin-left:20px; display:inline;}

/* 6. Splash page elements -------------------------------------------------------*/

body.splash {background:#fff;}
div#logo-splash {margin-left:auto; width:800px; margin-right:auto; margin-top:200px;}
div#logo-splash p {text-align:center;}
div#logo-splash a {color:#0972bb; font-family: Times, serif; font-weight:normal; font-size:1em;}
div#login-wrapper { margin-left:182px; margin-right:auto;  margin-top:16px;}
div#login-wrapper p {color:#fff; font-family: Times, serif; color:#fff; font-weight:normal; font-size:1em; margin-left:15px;}
div.login {width:282px; height:216px; float:left;}
div.emergency-splash {background:url(../../images/splash-emergency-bg_2.jpg) no-repeat;}
div.register-splash {background:url(../../images/splash-login-bg_2.jpg) no-repeat; margin-left:15px;}
div#wrapper-splash {width:945px; margin-left:auto; margin-right:auto;}
div.login h1 {font-family: Times, serif; color:#fff; font-weight:normal; font-size:1.5em; margin:16px 0 0px 15px;}
div.emergency-splash input.splashInput {border:0;padding:0;width: 181px; background:url(../../images/form-bg-red.gif) no-repeat top left; height:18px; float:left; padding:8px 0 0 5px; margin-top:6px; margin-left:15px; margin-bottom:6px; color:#9a9a9a;}
div.login h1 {font-family: Times, serif; color:#fff; font-weight:normal; font-size:1.5em; margin:16px 0 10px 15px;}
div.login p {color:#fff; font-family: Times, serif; color:#fff; font-weight:normal; font-size:1em; margin-left:15px;}
div.login {width:282px; height:216px; float:left;}
div.register-splash input.splashInput {border:0;padding:0;width: 181px; background:url(../../images/form-bg-blue.gif) no-repeat top left; height:18px; float:left; padding:8px 0 0 5px; margin-top:6px; margin-left:15px; margin-bottom:6px; color:#9a9a9a;}
div#splashbutton {margin-left:10px;}
div#footer-wrapper-splash div#footer p {color:#fff; margin:0;}
div#footer-wrapper-splash div#footer a {color:#fff;}
div#login-wrapper-internal { margin-top:16px;}
div#wrapper-login {width:600px;}