/*-----------------------------------------------------------------------------
[CreationBox.co.uk] Screen Stylesheet
version:   1.0
date:      06/11/08
author:    [Julian Stortt]
email:     [sales@creationbox.co.uk]
website:   [http://www.creationbox.co.uk]
---------------------------------------------------------------------------------*/
html,body,address,blockquote,div,form,
h1,h2,h3,h4,h5,h6,
hr,menu,ol,
table,tr,td,th,p,img {margin:0; padding:0;}

body {text-align:center; font: normal 12px Verdana, Arial, Helvetica, Sans-Serif; background: #302E2C; color: #CCC;}

#mainWrapper{text-align: left; margin: 0 auto; width: 740px; padding:  50px 0 0 0; overflow: hidden;}

a{color: #7FC0BA;}

a:active, a:focus, a:hover {color: #FFF;}

strong{color: #7FC0BA;}

img {border:none;}

#header{ position: relative;}
	
#header h1 {
	position:relative;
	width:400px;
	height: 100px;
	text-align:left;
	font:bold 16px verdana,sans-serif;
	color:#FFF;
}
	
#header h1 span {
	position:absolute;
	top:0;
	left:0;
	width:400px;
	height:100px;
	background:url(../images/logo.gif) 0 0 no-repeat;
}

#contact{
	position: absolute;
	top: 0;
	left: 450px;
	padding: 10px 0 0 50px;
	color: #E5C6C6;
	height: 100px;
	background: url(../images/mailLogo.gif) 0 0 no-repeat;
	font: normal 16px/37px Verdana, Arial, Sans-Serif;
	}
	
#contact a{text-decoration: none; color: #E5C6C6;}
	
#contact a:active, #contact a:focus, #contact a:hover{color: #FFF;}

ul#navMain { list-style-type: none; margin: 0 0 0 0px; padding: 0; }

#navMain li { display: inline; }

li#homeButton a { background : url(../images/navHome.gif) no-repeat 0 0;}
li#pricesButton a { background : url(../images/navPrices.gif) no-repeat 0 0;}
li#portfolioButton a { background : url(../images/navPortfolio.gif) no-repeat 0 0;}
li#contactButton a { background : url(../images/navContact.gif) no-repeat 0 0;}

#navMain a{
float: left;
display: block;
width: 100px;
height: 100px;
text-indent: -9999px;
text-decoration: none;
overflow: hidden;
margin: 0 0 0 0px;
outline: #302E2C;
}

li#homeButton a:active, li#homeButton a:focus, li#homeButton a:hover { background : url(../images/navHome.gif) no-repeat 0 -100px; }

li#pricesButton a:active, li#pricesButton a:focus, li#pricesButton a:hover { background : url(../images/navPrices.gif) no-repeat 0 -100px; }

li#portfolioButton a:active, li#portfolioButton a:focus, li#portfolioButton a:hover { background : url(../images/navPortfolio.gif) no-repeat 0 -100px;}

li#contactButton a:active, li#contactButton a:focus, li#contactButton a:hover { background : url(../images/navContact.gif) no-repeat 0 -100px; }

#leftColumn{width: 400px; float: left; padding-bottom: 50px;}

#rightColumn{width: 250px; float: right; margin: 0 30px 0 0; padding-bottom: 50px;}

#blurb{
	width: 400px;
	height: 200px;
	clear: both;
	padding: 20px 0 0 0;
	background: url(../images/blurbBack.gif) no-repeat 0 0;
}

#webPortfolio, #printPortfolio, #contactBlurb , #payments, #webDesignPrices, .webDesignPackages{
	width: 400px;
	clear: both;
	padding: 20px 0 0 0;
}

#homeFeatures{margin: 20px 0 0 0;}

#recentProjects{width: 400px; padding: 0 0 10px 0;}
	
#affordableDesign{width: 400px;}

#blurb h2, #recentProjects h2, #webPortfolio h2, #printPortfolio h2, #contactBlurb h2, #payments h2, #webDesignPrices h2 , .webDesignPackages h2, #homePrices h2, #homeFeatures h2, #affordableDesign h2, #sitemap h2{
	position:relative;
	width:250px;
	height: 50px;
	text-align:left;
	font:bold 16px verdana,sans-serif;
	color:#FFF;
}

#webDesignPrices h2, .webDesignPackages h2{width: 300px;}
#affordableDesign h2 {width: 400px;}

	
#blurb h2 span, #recentProjects h2 span, #webPortfolio h2 span, #printPortfolio h2 span, #contactBlurb h2 span, #payments h2 span, #webDesignPrices h2 span, #basic h2 span , #starter h2 span , #medium h2 span , #enterprise h2 span, #homePrices h2 span, #homeFeatures h2 span, #affordableDesign h2 span, #sitemap h2 span{
	position:absolute;
	top:0;
	left:0;
	width:250px;
	height:50px;
}

#blurb h2 span {background:url(../images/blurbHeader.gif) 0 0 no-repeat;}
#recentProjects h2 span{background:url(../images/recentHeader.gif) 0 0 no-repeat;}
#webPortfolio h2 span {background:url(../images/webPortfolioHeader.gif) 0 0 no-repeat;}
#printPortfolio h2 span {background:url(../images/printPortfolioHeader.gif) 0 0 no-repeat;}
#contactBlurb h2 span {background:url(../images/contactBlurbHeader.gif) 0 0 no-repeat;}
#payments h2 span {background:url(../images/paymentsHeader.gif) 0 0 no-repeat;}
#homePrices h2 span {background:url(../images/homePricesHeader2.gif) 0 0 no-repeat;}
#homeFeatures h2 span {background:url(../images/homeFeaturesHeader.gif) 0 0 no-repeat;}


#webDesignPrices h2 span {background:url(../images/webDesignPricesHeader.gif) 0 0 no-repeat; width: 300px;}
#basic h2 span{background:url(../images/basicHeader.gif) 0 0 no-repeat; width: 300px;}
#starter h2 span{background:url(../images/starterHeader.gif) 0 0 no-repeat; width: 300px;}
#medium h2 span{background:url(../images/mediumHeader.gif) 0 0 no-repeat; width: 300px;}
#enterprise h2 span{background:url(../images/enterpriseHeader.gif) 0 0 no-repeat; width: 300px;}

#affordableDesign h2 span{background:url(../images/affordableHeader.gif) 0 0 no-repeat; width: 400px;}
#sitemap h2 span{background:url(../images/sitemapHeader.gif) 0 0 no-repeat;}

#blurb p, #webPortfolio p, #printPortfolio p, #contactBlurb p, #payments p, #webDesignPrices p, .webDesignPackages p, #affordableDesign p{
	padding: 15px 15px 0 40px;
	color: #CCC;
	font: normal 13px/16px Verdana, Arial, Helvetica, Sans-Serif;
	}
	
#blurb a, #recentProjects a, #webPortfolio a, #webDesignPrices li a, .webDesignPackages a, #homePrices a, #affordableDesign a, #sitemap a, #contactBlurb a{text-decoration: none; outline:none;}

#recentProjects a{font-size: 11px; padding: 0 0 0 130px;}


#webPortfolio a img, #printPortfolio a img{border: 5px solid #302E2C;}
	
#webPortfolio a:active img, #webPortfolio a:focus img, #webPortfolio a:hover img{border: 5px solid #FFF;}
	
#printPortfolio a:active img, #printPortfolio a:focus img, #printPortfolio a:hover img{border: 5px solid #FFF;}	
	
#webDesignPrices ul{list-style: square url(../images/homeBullet.gif); margin: 20px 0 0 15px;}

	
#webDesignPrices li{margin: 0 0 10px 0;}	

#homePrices p{font-size: 11px; margin: 20px 25px 0 25px;}
	

.designPrice{position: relative; margin: 25px 0 0px 0;}
	
.designPrice ul{
padding: 0 0 0 3px;
background: #353432;
margin: 1px 0 0 22px;
width: 207px;
list-style: square url(../images/homeBullet.gif);
font: normal 13px Verdana, Arial, Helvetica, Sans-Serif;
color: #CCC;
}

.designPrice li{padding: 0px 0 3px 0;}
	
.designPrice h4 a{
background: #353432;
padding: 0 0 0 5px;
width: 205px;
margin: 0 0 0 22px;
font: bold 20px Arial Black, Arial, Verdana, Sans-Serif;
color: #FF6E2E;
text-indent: 0;
cursor: pointer;
}
	
.designPrice a{
display: block;
text-decoration: none;
outline: none;
color: #FFF;
}
	
.designPrice a:active, .designPrice a:focus, .designPrice a:hover{color: #FFF;}
	
#pageOne h3, #pageThree h3, #pageEight h3, #pageEightPlus h3{
	position:relative;
	width:250px;
	height: 27px;
	text-align:left;
	font:bold 12px verdana,sans-serif;
}
	
#pageOne h3 span, #pageThree h3 span, #pageEight h3 span, #pageEightPlus h3 span{
	position:absolute;
	top:0;
	left:0;
	width:250px;
	height:27px;
}

#pageOne h3 span {background:url(../images/page1Header.gif) 0 0 no-repeat;}
#pageThree h3 span {background:url(../images/page3Header.gif) 0 0 no-repeat;}
#pageEight h3 span{background:url(../images/page8Header.gif) 0 0 no-repeat;}
#pageEightPlus h3 span{background:url(../images/page8PlusHeader.gif) 0 0 no-repeat;}

#homeFeatures p{padding: 10px 20px 0 25px;}
	
#packageFeatures{padding: 0 0 0 15px;}

.priceFeature{height: 25px; margin: 15px 0 0 0; padding: 0 0 0 20px;}
	
.priceFeature img{float: left; margin: 0 10px 0 0;}
	
.priceFeature h3{font: Bold 14px/25px Arial, Verdana, Sans-Serif; color: #F7931E;}

#contactBlurb form{margin: 20px 0 0 40px;}
	
#payments form{margin: 20px 0 0 40px;}

.formTags{color: #7FC0BA; font: bold 12px/12px Verdana, Sans-Serif;}
	
.formText{border: 1px solid #666; margin: 3px 0 3px 5px;}

.formTextArea{border: 1px solid #666; margin: 10px 0 3px 5px;}
	
#formAreaTag{color: #7FC0BA; font-weight: bold; padding-top: 15px;}
	
#formSubmit{
	margin: 10px 0 0 5px;
	padding: 2px;
	border: 1px solid #CCC;
	background: none;
	color: #7FC0BA;
	font: bold 14px/12px Verdana, Sans-Serif;
	cursor: pointer;
}
input#formSubmit:active, input#formSubmit:focus, input#formSubmit:hover{color: #FFF;}
	
#footer{
	clear: both;
	width: 740px;
	height: 50px;
	margin: 0 0 30px 0;
	color: #666;
	}
	
#footer ul{padding: 17px 0 0 0;}
	
#footer li{display: inline; margin: 0 0 0 6px;}
	
#footer a{text-decoration: none; color: #7FC0BA;}
	
#leftFooter{float: left; display: inline; margin: 0 0 0 30px;}
	
#rightFooter{float: right; display: inline; margin: 0 30px 0 0;}
	
.footerText{padding: 0 0 0 130px; font-size: 12px;}

#sitemap{width: 400px; clear: both;}
	

#sitemap ul li{color: #FFF; list-style-type: square;}
	
#sitemap ul ul li{list-style-type: disc;}
	
#sitemap li{list-style-type: square; color: #fff;}

/*JD GALLERY*/

#myGallery, #myGallerySet, #flickrGallery
{
	width: 350px;
	height: 150px;
	z-index:5;
	border: 1px solid #000;
	margin: 20px 0 5px 40px;
	font-size: 12px;
}

#flickrGallery{width: 500px; height: 334px;}

#myGallery img.thumbnail, #myGallerySet img.thumbnail{display: none;}

.jdGallery{overflow: hidden; position: relative;}

.jdGallery img{border: 0; margin: 0;}

.jdGallery .slideElement
{
	width: 100%;
	height: 100%;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('img/loading-bar-black.gif');
}

.jdGallery .loadingElement
{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: #000;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url('img/loading-bar-black.gif');
}

.jdGallery .slideInfoZone
{
	position: absolute;
	z-index: 10;
	width: 100%;
	margin: 0px;
	left: 0;
	bottom: 0;
	height: 40px;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}

* html .jdGallery .slideInfoZone{bottom: -1px;}

.jdGallery .slideInfoZone h2
{
	padding: 0;
	font-size: 12px;
	margin: 0;
	margin: 2px 5px;
	font-weight: normal;
	color: inherit;
}

.jdGallery .slideInfoZone p
{
	padding: 0;
	font-size: 12px;
	margin: 2px 5px;
	color: #eee;
}

.jdGallery div.carouselContainer
{
	position: absolute;
	height: 135px;
	width: 100%;
	z-index: 10;
	margin: 0px;
	left: 0;
	top: 0;
}

.jdGallery a.carouselBtn
{
	position: absolute;
	bottom: 0;
	right: 30px;
	height: 20px;
	/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
	text-align: center;
	padding: 0 10px;
	font-size: 12px;
	background: #333;
	color: #fff;
	cursor: pointer;
}

.jdGallery .carousel
{
	position: absolute;
	width: 100%;
	margin: 0px;
	left: 0;
	top: 0;
	height: 115px;
	background: #333;
	color: #fff;
	text-indent: 0;
	overflow: hidden;
}

.jdExtCarousel{overflow: hidden; position: relative;}

.jdGallery .carousel .carouselWrapper, .jdExtCarousel .carouselWrapper
{
	position: absolute;
	width: 100%;
	height: 78px;
	top: 10px;
	left: 0;
	overflow: hidden;
}

.jdGallery .carousel .carouselInner, .jdExtCarousel .carouselInner{position: relative;}

.jdGallery .carousel .carouselInner .thumbnail, .jdExtCarousel .carouselInner .thumbnail
{
	cursor: pointer;
	background: #000;
	background-position: center center;
	float: left;
	border: solid 1px #fff;
}

.jdGallery .wall .thumbnail, .jdExtCarousel .wall .thumbnail{margin-bottom: 10px;}

.jdGallery .carousel .label, .jdExtCarousel .label
{
	font-size: 12px;
	position: absolute;
	bottom: 5px;
	left: 10px;
	padding: 0;
	margin: 0;
}

.jdGallery .carousel .wallButton, .jdExtCarousel .wallButton
{
	font-size: 10px;
	position: absolute;
	bottom: 5px;
	right: 10px;
	padding: 1px 2px;
	margin: 0;
	background: #222;
	border: 1px solid #888;
	cursor: pointer;
}

.jdGallery .carousel .label .number, .jdExtCarousel .label .number{color: #b5b5b5;}

.jdGallery a{font-size: 100%; text-decoration: none; color: inherit;}

.jdGallery a.right, .jdGallery a.left
{
	position: absolute;
	height: 99%;
	width: 25%;
	cursor: pointer;
	z-index:10;
	filter:alpha(opacity=40);
	-moz-opacity:0.4;
	-khtml-opacity: 0.4;
	opacity: 0.4;
}

* html .jdGallery a.right, * html .jdGallery a.left{filter:alpha(opacity=50);}

.jdGallery a.right:hover, .jdGallery a.left:hover
{
	filter:alpha(opacity=80);
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

.jdGallery a.left{left: 0; top: 0; background: url('img/fleche1.png') no-repeat center left;}

* html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }

.jdGallery a.right
{
	right: 0;
	top: 0;
	background: url('img/fleche2.png') no-repeat center right;
}

* html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }

.jdGallery a.open
{
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.withArrows a.open
{
	position: absolute;
	top: 0;
	left: 25%;
	height: 99%;
	width: 50%;
	cursor: pointer;
	z-index: 10;
	background: none;
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	opacity: 0.8;
}

.withArrows a.open:hover { background: url('img/open.png') no-repeat center center; }

* html .withArrows a.open:hover { background: url('img/open.gif') no-repeat center center;
	filter:alpha(opacity=80); }
	
	
/* Gallery Sets */

.jdGallery a.gallerySelectorBtn
{
	z-index: 15;
	position: absolute;
	top: 0;
	left: 30px;
	height: 20px;
	/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
	text-align: center;
	padding: 0 10px;
	font-size: 12px;
	background: #333;
	color: #fff;
	cursor: pointer;
	opacity: .4;
	-moz-opacity: .4;
	-khtml-opacity: 0.4;
	filter:alpha(opacity=40);
}

.jdGallery .gallerySelector
{
	z-index: 20;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #000;
}

.jdGallery .gallerySelector h2
{
	margin: 0;
	padding: 10px 20px 10px 20px;
	font-size: 12px;
	line-height: 30px;
	color: #fff;
}

.jdGallery .gallerySelector .gallerySelectorWrapper{overflow: hidden;}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton
{
	margin-left: 10px;
	margin-top: 10px;
	border: 1px solid #888;
	padding: 5px;
	height: 40px;
	color: #fff;
	cursor: pointer;
	float: left;
}

.jdGallery .gallerySelector .gallerySelectorInner div.hover{background: #333;}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview
{
	background: #000;
	background-position: center center;
	float: left;
	border: none;
	width: 40px;
	height: 40px;
	margin-right: 5px;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3
{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info
{
	margin: 0;
	padding: 0;
	font-size: 12px;
	font-weight: normal;
	color: #aaa;
}

/* Fix arrows in IE7 and problem with top margin */
*:first-child+html .slideInfoZone {
    bottom: -1px;
   }
*:first-child+html .jdGallery a.right, *:first-child+html .jdGallery a.left {
    filter:alpha(opacity=40);
   }
*:first-child+html .jdGallery a.right:hover, *:first-child+html .jdGallery a.left:hover {
    filter:alpha(opacity=80);
   }
*:first-child+html .jdGallery a.left { background: url('img/fleche1.gif') no-repeat center left; }
*:first-child+html .jdGallery a.right { background: url('img/fleche2.gif') no-repeat center right; }
*:first-child+html a.open:hover {
   background: url('img/open.gif') no-repeat center center;
    filter:alpha(opacity=80);
   }
/* End of arrows IE7 fix                          */

/*SLIMBOX*/

/* SLIMBOX */

#lbOverlay {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: #000;
	cursor: pointer;
}

#lbCenter, #lbBottomContainer {
	position: absolute;
	z-index: 9999;
	overflow: hidden;
	background-color: #fff;
}

.lbLoading {background: #fff url(loading.gif) no-repeat center;}

#lbImage {
	position: absolute;
	left: 0;
	top: 0;
	border: 10px solid #fff;
	background-repeat: no-repeat;
}

#lbPrevLink, #lbNextLink {
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	outline: none;
}

#lbPrevLink {left: 0;}

#lbPrevLink:hover {background: transparent url(prevlabel.gif) no-repeat 0 15%;}

#lbNextLink {right: 0;}

#lbNextLink:hover {background: transparent url(nextlabel.gif) no-repeat 100% 15%;}

#lbBottom {
	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	color: #666;
	line-height: 1.4em;
	text-align: left;
	border: 10px solid #fff;
	border-top-style: none;
}

#lbCloseLink {
	display: block;
	float: right;
	width: 66px;
	height: 22px;
	background: transparent url(closelabel.gif) no-repeat center;
	margin: 5px 0;
	outline: none;
}

#lbCaption, #lbNumber {margin-right: 71px;}

#lbCaption {font-weight: bold;}