/* butterflyportraits.co.uk css*/


/* basics */

body { 
	font-family: Comic Sans MS, Verdana, Arial, Helvetica, sans-serif;
	font-color: #FFFFFF; 
	margin: 0px;
	padding: 0px;
	background-color: #EDC5DD;
		}

.clearfloat {
    clear : both;
    float : none;
}

/* text styles */
	
p { 
	text-align: justify;
	font-size: 16px;
	color: #FFFFFF; 
	margin-top: 0px;
	margin-bottom: 0px;
		}
	
p.p1 { 
	text-align: justify;
	font-size: 16px;
	color: #E19FC7; 
	margin-top: 0px;
	margin-bottom: 0px;
		}

p.p2 { 
	text-align: justify;
	font-size: 16px;
	color: #FF6600; 
	margin-top: 0px;
	margin-bottom: 0px;
		}

p.p3 { 
	text-align: justify;
	font-size: 16px;
	color: #FFCC00; 
	margin-top: 0px;
	margin-bottom: 0px;
		}

p.p4 { 
	text-align: justify;
	font-size: 20px;
	color: #FFFFFF; 
	margin-top: 0px;
	margin-bottom: 0px;
		}

p.p5 { 
	text-align: justify;
	font-size: 12px;
	color: #FFFFFF; 
	margin-top: 0px;
	margin-bottom: 0px;
		}

h1 { 
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #FFFFFF;
	margin-bottom: 0px;
		}

h2 { 
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 1px;
	color: #000000;
	margin-bottom: 0px;
		}

ul {
	margin-left: 10px;
		}
#nodot ul {
	margin-left: -10px;
	list-style: none;
}

li {
	margin-left: 20px;
	color:#FFFFFF;
		}

a:link, a:visited { 
	font-weight: bold;
	text-decoration: none; 
	color: #FFFFFF;
		}
	
a:hover, a:active { 
	font-weight: bold;
	text-decoration: none; 
	color: #FFFFFF;
		}

a.a3:link, a.a3:visited, a.a3:active { 
/* this is for the links on the portfolio page*/
	font-size: 14px;
	margin-left: 27px;
	color: #FFFFFF;
	background-color: #9F1B33;
		}
	
a.a3:hover {
	font-size: 14px;
	color: #9F1B33;
	background-color: #FFFFFF;
		}

.indent {
	margin-left: 10px;
}

.borderless {
/* used for removing border from linked images */
	border: 0px;
}

/*STRUCTURE */

#container { 
	position: relative;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	width: 756px; 
	}
	html>body #container {
	width: 756px;
	}

/* COMMON ELEMENTS */

#topsection {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 90px;
	border-bottom: 1px solid black;
	background-color: #9F1B33;
		}

#topsection h1 {
	position: absolute;
	top: 0px;
	width: 100%;
	margin:0 /*needed for firefox*/
		}

#topsection h1 span {
	display: none;
		}

.header {
	background: url(../images/header.gif) top left no-repeat;
	width: 756px;
	height: 80px;
		}

#topmenu { 
	text-align: center;
	padding-left: 10px;
	padding-top: 0px;
	padding-bottom: 5px;
	padding-right: 10px;
	background-color: #9F1B33;
		}
	
#topmenu a { 
	font-size: 14px;
	color: #FFFFFF;
	background-color: #9F1B33;
		}
	
#topmenu a:hover {
/* background colour white when hovering*/
	font-size: 14px;
	color: #9F1B33;
	background-color: #FFFFFF;
		}

#topmenu a.a1 { 
/* this is for the current page*/
	font-size: 14px;
	color: #DA88B9;
	background-color: #9F1B33;
		}
	
#topmenu a.a1:hover, a.a1:active {
/* background colour doesn't change when hovering*/
	font-size: 14px;
	color: #DA88B9;
	background-color: #9F1B33;
		}

#topmenu a.a2 { 
/* this is to hide unused menu links*/
	font-size: 14px;
	color: #9F1B33;
	background-color: #9F1B33;
		}
	
#topmenu a.a2:hover, a.a2:active {
/* this is to hide unused menu links*/
	font-size: 14px;
	color: #9F1B33;
	background-color: #9F1B33;
		}

#designedby {
/* this is for the web designer's reference */
	position: absolute;
	top: 80px;
	right: 27px;
	}

#designedby a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: normal;
	color: #FFFFFF;
	}
	
#designedby a:hover, a:active {
/* background colour white when hovering*/
	color: #9F1B33;
	background-color: #FFFFFF;
		}

#contentbox {
	position: absolute; 
	top: 101px;
	left: 0px;
	width: 756px;
	padding-top: 10px;
	padding-bottom: 20px;
	background-color: #9F1B33;
		}

#contentbox h2 {
	position: absolute;
	top: 0px;
	margin:0 /*needed for firefox*/
		}

#contentbox h2 span {
	display: none;
		}

#midleft {
	position: absolute; 
	top: 101px;
	left: 189px;
	width: 219px;
	background-color: #9F1B33;
		}
	
#midleft h2 {
	position: absolute;
	top: 0px;
	margin:0 /*needed for firefox*/
		}

#midleft h2 span {
	display: none;
		}

#midright {
	position: absolute; 
	top: 101px;
	left: 408px;
	width: 159px;
	background-color: #9F1B33;
		}

#midright h2 {
	position: absolute;
	top: 0px;
	margin:0 /*needed for firefox*/
		}

#midright h2 span {
	display: none;
		}

#right189 {
	position: absolute; 
	top: 101px;
	right: 0px;
	width: 189px;
	background-color: #9F1B33;
		}

#right189 h2 {
	position: absolute;
	top: 0px;
	margin:0 /*needed for firefox*/
		}

#right189 h2 span {
	display: none;
		}

#right276 {
	position: absolute;
	top: 101px;
	left: 480px;
	width: 276px;
	margin-bottom: 10px;
	padding: 0; 
		}

#right276 h2 {
	position: absolute; 
	top: 0px;
	margin:0 /*needed for firefox*/
		}

#right276 h2 span {
	display: none;
		}

#right378 {
	position: absolute;
	top: 101px;
	left: 378px;
	width: 378px;
	margin-bottom: 10px;
	padding: 0; 
		}

#right378 h2 {
	position: absolute; 
	top: 0px;
	margin:0 /*needed for firefox*/
		}

#right378 h2 span {
	display: none;
		}

#right496 {
	position: absolute; 
	top: 101px;
	left: 260px;
	width: 496px;
	background-color: #9F1B33;
		}

#right496 h2 {
	position: absolute;
	top: 0px;
	margin:0 /*needed for firefox*/
		}

#right496 h2 span {
	display: none;
		}


.home-logo {
	background: url(../images/home/logo.gif) top left no-repeat;
	margin-top: 40px;
	margin-left: 40px;
	width: 252px;
	height: 390px;
		}

.home-photo {
	background: url(../images/home/photo.jpg);
	margin-top: 25px;
	margin-left: 52px;
	width: 400px;
	height: 400px;
		}

.portfolio-logo{
	background: url(../images/portfolio/logo.gif) top left no-repeat;
	margin-top: 80px;
	margin-left: 0px;
	width: 199px;
	height: 199px;
		}

.portfolio-babies{
	background: url(../images/portfolio/babies.jpg) top left no-repeat;
	margin-top: 5px;
	margin-left: 27px;
	width: 134px;
	height: 200px;
		}

.portfolio-kids{
	background: url(../images/portfolio/kids.jpg) top left no-repeat;
	margin-top: 5px;
	margin-left: 27px;
	width: 134px;
	height: 200px;
		}

.portfolio-inbetweenies{
	background: url(../images/portfolio/inbetweenies.jpg) top left no-repeat;
	margin-top: 5px;
	margin-left: 27px;
	width: 134px;
	height: 200px;
		}

.portfolio-families{
	background: url(../images/portfolio/families.jpg) top left no-repeat;
	margin-top: 5px;
	margin-left: 27px;
	width: 134px;
	height: 200px;
		}

.portfolio-pets{
	background: url(../images/portfolio/pets.jpg) top left no-repeat;
	margin-top: 5px;
	margin-left: 27px;
	width: 134px;
	height: 200px;
		}

.portfolio-grownups{
	background: url(../images/portfolio/grownups.jpg) top left no-repeat;
	margin-top: 5px;
	margin-left: 27px;
	width: 134px;
	height: 200px;
		}

.test-copy {
	margin-top: 30px;
	margin-left: 30px;
	margin-bottom: 30px;
	width: 420px;
		}

.test-photo1 {
	background: url(../images/testimonials/photo1.jpg) top left no-repeat; 
	margin-top: 30px;
	margin-left: 10px;
	width: 250px;
	height: 167px;
		}

.test-photo2 {
	background: url(../images/testimonials/photo2.jpg) top left no-repeat; 
	margin-top: 30px;
	margin-left: 10px;
	width: 250px;
	height: 167px;
		}

.test-photo3 {
	background: url(../images/testimonials/photo3.jpg) top left no-repeat; 
	margin-top: 30px;
	margin-left: 10px;
	width: 250px;
	height: 167px;
		}

.pricing-photo {
	background: url(../images/pricing/photo1.jpg) top left no-repeat; 
	margin-top: 70px;
	margin-left: 20px;
	width: 230px;
	height: 383px;
		}

.pricing-logo {
	background: url(../images/home/logo.gif) top left no-repeat;
	margin-top: 200px;
	margin-left: 40px;
	width: 252px;
	height: 390px;
		}

.pricing-copy {
	margin-top: 30px;
	margin-left: 30px;
	width: 420px;
		}

.about-photo {
	background: url(../images/about/photo.jpg) top left no-repeat;
	margin-top: 50px;
	margin-left: 40px;
	width: 200px;
	height: 420px;
		}

.about-logo {
	background: url(../images/about/logo.gif) top center no-repeat;
	margin-top: -100px;
	margin-left: 80px;
	width: 100px;
	height: 170px;
		}

.about-copy {
	margin-top: 30px;
	margin-left: 52px;
	width: 350px;
		}

.events-photo1 {
	background: url(../images/events/photo1.jpg) top left no-repeat; 
	margin-top: 40px;
	margin-left: 20px;
	width: 252px;
	height: 252px;
	padding-bottom: 20px;
		}

.events-photo2 {
	background: url(../images/events/photo2.jpg) top center no-repeat; 
	margin-top: 20px;
	margin-left: 60px;
	width: 169px;
	height: 252px;
	padding-bottom: 20px;
		}

.events-photo3 {
	background: url(../images/events/photo3.jpg) top center no-repeat; 
	margin-top: 20px;
	margin-left: 20px;
	width: 252px;
	height: 169px;
	padding-bottom: 20px;
		}

.events-copy {
	margin-top: 30px;
	margin-left: 30px;
	width: 430px;
		}

.events-copy1, .events-copy2, .events-copy3 {
	margin-left: 20px;
	width: 230px;
		}

.gallery-logo {
	background: url(../images/home/logo.gif) top left no-repeat;
	margin-top: 40px;
	margin-left: 40px;
	width: 252px;
	height: 360px;
		}

.babies1 {
	background: url(../images/babies/photo1.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 118px;
	width: 267px;
	height: 400px;
		}

.babies2 {
	background: url(../images/babies/photo2.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}
.babies3 {
	background: url(../images/babies/photo3.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}
.babies4 {
	background: url(../images/babies/photo4.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 118px;
	width: 267px;
	height: 400px;
		}
.babies5 {
	background: url(../images/babies/photo5.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}
.babies6 {
	background: url(../images/babies/photo6.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}

.babies7 {
	background: url(../images/babies/photo7.jpg) top left no-repeat;
	margin-top: 154px;
	margin-left: 52px;
	width: 400px;
	height: 140px;
		}

.kids1 {
	background: url(../images/kids/photo1.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 118px;
	width: 267px;
	height: 400px;
		}

.kids2 {
	background: url(../images/kids/photo2.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}

.kids3 {
	background: url(../images/kids/photo3.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 118px;
	width: 267px;
	height: 400px;
		}
.kids4 {
	background: url(../images/kids/photo4.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}

.kids5 {
	background: url(../images/kids/photo5.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 118px;
	width: 267px;
	height: 400px;
		}
.kids6 {
	background: url(../images/kids/photo6.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 52px;
	width: 400px;
	height: 400px;
		}

.kids7 {
	background: url(../images/kids/photo7.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 52px;
	width: 400px;
	height: 400px;
		}

.inbetweenies1 {
	background: url(../images/inbetweenies/photo1.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}

.inbetweenies2 {
	background: url(../images/inbetweenies/photo2.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 118px;
	width: 267px;
	height: 400px;
		}
.inbetweenies3 {
	background: url(../images/inbetweenies/photo3.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}

.inbetweenies4 {
	background: url(../images/inbetweenies/photo4.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}

.inbetweenies5 {
	background: url(../images/inbetweenies/photo5.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}

.inbetweenies6 {
	background: url(../images/inbetweenies/photo6.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 102px;
	width: 300px;
	height: 400px;
		}

.grownups1 {
	background: url(../images/grownups/photo1.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 52px;
	width: 400px;
	height: 400px;
		}

.grownups2 {
	background: url(../images/grownups/photo2.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 52px;
	width: 400px;
	height: 400px;
		}
.grownups3 {
	background: url(../images/grownups/photo3.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 118px;
	width: 267px;
	height: 400px;
		}

.grownups4 {
	background: url(../images/grownups/photo4.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 118px;
	width: 267px;
	height: 400px;
		}
.grownups5 {
	background: url(../images/grownups/photo5.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}

.grownups6 {
	background: url(../images/grownups/photo6.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 118px;
	width: 267px;
	height: 400px;
		}

.families1 {
	background: url(../images/families/photo1.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}

.families2 {
	background: url(../images/families/photo2.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}
.families3 {
	background: url(../images/families/photo3.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}

.families4 {
	background: url(../images/families/photo4.jpg) top left no-repeat;
	margin-top: 75px;
	margin-left: 52px;
	width: 400px;
	height: 300px;
		}
.families5 {
	background: url(../images/families/photo5.jpg) top left no-repeat;
	margin-top: 75px;
	margin-left: 52px;
	width: 400px;
	height: 300px;
		}

.families6 {
	background: url(../images/families/photo6.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 52px;
	width: 400px;
	height: 400px;
		}

.pets1 {
	background: url(../images/pets/photo1.jpg) top left no-repeat;
	margin-top: 25px;
	margin-left: 118px;
	width: 267px;
	height: 400px;
		}

.pets2 {
	background: url(../images/pets/photo2.jpg) top left no-repeat;
	margin-top: 91px;
	margin-left: 52px;
	width: 400px;
	height: 267px;
		}

/* BOTTOM DIVS */

#footercopy {
	padding-top: 40px;
	text-align: center;
	font-family: arial;
	font-size: 10px;
	color: #FFFFFF;
}

#footercopy a:link, a:visited { 
	text-decoration: none; 
	color: #E19FC7;
		}
	
#footercopy a:hover, a:active { 
	text-decoration: none; 
	color: #9F1B33;
	background-color: #FFFFFF;
		}

#xhtmlbadge {
	float: left;
	width: 180px;
	margin-right: 20px;
	padding-top: 20px;
}