﻿/* headers ------------------------------------------------------------------ */

#header {position: relative; clear: both; width: 960px; height: 130px; background: #ffffff no-repeat;}
#header img{border: 0;}
#header .homeimage{position: relative; left: 15px; top: 15px;}
#header .headerstatement{position: absolute; right: 10px; top: 10px; font-size: 18px; text-align: right; color: #646464;}
#header .phone{position: absolute; right: 10px; top: 40px; font-size: 22px; margin-bottom: 5px; color: #646464;}
#header .twitter{position: absolute; right: 10px; top: 85px;}
#header .facebook{position: absolute; right: 56px; top: 85px;}
#header .plusone{position: absolute; right: 65px; top: 96px;}

#index #header {background-image:url(../images/header.jpg);}
#index #header .headerstatement {color: #646464;}
#index #header .phone {color: #646464;}

#weddings #header, #weddingalbums #header {background-image:url(../images/header.jpg);}

#portraits #header {background-image:url(../images/portraits-header.jpg);}
#portraits #header .headerstatement {color: #ffffff;}
#portraits #header .phone {color: #ffffff;}

#commercial #header {background-image:url(../images/commercial-header.jpg);}
#commercial #header .headerstatement{color: #ffffff;}
#commercial #header .phone{color: #ffffff;}

#events #header {background-image:url(../images/events-header.jpg);}
#events #header .headerstatement{color: #ffffff;}
#events #header .phone{color: #ffffff;}

#christenings #header {background-image:url(../images/christenings-header.jpg);}
#christenings #header .headerstatement{color: #ffffff;}
#christenings #header .phone{color: #ffffff;}

#onlinesales #header {background-image:url(../images/onlinesales-header.jpg);}
#onlinesales #header .headerstatement {color: #ffffff;}
#onlinesales #header .phone {color: #ffffff;}

#contact #header {background-image:url(../images/contact-header.jpg);}

#links #header {background-image:url(../images/header.jpg);}

/* main content backgrounds ------------------------------------------------- */

#mainContent{padding: 10px;}
#mainContent-background{padding: 10px;}
#weddings #mainContent-background{background: url(../images/wedding-background2.jpg) no-repeat;}
#weddingalbums #mainContent-background{background: url(../images/weddingalbums-background.jpg) no-repeat 380px 50px;}
#portraits #mainContent-background{background: url(../images/portrait-background.jpg) no-repeat;}
#christenings #mainContent-background{background: url(../images/christening-background.jpg) no-repeat;}
#events #mainContent-background{background: url(../images/eventphotography-background.jpg) repeat-y; color: #ffffff;}
#events #mainContent-background a{color: #CFCFCF;}
#commercial #mainContent-background{background: url(../images/commercial-background.jpg) no-repeat;}
#commercial #mainContent-background a{color: #CFCFCF;}
#links #mainContent-background{background: url(../images/links-background.jpg) no-repeat;}

#footer {clear: both; width: 960px; background: #ffffff; border-top: 2px solid #646464;}
#footer .quicklinks {font-size: 80%; margin: 0.4em; padding: 0.2em 0.4em;}
#footer .copyrightinfo{text-align: right; font-size:90%; margin: 0.4em; padding: 0.2em 0.4em;}

/* #topnav {clear: both; width: 100%; font-size: 16px; background: url(../images/navtop-background.jpg) no-repeat #9d9c93; margin-top: 1px;} */
#topnav{clear: both; width: 100%; font-size: 16px; background: #ffffff; margin-top: 5px; padding-bottom: 2px; border-bottom: 2px solid #646464;}
#topnav #mainnav{padding: 3px 15px;}
#topnav #mainnav a, #topnav #mainnav a:link, #footer a, #footer a:link{text-decoration: none; color:#000000;}
#topnav #mainnav a:hover, #footer a:hover{color:#787878;}

.clearboth {clear:both;}
.spacedtext {letter-spacing: 0.2em;}
.largeparatext {font-size: 110%; font-weight: bold;}

/* slideshow images */
#slideimage {float: right; width: 450px; height: 450px; text-align: center;}
#slideimage img{border: 2px solid #58595b; margin: 0 10px 10px 10px;}

/* index page */
#indextext {text-align: center;}
#indextext p{margin-bottom: 1em;}
#indextext img {margin: 10px auto; border: 0;}

#indexgateway {margin: 20px auto; text-align: center;}
#indexgateway a{display: inline-block; width: 180px; height: 180px; text-decoration: none; background: no-repeat; margin: 2px;}
#weddinggate a{background: url(../images/wedding-gateway-bw.jpg);}
#weddinggate a:hover{background: url(../images/wedding-gateway-colour.jpg);}
#portraitgate a{background: url(../images/portraits-gateway-bw.jpg);}
#portraitgate a:hover{background: url(../images/portraits-gateway-colour.jpg);}
#christeninggate a{background: url(../images/christenings-gateway-bw.jpg);}
#christeninggate a:hover{background: url(../images/christenings-gateway-colour.jpg);}
#eventsgate a{background: url(../images/events-gateway-bw.jpg);}
#eventsgate a:hover{background: url(../images/events-gateway-colour.jpg);}
#commercialgate a{background: url(../images/commercial-gateway-bw.jpg);}
#commercialgate a:hover{background: url(../images/commercial-gateway-colour.jpg);}

#ukbrideindex {width: 900px; margin: 20px auto;}
#ukbrideindex p{margin: 0 auto; padding-top: 35px; width: 650px; text-align: center; color:#e50687;}
#ukbrideindex img{float: right; border: 0;}

/* weddings page */
.weddingtext {width: 400px; background: url(../images/wedding-text-bg.png); padding-bottom:10px;}
.weddinglinks {margin: 10px auto; text-align: center;}
.weddinglinks img{margin: 10px; border: 0;}

/* wedding albums page */
#albumtext {float: left; width: 375px;}
#albummontages {float: right; width: 550px; margin-top: 20px;}
#albummontages img{margin: 5px;}

#albumpics {float: right; width: 240px;}
#albumpics img {float: right; margin-bottom: 15px;}
#tradalbum {margin: 10px auto;}

/* portraits */
#portraits h1{color: #ffffff;}
#portraittext {width: 570px; background: url(../images/portrait-text-background.png); padding-top: 10px; padding-bottom: 10px; color: #ffffff;}
.portraitthumbs {margin: 15px 10px;}
.portraitthumbs img{margin: 5px; border: 0;}

/* christenings page */
.christeningtext {width: 440px; background: url(../images/wedding-text-bg.png); padding-bottom:10px;}

/* event photography page */
#events h1{color: #ffffff;}
#events li{background-image:url(../images/asteriskbullet-white.png);}
.eventright {float: right; width: 510px; text-align: center;}
.eventright img{border: 2px solid #ffffff;}
.eventright h4, .eventright p{text-align: left;}

#eventthumbs {margin: 5px auto;}
#eventthumbs img{margin: 2px; border: 1px solid #ffffff;}
#printfolder {margin: 10px 10px 10px 100px;}

/* commercial photography page */
#commercial h1{color: #ffffff;}
#commercialtext {width: 410px; background: url(../images/portrait-text-background.png); color: #ffffff; padding-bottom:10px;}
#commercialimagegrid {float: right; width: 500px; background: #000000; text-align: center; padding-top: 10px; padding-bottom: 10px;}


/* online photo sales page */
#onlinesaleslink {float: right; border: 0; margin: 20px;}

#orderinginfo {float:right; width:490px; border: 1px solid black; margin-bottom: 10px;}
#orderinginfo h4{margin-top: 0.8em;}
#orderinginfo h4, #orderinginfo p{margin-left: 0.8em; margin-right: 0.8em;}
#orderinginfo #paypal{float: right; margin: 0;}

#gallerylist {width: 420px; color: #000000; background: #f1f1f1; padding-top: 1em; padding-bottom:1em;}
#gallerylist h4{margin-bottom:0.8em;}
#gallerylist p{margin-left: 2em;}


/* contacts page ------------------------------------------------------------------ */
#postcard {position: relative; width: 920px; height: 620px; background:url(../images/postcard.jpg) no-repeat; margin: 0 auto; font-size: 14px;}
#postcard #left{position: absolute; top: 45px; left: 15px; width: 420px;}
#postcard #right{position: absolute; top: 115px; right: 15px; width: 420px;}
#postcard h3{margin-bottom: 5px;}

.contact-form {float: left; width: 400px; margin-top: 10px;}
.contact-form form{margin-left: 30px; padding: 10px 0;}
.contact-form p{margin-top: 10px; margin-bottom: 10px;}
.contact-form .fieldlabel{float: left; display: inline; width: 70px;}
.contact-form .error{ display: block; margin-left: 70px; color: red;}
.contact-form input, .contact-form textarea{margin-top: 7px;}
.contact-form .submitbutton{margin-left: 70px; margin-top: 10px;}

#testimonial {clear:both;}

/* website photography page */
.websiteright {float: right; margin: 5px; border: 1px solid #58595b;}

/* links page */
#goldlink {float: right; width: 310px;}
#goldlink #top{background:url(../images/goldlinkstop.png) no-repeat; height: 52px;}
#goldlink #middle{background:url(../images/goldlinksmiddle.png) repeat;}
#goldlink #bottom{background:url(../images/goldlinksbottom.png) no-repeat; height: 18px;}
#goldlink #innergold{width: 290px; margin: 0 auto;}
#goldlink h4{margin: 0; padding: 0;}
#goldlink p{margin: 0; padding: 0;}
