/* FrenchMagician.com CSS; written by Will Morgan for MonsterCreations.co.uk.
   Contact me and get CSS help by doing the maily maily thing to: w [at] illmorgan [dot] com! */

* {
	margin: 0;
	padding: 0px 0px 3px 0px;
	border: 0;
	
} /* Resetting the padding of elements to reduce undesired effects */
html { font-size: 100%; } /* Resetting the font size so that we can use ems instead of px, pts and so on. */
body { background: #000 url('http://www.etiennemagicien.fr/layout/body-background.gif'); color: #fff; font-family: Verdana, Arial, Helvetica, sans-serif, sans; font-size: 62.5%; }
#layout {
	background: #fff url('http://www.etiennemagicien.fr/layout/header.jpg')  10px 10px no-repeat;
	color: #000;
	width: 750px;
	margin: 0px auto 10px auto;
	padding: 10px 10px 10px 10px;
}
#header { background-color: #fff; background-repeat: no-repeat; height: 293px; margin: 15px 15px 0px 15px; }
#header span { display: none; } /* hide the H1 text */


/* Alternating header images */
.about #header { background-image: url('http://www.frenchmagician.co.uk/layout/header-about.png'); height: 293px; width:720px }
.corporate #header { background-image: url('http://www.frenchmagician.co.uk/layout/header-corporate.png'); height: 293px; width:720px }
.private #header { background-image: url('http://www.frenchmagician.co.uk/layout/header-private.png'); height: 293px; width:720px }
.weddings #header { background-image: url('http://www.frenchmagician.co.uk/layout/header-weddings.png'); height: 293px; width:720px }
.clients #header { background-image: url('http://www.frenchmagician.co.uk/layout/header-clients.png'); height: 293px; width:720px }
.media #header { background-image: url('http://www.frenchmagician.co.uk/layout/header-media.png'); height: 293px; width:720px }
.awards #header { background-image: url('http://www.frenchmagician.co.uk/layout/header-awards.png'); height: 293px; width:720px }
.contact #header { background-image: url('http://www.frenchmagician.co.uk/layout/header-contact.png'); height: 293px; width:720px }


/* Menu CSS */
#menu {
	padding:0;
	margin:0;
	list-style:none;
	font-size:21px;
	font-family:"georgia", serif;
}


#menu table {border-collapse:collapse; height:0; width:0; margin:0 -4px -1px 0;}
#menu li {float:left; margin:0 5px;}

/* to adjust menu width - padding-right */
#menu li a {display:block; float:left; height:35px; line-height:35px; color:#000; text-decoration:none; border-bottom:3px solid #fff; margin-left:8px; padding-right: 9px;}


#menu li a.current {font-style:italic; color:#903; border-bottom:3px solid #aaa; cursor:text;}
 
#menu li:hover {position:relative; z-index:100;}
#menu li a:hover {color: #903; position:relative; z-index:100; border-bottom:3px solid #aaa;}
#menu li:hover > a {color: #903; border-bottom:3px solid #aaa;}
#menu ul {
	position:absolute;
	left:-9999px;
	top:38px;
	width:110px;
	padding:0;
	margin:0;
	list-style:none;
	background:url(trans.gif);
}
#menu ul li {margin:0;}
#menu ul li a {width:120px; height:25px; line-height:25px; font-size:15px; border:0; text-align:left; padding-left:0px;}
#menu ul li a:hover {border:0;}
#menu ul li:hover > a {border:0;}
 
#menu ul ul {position:absolute; margin-left:100%; top:0; padding:0; margin:0; list-style:none;}
 
#menu :hover ul {
	left:0px;
	right:auto;
}
#menu :hover ul ul {left:-9999px; width:120px; padding-left:0px; background:url(trans.gif);}
 
#menu li ul :hover ul {left: 110px; right:auto;}
#menu li ul li ul li a {text-align:left; color:#903;}
#menu li ul li ul li a:hover {color:#000;}
 
img.elegant {margin-top:250px;}
/* Menu CSS ENDS */


#subheader {
	padding:0px;
	margin:0px;
	border-width: 0px;
	height:185px;
	margin-bottom:0px;
	clear: left;
}


/* Content setup */
#content {
	padding: 25px 15px 5px 15px;
	border-top-width: 6px;
	border-bottom-width: 6px;
	border-left-width: 5px;
	border-right-width: 5px;
	border-style: solid;
	border-color: #731515;
	font-size: 1.3em;
	background: #fff;
	color: #666;
	width: 710px;
	clear: left;
}

/* Just yer general typography stunts here! */
#content p {
	line-height: 1.4em;
	text-align: justify;
	font-family: Verdana, Arial, Helvetica, sans-serif, sans;
	margin-top: 10px;
}
#content h2, h3, h4, h5, strong {
	color: #7d1a1a;
	background-color: inherit;
	margin-top: 10px;
}

#content h4 { font-size: 1.0em; }

/* Links and such */
#content a:link, #content a:visited { color: #666; background: #fff; text-decoration: underline; }
#content a:hover, #content a:active { color: #333; background: #fff; }

/* Replace H2 text with a custom font (background image is shared with the nav) */
#content h2 {
	height: 45px;
}
#content h2 span { display: none; }

/* Now for some list style loving... */
#content ul {
	list-style-position: inherit;
	margin: 10px 10px 20px 16px;
}
#content li {
	line-height: 1.4em;
	list-style-type: circle;
}

/* For sequences of images (3 across the bottom) */
p.sequence { white-space: nowrap; clear: both; line-height: 0em; padding: 0; margin: 0; }
p.sequence img {
	margin-right: 12px;
	margin-top: 12px;
	float: none;
}

/* Video Styling */
p.video { text-align: center; }
p.video object { margin: 0 auto; }

/* For two columned layouts */
div.main { 
float: left; 
width: 455px; 
}

.sidevideo {
	float: right;
	text-align:right;
	height:168px;
}

.sidevideo embed, .sidevideo object {
	margin: 0;
	float: right;
}


.side {
	clear:right;
	float: right;
	width: 224px;
	font-size: 0.85em;
}

/* The enquiry form */
form.side fieldset { border: none; }
form.side legend strong {
	margin: 10px 0 0 0;
	display: block;
	height: 34px;
	width: 224px;
	background: url('http://www.frenchmagician.co.uk/layout/etienne-enquiry.gif') center center no-repeat;
}
form.side legend strong span { display: none; }
form.side label { padding: 6px 0; color: #7d1a1a; }
form.side input, form.side textarea { padding: 3px; width: 203px; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1em; background: #fff; border: 1px #999 solid; }
form.side input:focus, form.side textarea:focus { background: #ffc; border-style: inset; }
form.side textarea { height: 80px; overflow: auto; }
form.side input.submit { display: block; width: auto; padding: 4px 6px; font-weight: 700; margin: 6px auto; border-style: outset; }
form.side img { display: block; margin: 0 auto; }

label { display: block; }

.clear { clear: both; }

img.left {
	float: left;
	margin: 10px 20px 10px 0px;
	border: 1px solid #C6C6C6;
	padding: 4px;
}
img.right {
	float: right;
	margin: 1px 2px 5px 20px;
	border: 1px solid #C6C6C6;
	padding: 4px;
}
img.verticalright {
	clear:right;
	float: right;
	margin: 10px 2px 10px 20px;
	border: 1px solid #C6C6C6;
	padding: 4px;
}
img.center, img.centre {
	display: block;
	margin: 0 auto; 
}
img.home {
	position: relative;
	top: 0px;
} /* images/etienne-home.gif */
a img { border: none; }
.centre p { text-align: center; }

.footer { color: #ccc; text-align: center; background: none; }
.footer a {
	color: #ccc;
	background: none;
	text-decoration: underline;
	padding: 8px;
}
.footer a:hover { color: #ddd; text-decoration: underline; }
.footer a:visited { color: #aaa; }
.spacer { padding: 0 0 5px 0; }
.tagline { padding: 10px 0 15px 0; font-weight: 700; color: #7d1a1a; }
.tagline strong { color: #ddd; }

.accessibility { display: none; } /* this will only be displayed with screen readers. */

img.alignleft{
	float:none;
	padding: 4px;
	margin: 7px;
	border: 1px solid #C6C6C6;
}
	
img.alignright{
	float:right;
	padding: 4px;
	margin: 7px;
	border: 1px solid #C6C6C6;
	
}

img.aligncentre{
	padding: 4px;
	margin: 7px;
	border: 1px solid #C6C6C6;
	text-align: center;
	
}

.trix_advert{
	text-align:center;
	padding-bottom:0px;
	float:right;
	width: auto;
}

.trix_advert2{
	padding-bottom:20px;
	float:right;
	font-size: 0.85em;
	clear: right;
	width: 224px;
	overflow: hidden;
	height: auto;
	
}

/* Share Dock Styles */
#sharedock {
	position: relative;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 90px;
	z-index: 999;
}
#dock { position: relative; bottom: 0; font: 13px "Trebuchet MS", Verdana, Helvetica, sans-serif; }
.dock-container { position: relative; background: url(images/dock-background-sm.png) no-repeat bottom right; height: 50px; padding: 20px; }
.dock-contaner-left { background: url(images/dock-background-sm.png) no-repeat left bottom; width: 15px; height: 32px; position: absolute; bottom: 0; left: -15px; }
.dock-container .custom_images a { display: block; width: 50px; position: absolute; bottom: 0; text-align: center; text-decoration: none; color: #333; cursor: pointer; }
.dock-container .custom_images span { background: rgba(0,0,0,.75); display: none; padding: 2px 8px; margin-left: 17px; font-size: 11px; color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; }
.dock-container .custom_images img { border: 0; margin: 5px 10px 0px; width: 100%; }