* { margin:0; padding:0; }

html { height:100%; }

body {
background:#e7e4db url(background.png) center repeat-y;
color:#6b6b6b;
font-size:0.85em;
height:100%;
}

a {
color:#6b6b6b;
}

a img {
border:0;
}

ul, li {
list-style-position:inside;
}

ul.nostyle li {
list-style:none;
margin-left:10px;
}

ul.left li {
margin-left:10px;
}

#wrap {
margin:0 auto;
width:807px;
background:#ffffff;
border:1px solid #ddd9cd;
border-top:none;
position:relative;
font:0.8em Georgia, "Times New Roman", Times, serif;
}

#header {
background:url(header.png) no-repeat;
width:807px;
height:131px;
}

h1 {
font-size:0;
text-indent:-2000px;
width:120px;
height:80px;
margin-left:20px;
}

h1 a {
display:block;
width:100%;
height:100%;
}

#dressupWrap {
width:662px;
margin:0 auto;
}

#dressupHeader {
background:url(dressuph1.png) center center no-repeat;
width:592px;
height:126px;
}

#projects img {
border:1px solid #dadcdd;
}

#colours {
padding:17px 7px 17px 7px;
width:252px;
height:312px;
background:#f2efea;
color:#000000;
float:left;
margin-right:20px;
margin-bottom:20px;
}

#colours h2 {
clear:both;
font-weight:normal;
margin-left:10px;
font-size:1.2em;
}

#colours a {
display:block;
float:left;
margin:6px 4px 9px 4px;
padding:4px;
}

#colours a.selected {
padding:3px;
border:1px solid #8c8d8e;
}

#colours span {
width:26px;
height:26px;
display:block;
}

#preview {
width:256px;
height:349px;
float:left;
position:relative;
}

#preview img {
margin:12px;
}

#preview #text {
margin:0;
border:0;
position:absolute;
top:116px;
left:40px;
}

ul#menu {
position:relative;
top:20px;
left:85px;
width:800px;
}

ul#menu li a .bf {
display:none;
width:5px;
height:19px;
position:relative;
right:8px;
z-index:11;
background:url(hoverLeft.png) center center no-repeat;
}

ul#menu li a .af {
display:none;
width:4px;
height:19px;
position:absolute;
top:0;
right:-7px;
z-index:11;
background:url(hoverRight.png) center center no-repeat;
}

ul#menu li a:hover .bf, ul#menu li a:hover .af { display:block; }
ul#menu li a.active .bf, ul#menu li a.active .af { display:block; }

ul#menu li {
float:left;
font-size:0;
text-indent:-2000px;
list-style:none;
height:19px;
}

ul#menu li a {
display:block;
position:relative;
z-index:10;
background:center no-repeat;
height:19px;
}

ul#menu li a#wedding {
background-image:url(./menu/wedding.png);
width:55px;
left:1px;
bottom:2px;
}

ul#menu li a#baby {
background-image:url(./menu/baby.png);
width:30px;
left:31px;
bottom:3px;
}

ul#menu li a#party {
background-image:url(./menu/party.png);
width:33px;
left:63px;
bottom:3px;
}

ul#menu li a#dressup {
background-image:url(./menu/dressup.png);
width:54px;
left:95px;
bottom:5px;
}

ul#menu li a#gallery {
background-image:url(./menu/gallery.png);
width:43px;
left:128px;
bottom:6px;
}

ul#menu li a#faqs {
background-image:url(./menu/faqs.png);
width:24px;
left:156px;
bottom:7px;
}

ul#menu li a#blog {
background-image:url(./menu/blog.png);
width:27px;
left:191px;
bottom:8px;
}

ul#menu li a#resources {
background-image:url(./menu/resources.png);
width:57px;
left:223px;
bottom:9px;
}

ul#menu li a#contact {
background-image:url(./menu/contact.png);
width:46px;
left:256px;
bottom:11px;
}

ul#menu li a#login {
background-image:url(./menu/login.png);
width:23px;
left:302px;
bottom:12px;
}

ul#menu li a#logout {
background-image:url(./menu/logout.png);
width:31px;
left:302px;
bottom:12px;
}

#content {
padding:5px 13px;
position:relative;
}

.hometext {
width:260px;
position:absolute;
top:12px;
left:525px;
}

.hometext h2 {
color:#e2636a;
font-size:1.2em;
font-weight:normal;
width:250px;
}

h2.image {
width:276px;
height:42px;
background:left top no-repeat;
font-size:0em;
text-indent:-2000px;
position:relative;
bottom:7px;
right:4px;
}

h2#faqs { background-image:url(./h2/faqs.png); }
h2#resources { background-image:url(./h2/resources.png); }
h2#weddings { background-image:url(./h2/wedding.png); }
h2#baby { background-image:url(./h2/baby.png); }
h2#party { background-image:url(./h2/party.png); }
h2#gallery { background-image:url(./h2/usergallery.png); }
h2#order { background-image:url(./h2/order.png); }
h2#contactus { background-image:url(./h2/contactus.png); }
h2#checkout { background-image:url(./h2/checkout.png); }

#content .hometext p {
color:#6b6b6b;
line-height:1.2em;
margin:7px 0 0 0;
}

#content h3, #signupTop h3 {
color:#e2636a;
font-weight:normal;
margin:7px 0 0 10px;
font-size:1.4em;
}

#content h3 a {
text-decoration:none;
}

#content h3 a:hover {
text-decoration:underline;
}

#content h4 {
color:#e2636a;
font-weight:normal;
margin:7px 0 0 10px;
font-size:1em;
}

#content p, #content pre, #signupTop p {
color:#6b6b6b;
line-height:1.2em;
margin:7px 0 17px 10px;
}

#content pre {
margin-top:-10px;
font-size:1.2em;
font-style:italic;
}

.weddingThumb {
float:left;
width:225px;
height:auto;
margin:5px 20px 5px 12px;
padding:7px 0 10px 0;
text-align:center;
position:relative;
}

.weddingThumb p.text {
height:auto;
text-align:left;
}

.weddingThumb h4 {
text-align:left;
}

.weddingThumb p img {
margin:0 auto;
display:block;
}

#content .pinkNote p {
text-align:center;
background:#fdcfdc;
padding:10px;
font-size:1.5em;
color:#333333;
}

#content .pinkNote p strong {
font-weight:normal;
font-size:1.2em;
}

#content .redNote p {
text-align:center;
background:#990000;
padding:10px;
color:#ffffff;
font-size:1.2em;
}

#signup, #signupTop {
border:1px solid #e8868b;
width:335px;
height:auto;
padding-bottom:10px;
position:absolute;
top:55px;
right:10px;
background:#ffffff;
}

#signupTop {
z-index:50;
top:250px;
left:240px;
}

#signup p, #signupTop p { margin-bottom:0; }
#signup h3, #signupTop h3 { margin-top:7px; }
.signupbox label {
display:block;
text-transform:lowercase;
float:left;
color:#6b6b6b;
width:80px;
font-size:0.9em;
}
.signupbox input { border:1px solid #969494; }

.loginButton {
border:1px solid #e8868b;
background:#f9e0e1;
color:#969494;
}

#projects {
margin-top:65px;
}

#projects .project {
float:left;
margin-right:40px;
}

#projects .project img {
width:130px;
height:90px;
border:1px solid #858585;
float:left;
margin-right:10px;
}

#projects .project .info {
float:left;
margin-top:9px;
width:220px;
}

#projects .project h3 {
padding-top:20px;
}

#projects .project p {
width:225px;
margin-left:0;
}

#projects .project p a {
color:#939598;
text-decoration:none;
}

#projects .project p a:hover {
text-decoration:underline;
}

#project .photos {
float:left;
width:390px;
}

#project {
height:359px;
}

#project .photos #largephoto {
width:388px;
height:268px;
border:1px solid #858585;
}

#project .photos #thumbnails {
margin-top:10px;
}

#project .photos #thumbnails a img {
width:90px;
height:63px;
border:1px solid #858585;
margin-right:4px;
}

#project .photos #thumbnails a img + a img {
margin-right:26px;
}

#project .photos #thumbnails a + a + a + a img {
margin-right:0;
}

#project .info {
float:left;
width:260px;
}

#bottombuttons {
clear:both;
margin-top:6px;
height:63px;
}

#bottombuttons img {
float:left;
margin-right:6px;
}

#newsletter {
float:left;
width:377px;
height:63px;
background:url(newsletter.png) no-repeat;
position:relative;
}

#newsletter div {
position:absolute;
top:8px;
right:20px;
}

#newsletter p {
margin:0 0 3px 0;
}

#newsletter .join {
position:absolute;
bottom:-14px;
right:0px;
}

#newsletter .join a:link {
text-decoration:none;
}

#newsletter .join a:hover {
text-decoration:underline;
}

#newsletter p label {
width:200px;
margin-right:10px;
}

#newsletter p input[type="text"] {
border:0;
background:#ffffff;
}

#weddingContent {
margin:0 0 10px 17px;
}

.extraphotos {
display:none;
}

h4 a { text-decoration:none; }
h4 a:hover { text-decoration:underline; }

#progress {
width:460px;
height:21px;
background:url(progress.png) no-repeat;
margin:10px auto;
}

#progress a {
display:block;
float:left;
font-size:0;
text-indent:-2000px;
}

#progress #style {
width:132px;
height:21px;
}

#progress #color {
width:134px;
height:21px;
}

#progress #accessorize {
width:132px;
height:21px;
}

#progress #print {
width:61px;
height:21px;
}

#order {
font-family:arial;
font-size:1.1em;
}

.row {
clear:both;
}

.col1 {
float:left;
width:420px;
margin-right:50px;
}

.col2 {
float:left;
width:60px;
}

.col3 {
float:left;
width:150px;
position:relative;
z-index:10;
}

#footer {
margin:30px auto 10px;
width:680px;
padding:4px 50px 2px;
height:14px;
background:#f9e0e1;
font-size:0.8em;
clear:both;
}

#footer a {
text-decoration:none;
}

#footer a:hover {
text-decoration:underline;
}

#footer p {
text-transform:lowercase;
}

#footer p {
float:left;
}

#footer p + p {
float:right;
}

#fade {
z-index:45;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(fade.png);
}