/*=======================================================
 CSS Document for Hazel Buckley
=======================================================*/


/*General Reset*/
*, html, div, span, body, p, h1, h2, h3, h4, h5, h6, ol, ul, img { list-style: none; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; margin: 0; padding: 0; border: 0; }
b, strong { font-weight: bold; color: #fff; }
sup { color: #ffcc00; }
table { border-collapse: collapse; border-spacing: 0; }
.clearfix:after { height: 0; visibility: hidden; content: "."; display: block; clear: both; }
.clearfix { display: inline-block; clear: both; }
.hidden { display: none!important; }
.show { display: block; visibility: visible; }

/*Global settings*/
@font-face {
	font-weight: normal; font-style: normal;
	font-family: 'eurofurenceregular';
	src: url('../fontface/eurof55-webfont.eot');
	src: local('☺'), url('../fontface/eurof55-webfont.woff') format('woff'), url('../fontface/eurof55-webfont.ttf') format('truetype');
}
@font-face {
	font-family: 'eurofurencelight';
	src: url('eurof35-webfont.eot');
	src: local('☺'), url('../fontface/eurof35-webfont.woff') format('woff'), url('../fontface/eurof35-webfont.ttf') format('truetype');
}
@font-face {
	font-family: 'RotisSansSerif';
	src: url('../fontface/rotissansserif-light-webfont.eot');
	src: local('☺'), url('../fontface/rotissansserif-light-webfont.woff') format('woff'), url('../fontface/rotissansserif-light-webfont.ttf') format('truetype');
}
body { font: normal 62.5%/24px "RotisSansSerif" , Verdana, Arial, Helvetica, sans-serif; color: #888; background-color: #000; }
p, h1, h2, h3 { margin-bottom: 20px; text-align: inherit; font-weight: normal; position: relative; z-index: 50; }
p { font-size: 1.6em; padding-right: 20px; }
h1 { font-size: 3em; line-height: 28px; color: #4de2e7; background-color: #000; margin-bottom: 35px; font-family: 'eurofurencelight'; }
body#home-page em { color: #4de2e7; font-style: normal; }
h2 { font-size: 2.4em; color: #4de2e7; font-family: 'eurofurenceregular'; }
h3 { font-size: 2em; color: #d2d2d2; font-family: 'eurofurenceregular'; }
ul.list { margin: 0 0 20px 30px; }
ul.list li { list-style: square!important; }
li { font-size: 1.6em; position: relative; z-index: 50; }
a { position: relative; z-index: 50; color: #63d1ed; text-decoration: none; outline: none; }
a:hover { color: #63d1ed; text-decoration: underline; outline: none; }
.blue { color: #4de2e7!important; }

/*Main layout*/
#container { width: 100%; height: 100%; display: block; margin: 0; clear: both; background: transparent; position: relative; left: 0; top: 0; z-index: 10; }
.bg-images { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; display: block; overflow: hidden!important; }
/*.boxes { width: 848px; height: 636px; position: absolute; top: 150px; left: 0; z-index: 5; display: block; overflow: hidden!important; }
#cycle1,#cycle2, #cycle3, #cycle4, #cycle5, #cycle6, #cycle7, #cycle8 { width: 212px; height: 318px; overflow: hidden; float: left; display: inline; }
#cycle9, #cycle10 { width: 424px; height: 318px; overflow: hidden; float: left; display: inline; }*/
.boxes { width: 1000px; height: 667px; position: absolute; top: 150px; left: 15px; z-index: 5; display: block; overflow: hidden!important; }
#cycle1 { width: 1000px; height: 667px; overflow: hidden; float: left; display: block; }
#cycle1 img { width: 1000px; height: 667px; display: block; }
body#home-page #container { width: 1000px!important; height: auto; display: block; margin: 0 auto!important; }
body#home-page .boxes { top: 0!important; left: auto!important; }

#cycle9 img, #cycle10 img { width: 424px!important; height: 318px; line-height: 0; display: block; float: left; }
.boxes img { width: 212px; height: 318px; line-height: 0; display: block; float: left; }
body#home-page .bg-images { margin: 150px 0 -150px 0; height: 620px; background: url('../images/img-boxes.jpg') no-repeat 0 0; }
body#about-page .bg-images { background: url('../images/bg-about.jpg') no-repeat right 150px; }
body#contact-page .bg-images { background: url('../images/img-tearsheet.jpg') repeat 0 140px; }
#header { position: relative; z-index: 100; display: block; width: 100%; height: 149px; border-bottom: 1px dotted #252525; background-color: #121212; }
body#weddings2-page #header { background-color: #fff!important; }
body#shoots-page #header { position: absolute!important; z-index: 100; display: block; width: 100%; height: 140px!important; border-bottom: 1px solid #000; background-color: #121212; }
#logo { text-indent: -9999em; width: 300px; height: 90px; float: right; display: block; background: #121212 url('../images/logo.gif') no-repeat right 0; margin: 0; position: absolute; z-index: 100; right: 20px; top: 5px; }
#logo a { display: block; text-indent: -9999em; width: 300px; height: 90px; }
body#weddings2-page #logo { background: #fff url('../images/logo2.gif') no-repeat 0 0!important; }
#pandora a { text-indent: -9999em; width: 112px; height: 30px; display: inline; background: url('../images/pandora_logo.jpg') no-repeat 0 0; position: absolute!important; top: 30px; left: 20px; }
#pandora a:hover { background-position: 0 -30px!important }
#fb-weddings a { text-indent: -9999em; width: 300px; height: 34px; float: left; display: inline; background: url('../images/fb-weddings.png') no-repeat 0 0; margin: 0; position: absolute; top: 30px; left: 25px; }
#fb-weddings a:hover { background-position: 0 -34px!important }
/*@media screen and (min-width:1400px) { #mainpage { display: block!important; } }*/
@media screen and (min-width:1140px) { #pandora a { top: 103px!important; left: 990px!important; } ul#nav li.last { border-right: 1px dotted #363636!important; }}

body#home-page ul#nav { width: 1150px!important; display: block!important; float: none!important; margin: 9px auto 0 auto!important; padding: 0!important; }
body#home-page #logo { float: none!important; position: relative!important; right: auto!important; margin: 0 auto!important; }
body#home-page #pandora a { position: relative!important; top: 0; left: 20px!important; }
@media screen and (min-width:1140px) { body#home-page #pandora a { top: 0!important; left: 20px!important; } body#home-page ul#nav li.last { border-right: 1px dotted #363636!important; } }

/*nav*/
ul#nav { width: 990px; height: 30px; display: inline; float: left; margin: 90px 0 0 15px; padding-top: 9px;  }
ul#nav li { position: relative; font-size: 1em; display: inline; float: left; margin: 3px 0; padding: 0; border-right: 1px dotted #363636; }
ul#nav li.last { border-right: 0; }
ul#nav a { font-size: 1.9em; line-height: 27px; color: #616161; height: 30px; text-align: center!important; padding: 0 8px; display: block; float: left; font-family: 'eurofurencelight'; }
ul#nav a:hover { color: #fff; text-decoration: none; }
body#weddings2-page ul#nav a:hover { color: #4de2e7!important; }
a#navweddings { width: 200px; padding: 0!important; float: left; margin: 0; line-height: 0; background: url('../images/nav-weddings.jpg') no-repeat 0 0; text-indent: -9999em; font-size: 0!important; }
/*ul#nav ul { width: 154px!important; height: auto!important; display: block; left: -9999em; border: 1px solid #252525; border-top: 0!important; position: absolute; top: 100%; margin: 0!important; padding: 0!important; }
ul#nav li li { border: 0!important; border-top: 1px solid #252525!important; background-color: #000; margin: 0; display: block; }
ul#nav ul a { font-size: 1.8em; line-height: 27px; color: #616161; height: 30px; width: 154px; text-align: center!important; padding: 0; display: block; float: left; font-family: 'eurofurencelight'; }
ul#nav ul a:hover { color: #fff; text-decoration: none; }
ul#nav li:hover ul, ul#nav li.over ul { margin-top: 1px; left: -1px; }*/
ul#nav a#navfacebook {  background: url('../images/icon-facebook.gif') no-repeat 0 0; width: 30px; padding: 0!important; margin: 0 10px; text-indent: -9999em; }
ul#nav a#navfacebook:hover {  background-position: 0 -30px!important; }
body#home-page a#navhome, body#about-page a#navabout, body#portfolios-page a#navportfolios, body#people-page a#navpeople, body#films-page a#navfilms, body#personal-page a#navpersonal, body#hairbeauty-page a#navhairbeauty, body#editorial-page a#naveditorial, body#contact-page a#navcontact 
{ background-color: #252525!important; color: #4de2e7!important; }
body#weddings2-page a#navweddings { background-color: #000!important; color: #4de2e7!important; }

/*Main body*/
#mainpage { width: 65%; height: auto; padding: 20px; display: block; clear: both; float: left; position: relative; margin-top: 10px; z-index: 40; background: url('../images/bg-alpha.png') repeat 0 0; }
body#clients-page #mainpage { width: 700px!important; background: none!important; }
body#clients-page h1 { width: 400px; position: absolute; z-index: 100; left: 20px; top: 15px; }
body#shoots-page #mainpage { width: 96%!important; position: absolute; z-index: 50; top: 140px; margin: 0; left: 0; padding: 20px; background: none!important; }
body#shoots-page h1 { width: 600px; position: absolute; z-index: 100; margin: 0; left: 20px; top: 40px!important; }
body#shoots-page h2 { position: absolute; z-index: 100; top: 80px; left: 20px; margin: 0!important; color: #fff; }
body#personal-page #mainpage, body#weddings-page #mainpage, body#people-page #mainpage, body#personal-page #mainpage,
body#foodplacespace-page #mainpage, body#hairbeauty-page #mainpage, body#editorial-page #mainpage, body#weddings2-page #mainpage { width: 95%!important; background: none!important; }
body#portfolios-page #mainpage, body#films-page #mainpage { width: 100%!important; min-width: 990px; background: none!important; }
body#personal-page h1, body#weddings-page h1, body#people-page h1, body#hairbeauty-page h1, body#editorial-page h1 { width: 280px; padding: 10px; position: absolute; z-index: 100; right: 0; top: 5px; }
.text { position: relative; float: left; width: 100%; height: 340px; display: block; overflow: auto!important; }
body#home-page #mainpage {float: right; width: 290px; display: block; height: auto;  }
body#clients-page p { margin: 40px 0 20px 0; color: #fff; }
body#clients-page ol { margin: 10px 0 20px 30px; }
body#clients-page ol li { list-style: decimal!important; }
body#weddings2-page { background: #fff url('../images/bg-weddings.jpg') repeat-x 0 0!important; }
body#weddings2-page h1 { width: 280px; position: absolute; z-index: 100; right: 0; top: 15px; color: #000;}
body#weddings2-page h1 span { font-size: 20px; color: #000; line-height: 17px!important; }
body#weddings2-page h1 span strong { color: #000!important; }
.page-text { width: 280px; background-color: #000; padding: 10px; position: absolute; z-index: 100; right: 0; top: 50px; }
.page-text p { color: #ccc; margin-bottom: 15px; line-height: 20px!important; }
.page-text strong { font-weight: normal; color: #4de2e7; }

/*gallery*/
ul.album { list-style: none; margin: 0 0 20px 0; display: block; width: 100%; height: auto; float: left; clear: both; border-right: 8px solid #141414; border-bottom: 8px solid #141414; }
ul.album li { position: relative; z-index: 50; top: 0; left: 0; display: inline; width: 102px; height: 142px; border-top: 8px solid #141414; border-left: 8px solid #141414; float: left; overflow: hidden!important; margin: 0; }
ul.album li a { background-color: #000; border: 1px solid #141414; vertical-align: middle; z-index: 50; width: 100px; height: 140px; float: left; display: block; text-decoration: none; }
ul.album li a:hover { border-color: #fff; }
ul.album li a img { vertical-align: middle; width: 100px; height: 140px; display: block; float: left; line-height: 0; }
ul.album li span { position: absolute; z-index: 70; top: 116px; left: 1px; font-size: 1em; width: 88px; height: 25px; display: block; padding: 0 5px; line-height: 24px; text-align: center!important; color: #fff; background: url('../images/bg-alpha2.png') repeat 0 0; }

/*galleria non flash*/
.cred {margin-top:20px; font-size:11px; }
.galleria { width: 670px; height: 510px; display: block; background-color: #777; }

/*stories page*/
.listings {  position: relative; z-index: 40; width: 880px; display: inline; float: left; margin-bottom: 20px; clear: right; }
.listings li { font-family: 'eurofurenceregular'; font-size: 1.8em; float: left; width: auto; display: inline; margin: 0 5px; }
.listings li.title { padding: 5px; }
.listings a { color: #fff; padding: 5px 8px 0 8px; height: 30px; display: block; text-decoration: none; }
.listings a:hover { background-color: #171717; color: #4de2e7; text-decoration: none; }
.portfolios-container { width: 100%; height: auto; overflow: hidden; position: relative; z-index: 30; top: 0; display: block; clear: both; float: left; margin-top: -55px; }
h2.onstage { height: 29px; padding: 5px 8px 0 8px; border-bottom: 1px solid #4de2e7; background-color: #252525; color: #252525 ; font-family: 'eurofurenceregular'; font-size: 1.8em; clear: both; width: auto; float: left; margin: 0 0 25px 0; }
.listings a.new { color: #FC0; }
.cascade { width: 100%; height: auto; display: block; clear: both; float: left; background: url('../images/arrow.gif') no-repeat 0 0; }
/*hovered state cheat*/
body#portfolios-page h1, body#films-page h1 { float: left; display: inline; margin: 0 0 30px 0; width: 110px;  }
/*#story-1 { background-position: 130px 44px; }
#story-2 { background-position: 235px 44px; }
#film-1 { background-position: 155px 44px; }
#film-2 { background-position: 280px 44px; }
#story-3 { background-position: 365px 44px; }
#story-4 { background-position: 495px 44px; }
#story-5 { background-position: 630px 44px; }
#story-6 { background-position: 760px 44px; }
#story-7 { background-position: 770px 44px; }
#story-8 { background-position: 875px 44px; }
#story-1  h2.onstage { margin-left: 115px; }
#story-2  h2.onstage { margin-left: 189px; }
#film-1  h2.onstage { margin-left: 115px; }
#film-2  h2.onstage { margin-left: 243px; }
#story-3  h2.onstage { margin-left: 322px; }
#story-4  h2.onstage { margin-left: 453px; }
#story-5  h2.onstage { margin-left: 580px; }
#story-6  h2.onstage { margin-left: 721px; }
#story-7  h2.onstage { margin-left: 721px; }
#story-8  h2.onstage { margin-left: 865px; }*/
#story-6 { background-position: 160px 43px; }
#story-5 { background-position: 293px 43px; }
#film-1 { background-position: 155px 43px; }
#film-2 { background-position: 280px 43px; }
#film-3 { background-position: 373px 43px; }
#film-4 { background-position: 480px 43px; }
#story-4 { background-position: 447px 43px; }
#story-3 { background-position: 590px 43px; }
#story-1 { background-position: 700px 43px; }
#story-2 { background-position: 815px 43px; }

#story-6  h2.onstage { margin-left: 115px; }
#story-5  h2.onstage { margin-left: 248px; }
#film-1  h2.onstage { margin-left: 115px; }
#film-2  h2.onstage { margin-left: 239px; }
#film-3  h2.onstage { margin-left: 367px; }
#film-4  h2.onstage { margin-left: 420px; }
#story-4  h2.onstage { margin-left: 389px; }
#story-3  h2.onstage { margin-left: 543px; }
#story-1  h2.onstage { margin-left: 674px; }
#story-2  h2.onstage { margin-left: 767px; }


.portfolios-info { padding: 15px; width: 25%; height: auto; border-top: 10px solid #000; position: relative; clear: left; display: inline; float: left; background-color: #111; /*url('../images/bg-alpha2.png') repeat 0 0*/;  }
.portfolios-info h2.new { color: #FC0; }
.gallery-container { width: 670px; height: 540px; display: inline; margin: 0; float: left; }
#portfolio, #portfolio-s1, #portfolio-s2, #portfolio-s3, #portfolio-s4, #portfolio-s5, #portfolio-s6, #portfolio-s7, #portfolio-s8,
object#portfolio, object#portfolio-s1, object#portfolio-s2, object#portfolio-s3, object#portfolio-s4, object#portfolio-s5, object#portfolio-s6, object#portfolio-s7, object#portfolio-s8
{ float: left; width: 670px; height: 530px; margin: 0; display: block; }
#portfolio, object#portfolio { margin: 0 0 20px 0; }

#more-info { width: auto; height: auto; margin: 0 auto; padding: 25px; display: block; background-color: #fff; text-align: center; }

/*Sitemap*/
#sitemap-corner { position: fixed; z-index: 200; bottom: 0; right: 0; width: 30px; height: 80px; }
#sitemap-corner a { background: #000 url('../images/btn-sitemap.gif') no-repeat 10px 0; width: 30px; height: 80px; display: block; text-decoration: none; text-indent: -9999em; overflow: hidden; }
#sitemap-corner a:hover, #sitemap-corner a.stayon { background: #252525 url('../images/btn-sitemap.gif') no-repeat -36px 0!important; }
#sitemap { width: 95%; height: 20px; display: block; background-color: #252525; padding: 10px; clear: both; position: fixed; z-index: 200; left: 0; bottom: 0; }
#sitemap p { text-indent: 15px; font-size:1.4em; color: #63d1ed; float: left; display: inline; line-height: 18px; }
#sitemap b { color: #fff; font-weight: normal; }
#sitemap a#close-sitemap { float: right; margin-right: 60px; background: url('../images/btn-close.gif') no-repeat 0 0; width: 100px; height: 20px; display: block; text-decoration: none; text-indent: -9999em; overflow: hidden; }
#sitemap a#close-sitemap:hover { background-position: 0 -20px!important; }

/*cmx forms*/
form.cmxform fieldset, form.cmxform ol, form.cmxform li {  padding: 0; font: normal 16px/25px "RotisSansSerif", Verdana; color: #888; }
form.cmxform ol { list-style: none; }
form.cmxform li { margin-bottom: 5px; }
form.cmxform label { display: inline-block; vertical-align: top; margin-top: 3px; width: 120px;  }
form.cmxform input, form.cmxform select, form.cmxform textarea {
	width: 280px;
	padding: 3px 5px;
	border: 1px solid #363636;
	background: #252525;
	font: normal 16px/18px "RotisSansSerif", Verdana;
	color: #fff;
}
form.cmxform textarea { display: inline-block; height: 100px; overflow: auto; }
form.cmxform input.send { width: auto; height: 27px; padding: 0 10px; text-align: center; font-size: 16px; color: #fff; text-decoration: none; background: #363636;  margin: 5px 0; }
form.cmxform input.send:hover, form.cmxform input.send.inputhover { color: #000!important; text-decoration: none; background: #63d1ed; }

/*Flexscroll settings*/
.scrollgeneric { line-height: 1px; font-size: 1px; position: absolute; top: 0; left: 0; }
.vscrollerbase { width: 8px; background-color: #141414; }
.vscrollerbar { width: 8px; background-color: #4de2e7; }
.hscrollerbase { height: 8px; background-color: #141414; }
.hscrollerbar { height: 8px; background-color: #4de2e7; }
.scrollerjogbox { width: 8px; height: 10px; top: auto; left: auto; bottom: 0px; right: 0px; background-color: #ccc; }


/*=======================================================
 End of CSS Document for Hazel Buckley
=======================================================*/