@charset "UTF-8";

/* CSS Document - Organised and optimised or is it OCD?*/

body { font-size: 62.5%; font-family: Arial, Helvetica, sans-serif; color: #6e6e6e; background-image: url(images/bg.gif); background-position: top center; background-attachment: fixed; }

img { border: none; }

* { margin: 0px; padding: 0px; }

.hold { width: 100%; height: 1200px; margin: 0 auto; }

p { font-size: 1.1em; line-height: 20px; padding-bottom: 14px; }

a { color: #ff0066; font-weight: bold; text-decoration: none; }

a:hover { color: #0054ff; }

h5 { font-size: 1.4em; line-height: 20px; padding-bottom: 14px; color: #0054ff; }

/* ------------------------------------------------------------------------------ Navigation */

.navigation { width: 1000px; height: 130px; float: left; background-image: url(images/bgnavigation.png); }

.menu { list-style: none; padding: 0; margin: 0 auto; width: 1000px; height: 130px; background: url(images/menu-bg.jpg) no-repeat; position: relative; }

.menu a { display: block; text-indent: -900%; position: absolute; outline: none; }

.menu a:hover { background-position: left bottom; }

.menu .logo { width: 270px; height: 130px; background: url(images/nav-logo.png) no-repeat; left: 0px; top: 0px; }

.menu .home { width: 98px; height: 130px; background: url(images/nav-home.png) no-repeat; left: 270px; top: 0px; }

.menu .about { width: 129px; height: 130px; background: url(images/nav-about.png) no-repeat; left: 368px; top: 0px; }

.menu .portfolio { width: 136px; height: 130px; background: url(images/nav-portfolio.png) no-repeat; left: 497px; top: 0px; }

.menu .animation { width: 133px; height: 130px; background: url(images/nav-animation.png) no-repeat; left: 633px; top: 0px; }

.menu .contact { width: 180px; height: 130px; background: url(images/nav-contact.png) no-repeat; left: 766px; top: 0px; }

/* ------------------------------------------------------------------------------ Homepage */

#homepagehold { width: 100%; height: 1200px; margin: 0 auto; }

#homepage { width: 1000px; margin: 0 auto; }

#hometop { width: 1000px; height: 125px; float: left; background-image: url(images/bghome.png); background-repeat: no-repeat; background-position: top left; }

#homecontent { width: 768px; height: 358px; padding: 0px 131px 91px 101px; background-image: url(images/bghomepage.png); float: left; }

/* ------------------------------------------------------------------------------ About Me */

#aboutpage { width: 1000px; margin: 0 auto; }

#abouttext { width: 562px; height: 325px; padding: 145px 10px 0 78px; float: left; background-image: url(images/bgabout.png); background-repeat: no-repeat; background-position: top left; }

#aboutjuggling { width: 350px; height: 470px; background-image: url(images/juggling.png); background-repeat: no-repeat; background-position: top left; float: left; }

#aboutelsewhere { width: 938px; height: 120px; padding-left: 62px; float: left; }

/* ------------------------------------------------------------------------------ Portfolio */

#portfoliopage { width: 1000px; margin: 0 auto; }

#portfoliotop { width: 1000px; height: 105px; float: left; background-image: url(images/bgportfolio.png); background-repeat: no-repeat; background-position: top left; }

/* ---------------------------------------------------------- Slider Stuff */

/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next { margin:0; padding:0; display:block; overflow:hidden; text-indent:-8000px; }

/* // image replacement */
			
#container { margin:0 auto; position:relative; text-align:center; width:950px; text-align: center; height: 465px; float: left; }

#content { position:relative; }

/* Easy Slider */

#slider ul, #slider li, #slider2 ul, #slider2 li { margin:0; padding:0; list-style:none; }

#slider2 { margin-top:1em; }

#slider li, #slider2 li { /* 
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/ width:950px; height:470px; overflow:hidden; }

#prevBtn, #nextBtn, #slider1next, #slider1prev { display:block; width:30px; height:177px; position:absolute; left:-10px; top:171px; z-index:1000; }

#nextBtn, #slider1next { left:926px; }

#prevBtn a, #nextBtn a, #slider1next a, #slider1prev a { display:block; position:relative; width:30px; height:300px; background:url(images/left.png) no-repeat 0 0; }

#nextBtn a, #slider1next a { background:url(images/right.png) no-repeat 0 0; }

/* ------------------------------------------------------------------------------ Animation */

#animationpage { width: 1000px; margin: 0 auto; }

#animationtop { width: 1000px; height: 90px; float: left; background-image: url(images/bganimation.png); background-repeat: no-repeat; background-position: top left; }

/* ------------------------------------------------------ Animation List */

#animationhold { width: 815px; height: 526px; float: left; padding-left: 150px; background-image: url(images/bganimationleft.png); background-position: bottom left; background-repeat: no-repeat; }

#animationlist li { display: inline; float: left; }

#animationlist a { background-position: bottom left; display:block; text-indent:-5000px; outline: none; text-decoration:none; height: 173px; }

#animationlist a.selected { background-position: top left !important; }

#animationlist a:hover { background-position: top left; }

.animationlist_solar { background-image: url(images/animation-solar.png); width: 396px; background-position: bottom left; }

.animationlist_solar:hover { background-position: top left; }

.animationlist_jekyllhyde { background-image: url(images/animation-jekyllhyde.png); width: 396px; background-position: bottom left; }

.animationlist_jekyllhyde:hover { background-position: top left; }

.animationlist_naturalhealth { background-image: url(images/animation-naturalhealth.png); width: 396px; background-position: bottom left; }

.animationlist_naturalhealth:hover { background-position: top left; }

.animationlist_legallais { background-image: url(images/animation-legallais.png); width: 396px; background-position: bottom left; }

.animationlist_legallais:hover { background-position: top left; }

.animationlist_reallyuseful { background-image: url(images/animation-reallyuseful.png); width: 396px; background-position: bottom left; }

.animationlist_reallyuseful:hover { background-position: top left; }

.animationlist_jonathanjames { background-image: url(images/animation-jonathanjames.png); width: 396px; background-position: bottom left; }

.animationlist_jonathanjames:hover { background-position: top left; }

/* ------------------------------------------------------------------------------ Contact Page */

#contacthold { width: 100%; margin: 0 auto; overflow: hidden; }

#contactpage { width: 1000px; margin: 0 auto; }

#contactme { width: 1000px; height: 665px; margin: 0 auto; background-image: url(images/bgcontact.png); background-repeat: no-repeat; background-position: top right; float: left; }

#contactone { width: 544px; height: 356px; padding: 58px 44px 0 412px; float: left; }

#contacttwo { width: 369px; height: 191px; float: left; padding: 60px 0 0 631px; }

/* ---------------------------------------------- Contact frame */

#contact { width: 468px; height: 267px; padding: 89px 55px 0 21px; background-image: url(images/bgcontact.jpg); background-position: top; background-repeat: no-repeat; }

.contacttwo { width: 270px; float: left; }

.bibformstyle { background-image: url(images/formbg.gif); background-repeat: repeat-x; background-position: top; background-color: #fcfcfc; border: 1px solid #e7e7e7; font-size: 1.3em; color: #333; font-family: Arial, Helvetica, sans-serif; width: 240px; height: 19px; float: left; line-height: 26px; }

.bibformstyle:hover { border: 1px solid #ff0066; background-color: #fff; background-image: none; }

.contactbg { background: none; }

.floatleft { float: left; }

.contactform { width: 468px; float: left; }

.contactformone { width: 310px; float: left; padding-top: 4px; }

.contactformtwo { width: 138px; float: left; padding-top: 4px; }

.style3 { font-size: 1.1em; line-height: 20px; padding-bottom: 14px; padding-top: 10px; }

/* ------------------------------------------------------------------------------ Footer */

#png { width: 100%; height: 101px; margin: 0 auto; background-image: url(images/bgfootertop.png); background-position: center; overflow: hidden; }

#footer { width: 100%; height: 304px; margin: 0 auto; background-image: url(images/bgfooter.jpg); background-position: top center; overflow: hidden; }

#foot { width: 1000px; margin: 0 auto; }

#footer a { color: #FFF; text-decoration: underline; }

#footer a:hover { color: #F00; text-decoration: none; }

#footer li { font-size: 1.1em; color: #FFF; font-weight: bold; line-height: 20px; list-style: none; }

#footone { width: 208px; height: 84px; padding: 26px 47px 194px 33px; float: left; }

#foottwo { width: 174px; height: 133px; padding: 77px 0 0 21px; float: left; }

#footthree { width: 232px; height: 124px; padding: 86px 0 0 0; float: left; }

#music { width: 285px; height: 122px; padding: 88px 0 0 0; float: left; }

#freebies { width: 619px; height: 94px; float: left; }

#isitvalid { width: 93px; height: 38px; padding: 56px 0 0 0; float: left; }

/* ------------------------------------------------------------------------------ Classes and Stoof */

.floatright { float: right; }

.paddingright { padding-right: 5px; }

.fontabitsmaller { font-size: 0.9em; }

/* ------------------------------------------------------------------------------ FancyBox */

div#fancy_overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; z-index: 30; }

div#fancy_loading { position: absolute; height: 40px; width: 40px; cursor: pointer; display: none; overflow: hidden; background: transparent; z-index: 100; }

div#fancy_loading div { position: absolute; top: 0; left: 0; width: 40px; height: 486px; background: transparent url('fancybox/fancy_progress.png') no-repeat; }

div#fancy_outer { position: absolute; top: 0; left: 0; z-index: 90; margin-top: -60px; margin-left: -130px; background: transparent; display: none; }

div#fancy_inner { position: relative; width:836px; height:496px; background: #FFF; }

div#fancy_content { margin: 0; z-index: 100; position: absolute; }

div#fancy_div { background: #555; color: #FFF; height: 476px; width: 816px; z-index: 100; }

div#fancy_close { position: absolute; top: -12px; right: -15px; height: 30px; width: 30px; background: url('fancybox/fancy_closebox.png') top left no-repeat; cursor: pointer; z-index: 181; display: none; }

#fancy_frame { position: relative; width: 816px; height: 476px; display: none; }

#fancy_ajax { width: 816px; height: 476px; overflow: auto; }


/* ------------------------------------------------------------------------------ Splash */

.splashbg { background-image: url(images/splash-bg.gif); background-position: center; background-color: #bec7c7; }

#splashhold { width: 940px; margin: 0 auto; padding-top: 91px; }

#splashleft { width: 480px; float: left; padding-top: 296px; background-image: url(images/splash-top.png); background-position: top center; background-repeat: no-repeat; }

#splashright { width: 460px; height: 583px; float: left; background-image: url(images/splash-ipad.png); }

.splashbtn { float: left; padding-left: 86px; }

.splashbtnhroc { padding-top: 40px; float: left; padding-left: 191px; }