@charset "UTF-8";
/* CSS Document */

/****	STRUCTURE & DEFAULTS	****/
html { height:100%; min-height:100%; }
body { background:url(../images/bg-texture2.jpg) #000 center top; color:#fff; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12pt;  height:100%; min-height:100%;  }

#spiral { min-height:100%; position:relative; }
#spiral.services { background:url(../images/swirl-services2.png) no-repeat center top; }
#spiral.homepage { background:url(../images/swirl-homepage2.png) no-repeat center top; }
#spiral.portfolio { background:url(../images/swirl-portfolio.png) no-repeat center top; }
#spiral.about { background:url(../images/swirl-about2.png) no-repeat center top; }

#header-wrap { background:url(../images/bg-header.png) repeat-x; height:60px;  z-index:1; }
#header {  height:60px; padding-bottom:10px; margin:0 auto; width:980px; position:relative; }

#logo { float:left; width:335px; height:65px; margin-top:10px; }


#content { margin:0 auto; position:relative; width:980px; clear:both; }

#hp-writeup { background:url(../images/hp-writeup.png) no-repeat; height:334px; position:absolute; right:10px; top:190px; text-indent:-9999999px; width:433px; }
#hp-portfolio { width:490px; height:500px; margin-left:40px; }
#hp-preview { height:300px; border:1px solid gray; margin-bottom:10px; }
#hp-portfolio #slider { height:300px; margin-bottom:10px; border:8px solid #303030; }
#hp-portfolio #slider li { width:470px; height:255px; overflow:hidden; }
#hp-portfolio #slider li span {display: block; width:200px; height:40px; background:transparent url(../images/slide.png) repeat 0 0; margin-top:-40px; position: relative; } 
/* numeric controls */	

ol#controls { margin:1em 0; padding:0; height:28px; }
ol#controls li { margin:0 0px 0 0;  padding:0;	float:left; list-style:none; height:28px; line-height:28px; }
ol#controls li a{
	float:left;
	height:28px;
	line-height:28px;
	border:1px solid #565656;
	background:#101010;
	color:#565656;
	padding:0 10px;
	text-decoration:none;
	}
ol#controls li.current a{
	background:#282828;
	color:#aaa;
	}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}


#hp-portfolio h1 { }

#portfolio { position:absolute; right:100px; width:490px; top:30px; min-height:480px; }
#portfolio #portfolio-slider { height:300px; margin-bottom:10px; padding:0; border:8px solid #303030; }
#portfolio #portfolio-slider li { width:470px; height:255px; overflow:hidden; }

#services { position:absolute; right:100px; width:490px; top:30px; min-height:400px; text-align:right; }
#services h1 {  }
#services p { padding-bottom:20px; font-size:13pt; line-height:15pt; }


#footer { font-size:8pt; text-align: center; position:absolute; bottom:20px; margin:0 auto; width:300px; }

#leftside {  float:left; position:relative; }
#rightside { float:right; position:relative; }


/****	MENUs	****/

#menu { position:absolute; right:0px; top:7px; width:516px; }
#menu li { float:left; display:block; height:68px; }
#menu li a { display: block; height:68px; }
#menu li a span { display:none;}

#menu li a.portfolio	{ width:135px; background:url(../images/menu-rollover-small.png)	0 		0; }
#menu li a.services		{ width:135px; background:url(../images/menu-rollover-small.png)	-135px	0; }
#menu li a.about		{ width:122px; background:url(../images/menu-rollover-small.png)	-270px 	0; }
#menu li a.contact		{ width:122px; background:url(../images/menu-rollover-small.png)	-392px 	0; }

#menu li a:hover.portfolio	{ width:135px; background:url(../images/menu-rollover-small.png)	0		-70px; }
#menu li a:hover.services	{ width:135px; background:url(../images/menu-rollover-small.png)	-135px	-70px; }
#menu li a:hover.about		{ width:122px; background:url(../images/menu-rollover-small.png) 	-270px	-70px; }
#menu li a:hover.contact		{ width:122px; background:url(../images/menu-rollover-small.png) 	-392px	-70px; }

#menu li a.portfolio-active	{ width:135px; background:url(../images/menu-rollover-small.png)	0		-70px; }
#menu li a.services-active	{ width:135px; background:url(../images/menu-rollover-small.png)	-135px	-70px; }
#menu li a.about-active		{ width:122px; background:url(../images/menu-rollover-small.png) 	-270px	-70px; }
#menu li a.contact-active		{ width:122px; background:url(../images/menu-rollover-small.png) 	-392px	-70px; }


#menu-services { position:relative; height:580px; width:630px; }
#menu-services li { display:block; height:90px; position:absolute; }
#menu-services li.social { top:130px;  }
#menu-services li.brand { top:250px; left:70px; }
#menu-services li.ecom { top:370px; left:250px; }
#menu-services li.host { top:460px; left:400px; }
#menu-services li a { display: block; }
#menu-services li a span { display:none; }

#menu-services li a.serv-social		{ height:196px;	width:235px; background:url(../images/services-social-media-ian.png)	0	-196px; }
#menu-services li a.serv-brand		{ height:215px; width:266px; background:url(../images/services-branding-ian.png)			0	-215px; }
#menu-services li a.serv-ecom		{ height:190px;	width:239px; background:url(../images/services-commerce-ian.png)				0 -190px; }
#menu-services li a.serv-host		{ height:118px;	width:239px; background:url(../images/services-hosting-ian.png)					0 -118px; }

#menu-services li a:hover.serv-social	{ height:196px;	width:235px; background:url(../images/services-social-media-ian.png)	0	0; }
#menu-services li a:hover.serv-brand	{ height:215px;	width:266px; background:url(../images/services-branding-ian.png)			0	0; }
#menu-services li a:hover.serv-ecom		{ height:190px;width:239px; background:url(../images/services-commerce-ian.png)				0	0; }
#menu-services li a:hover.serv-host		{ height:118px;	width:239px; background:url(../images/services-hosting-ian.png)				0	0; }

#menu-services li a.serv-social-active	{ height:196px;	width:235px; background:url(../images/services-social-media-ian.png)	0	0; }
#menu-services li a.serv-brand-active		{ height:215px;	width:266px; background:url(../images/services-branding-ian.png)			0	0; }
#menu-services li a.serv-ecom-active		{ height:190px;width:239px; background:url(../images/services-commerce-ian.png)				0	0; }
#menu-services li a.serv-host-active		{ height:118px;	width:239px; background:url(../images/services-hosting-ian.png)				0	0; }


/*.serv-brand, .serv-ecom, .serv-host, .serv-social { position:absolute; }
.serv-social { top:150px; }
.serv-brand { top:270px; left:90px;  }
.serv-ecom { top:420px; left:260px; }
.serv-host { top:520px; left:450px; }

*/

/*ul#menu-portfolio { left:-25px; position:absolute; top:77px; width:360px; min-height:350px; border:1px solid red; }*/

ul#menu-portfolio { padding-top:102px; margin-left:-25px; width:360px; min-height:350px; }

ul#menu-portfolio li { height:36px; }
ul#menu-portfolio li a { display: block; height:36px;}
ul#menu-portfolio li a span { display:none;}

#menu-portfolio li a.client1	{ width:360px; background:url(../images/menu-portfolio.png)			0 		0; }
#menu-portfolio li a.client2	{ width:360px; background:url(../images/menu-portfolio.png)			0 		-36px; }
#menu-portfolio li a.client3	{ width:360px; background:url(../images/menu-portfolio.png)			0 		-72px; }
#menu-portfolio li a.client4	{ width:360px; background:url(../images/menu-portfolio.png)			0 		-108px; }
#menu-portfolio li a.client5	{ width:360px; background:url(../images/menu-portfolio.png)			0 		-144px; }
#menu-portfolio li a.client6	{ width:360px; background:url(../images/menu-portfolio.png)			0 		-180px; }
#menu-portfolio li a.client7	{ width:360px; background:url(../images/menu-portfolio.png)			0 		-216px; }

#menu-portfolio li a:hover.client1	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		0; }
#menu-portfolio li a:hover.client2	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-36px; }
#menu-portfolio li a:hover.client3	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-72px; }
#menu-portfolio li a:hover.client4	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-108px; }
#menu-portfolio li a:hover.client5	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-144px; }
#menu-portfolio li a:hover.client6	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-180px; }
#menu-portfolio li a:hover.client7	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-216px; }

#menu-portfolio li a.client1.active	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		0; }
#menu-portfolio li a.client2.active	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-36px; }
#menu-portfolio li a.client3.active	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-72px; }
#menu-portfolio li a.client4.active	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-108px; }
#menu-portfolio li a.client5.active	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-144px; }
#menu-portfolio li a.client6.active	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-180px; }
#menu-portfolio li a.client7.active	{ width:360px; background:url(../images/menu-portfolio.png)		360px 		-216px; }

/*	NEW PORTFOLIO	*/
#portfolio-slider { height:300px; margin-bottom:10px; border:8px solid #303030; }
#portfolio-slider li { width:470px; height:255px; overflow:hidden; }
#portfolio-slider li span {display: block; width:200px; height:40px; ; }

#personale { float:right; margin-right:15px; width:540px; }
#about-company { float:left; padding-left:20px; width:310px; }
#about-company p { padding-bottom:20px; font-size:13pt; line-height:15pt; }

#about { height:200px; }

img.left { clear:both; float:left; margin-right:20px;  }
img.right { clear:both; float:right; border:3px solid red; margin-left:20px;  }


/****	TEXT	****/
@font-face { 
	font-family: 'BebasRegular'; 
	src: url('../fonts/BEBAS___-webfont.eot');
	src: local('☺'), url('../fonts/BEBAS___-webfont.woff') format('woff'), url('../fonts/BEBAS___-webfont.ttf') format('truetype'), url('../fonts/BEBAS___-webfont.svg#webfont') format('svg');
	font-weight: normal;
	font-style: normal;
}
h1, h1.test, h2 {  font-family:'BebasRegular', Arial, sans-serif; }
h1.test {font-size: 60px/68px; letter-spacing: 0; word-spacing:30pt;}
h1 { font-size:28pt; padding:10px 0; word-spacing:11pt; letter-spacing:1pt; }
h2 { font-size:22pt; padding:10px 0; word-spacing:7pt; letter-spacing:1pt; }
h2 span { position:relative; top:15px; }
h3 { color:#fff; font-size:20px; line-height:28px; padding:10px 0; }

h1.homepagewriteup { background:url(../images/hp-big.png) no-repeat; text-indent:-999999px; height:407px; width:505px; margin:40px 0 0 40px; }
#about h2 { color:#ddd; padding:0; font-size:18pt;}
#about h2.alan { color:#FFF800; }
#about h2.sor { color:#22C9F9; }
#about h2.beth { color:#8DFA19; }
#about h3 { padding:0 0 10px; }


h2.contact { padding:130px 0 0 500px; width:300px; }
h2.address { padding:46px 0 0 500px; width:300px; }


p { font-size:10pt; color:#ddd; }
#about p { line-height:11pt; }
/****	LINKS	****/

a:link, a:visited { color: #8dfa19; }
a:hover { color: #FFF800; text-decoration:none; }