/* Body
-------------------------------------------------------------- */
body { background:url(../images/bg.gif) repeat-x #f0f0f0; color:#666; }

@font-face {font-family: MuseoSans;src: url(fonts/MuseoSans_500.otf) format("opentype");}
@font-face {font-family: MuseoSans;src: url(fonts/MuseoSans_500.otf) format("opentype");}

/*@font-face {font-family: MuseoReg;src: url(../fonts/Museo300-Regular.otf) format("opentype");}


/* Links
-------------------------------------------------------------- */
a 			{font-weight: bold;}
a:link 		{color: #006699;}
a:visited 	{color: #333333;}
a:hover 	{color: #cc0000; text-decoration: underline;}
a:active 	{color: #006699; outline: none;}
a:focus { -moz-outline-style: none;outline: none; }

/* Container
-------------------------------------------------------------- */
#container { position:relative;margin: 0 auto; width: 950px; }

/* Classes
-------------------------------------------------------------- */
.box {position: relative;background: #fff; border: solid 1px #e6e6e6; -webkit-border-radius: 7px; -moz-border-radius: 7px; padding: 30px 30px 10px 30px; margin-bottom: 20px;  }

/* Typo
-------------------------------------------------------------- */
h1,h1 a, h2,h2 a:link, h3 {color:#333; letter-spacing:-0.03em; font-weight: 400; text-shadow: 0px 1px 0px white; }
#slider h1 {font-size: 5em;letter-spacing:-0.08em;}
p {text-shadow: 0px 1px 0px white; }



/* Header
-------------------------------------------------------------- */
#header {
	position:relative;
}
#logo a {background: url(../images/headerlogo.png) no-repeat; text-indent:-9999px; display:block; width:305px; height:143px;}

#home-temp #logo { margin-left: 0px; }

#nav { position: absolute; top: 40px; right: 0px; font-size: 0.9em;}
#nav a { color: #fff; background: #262626;padding: 6px 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; text-decoration: none;  }
#nav a:hover { background:#404040; color:#fff; }
#nav a.active { background:#fff; color:#262626; }
#nav ul,#nav li { list-style-type:none; padding: 0; margin: 0; }
#nav li { float:left; display: inline; margin: 0 7px; }

#home-temp #nav { display: ; }

/* Home
-------------------------------------------------------------- */
#home {background: url(../images/bg-home.png) repeat-x #f0f0f0;}
#home #content {background: url(../images/bg-wrap.jpg) no-repeat center top;}

#home-temp {background: url(../images/bg-home2.png) repeat-x #f0f0f0;}
#home-temp #content {background: url(../images/bg-texture.jpg) no-repeat center top;}

#welcomecontent { position: relative; height: 535px; }
#home-temp #welcomecontent { position: relative; height: 693px; background: url(../images/laptop.png) no-repeat 50px 135px;}
.titleintro {position: absolute; z-index: 1; text-indent: -9999px; background: url(../images/titles.png) no-repeat; height: 80px; width: 950px; margin: 0; padding: 0; top: 30px; left: 0;}

#workinfo { position: absolute; top: 630px; text-align: center; width: 950px;}

#loopedSlider {width: 578px; position:absolute; top:166px; left: 87px; padding: 0 100px; overflow: hidden;}
.slidercontainer { width:578px; height:600px; overflow:hidden; position:relative; cursor:pointer; }
.slides { position:absolute; top:0; left:0; }
.slides div { position:absolute; top:0; width:578px; display:none; }
.slides div p.caption {margin-top: 92px; text-align: center; font-style: normal; font-size: 0.9em;}
 
#names {position: absolute; top: 400px; left:0; width: 500px; height: 40px;}
#names { width: 500px; overflow: hidden; color: #fff;}

.previous {text-indent: -9999px; position:absolute; z-index:10;display:block;border:none;outline:none;cursor:pointer;padding:0;top:160px;left:0px;background:url(../images/arrows2.png) no-repeat -4px -3px;width:60px;height:60px;}
.next {text-indent: -9999px; position:absolute;top:303px;right:-18px;z-index:10;display:block;border:none;outline:none;cursor:pointer;padding:0; top:160px;right:0px;background:url(../images/arrows2.png) no-repeat -68px -3px;width:60px;height:60px;}

.previous:hover {background-position: -4px -63px;}
.next:hover {background-position: -68px -63px;}
.previous:active { background-position: -4px -123px; }
.next:active { background-position: -68px -123px; }

#contacttab a {
	text-indent: -9999px;
	position: absolute;
	top: -88px;
	right: 25px;
	display: block;
	width: 200px;
	height: 80px;
	background: url(../images/contact.png) no-repeat;
}

#featuredwork { position: relative; z-index: 10;background: url(../images/bg-featuredwork.png) no-repeat; width: 950px; height: 432px; top: 103px; left: 0; }
#featuredwork h3 { display: block; text-align: center; width: 640px; padding-top: 36px; font-size: 1em; font-weight: normal; letter-spacing: 0;}
.featuredpic { position: absolute; top:  58px; left: 1px; }
#featureddetails { position: absolute; top: 100px;left:675px; width: 240px; color: #e5e5e5;}
#featureddetails a { color: #006699; font-weight: normal; }
#featureddetails a:hover { color: #fff; }
#featureddetails h4 { margin-bottom: 5px; font-weight: bold; color: #fff; }
#featureddetails h4, #featureddetails p { text-shadow: 0px -1px 0px #000; }

.featuredbanner { background: url(../images/sprites.png) no-repeat 0 -329px; width: 95px; height: 95px; text-indent: -9999px; display: block; position: absolute; top: 30px; left: 0; z-index: 10;}

.projectlink { text-transform: uppercase; font-size: 0.9em; }
.projectcopy { font-size: 0.9em; }
.projectcopy span { color:  #cc0000; padding: 0 5px; }

#testimonial { font-style: italic; text-align: center; padding: 15px 0; }
#testimonial span { font-style: normal; font-weight: bold; padding: 0 0 0 15px; margin-left: 15px; border-left: solid 1px #e6e6e6; color: #2e2e2e;}

/* Buttons
-------------------------------------------------------------- */
.btn { display: block; float: left; margin-right: 10px; text-indent: -9999px; height: 33px; background: url(../images/sprites.png) no-repeat 0 -594px;}
.btn-viewmorework { background-position: -270px -594px ;  width: 132px;}
.btn-viewmorework:hover { background-position: -270px -627px; }
/* bottom
-------------------------------------------------------------- */
#bottom { margin-left: -15px; }
#bottom .block { float: left; display: inline; width: 285px;  clear: none; margin: 0 0 0 15px; padding: 0 10px;}

/* friends
-------------------------------------------------------------- */
#friends {background: #fff; -webkit-border-radius: 7px; -moz-border-radius: 7px; border: solid 1px #ebebeb; margin-bottom: 20px; padding:0;}
#friends h2 { margin: 0; font-size: 1.2em;}
#friends ul, #friends li {list-style-type: none; padding: 0; margin: 0;}
#friends ul {float: left; display: inline; padding: 25px; width: 250px;}
#friends ul.address { padding-left: 30px; border-right: solid 1px #ebebeb; width: 243px;}
#friends ul.friendspartners { padding-left: 30px; border-right: solid 1px #ebebeb; width: 262px;}
#friends ul.featured { padding-left: 30px; }

/* content
-------------------------------------------------------------- */
#content {  }

/* Introduction
-------------------------------------------------------------- */
#introduction {width: 950px; height: 330px;-webkit-border-radius: 7px; -moz-border-radius: 7px; margin-bottom: 60px; }
#introduction h1,#introduction h2, #introduction p,#introduction .buttons {color: #fff; margin-left: 480px; width: 420px;}				

#featured {text-indent: -9999px; display: block; width: 125px; height: 125px; background: url(../images/sprites.png) no-repeat; position: absolute; top: -1px; left: -1px; z-index: 2; }
						
#introduction h1 {font-size: 4em; letter-spacing: -0.06em; padding-top: 40px; margin-bottom: 20px;  }
#introduction h2 {margin-bottom: 5px ; padding: 0; }
#introduction p {font-size: 1.2em; }
#introduction .buttons { text-indent: -9999px; }
#introduction .buttons a { float: left; display: inline; margin-right: 10px;display: block; width: 170px; height: 35px; background: url(../images/btn-sprites.png) no-repeat 0 0; }
#introduction .buttons a.btn-morework {background-position: 0 -36px;}

.screenshot {position: absolute; top: 13px; left: 4px; z-index: 1; }

/* Innerpage
-------------------------------------------------------------- */
.innerpage #content {background: url(../images/bg-texture-innerpage.jpg) no-repeat center top; }
.innerpage h1 {color: #fff; font-size: 3.6em;margin: 40px 0; }
p.intro {color: #333;}

/* mainContent
-------------------------------------------------------------- */
#mainContent {background: url(../images/bg-sidemenu.jpg) no-repeat top right; }
.pic { border: solid 1px #e6e6e6; padding: 10px; background: #fff; margin: 0 30px 20px 0; float: left; display: inline;}


/* Work
-------------------------------------------------------------- */

.work #mainContent { background: none; }
.work #primaryContent {width: 950px; margin-bottom: 0;}
.work #worklist {padding: 0; background: none;}

#worklist { padding: 30px 0 0 0; color: #999; clear: both; background: url(../images/bg-footer.gif) repeat-x; margin-left: 0;}
#worklist ul { margin: 0; padding: 0; }
#worklist li { float: left; display: inline; margin: 0 16px 16px 0; list-style-type: none; border: solid 1px #e6e6e6;padding: 10px; background: #fff;line-height: 1; }
#worklist li.last { margin-right: 0; }

.workdetails #mainContent {background: url(../images/bg-sidemenu.jpg) no-repeat 285px 0; margin-bottom: 20px }
.workdetails #primaryContent {width: 260px;}
.workdetails #secondaryContent {width: 630px; padding-bottom: 10px;}

.workdetails h2 { margin-bottom: 5px; }
.projectlink a {background: url(../images/sprites.png) no-repeat -784px -360px; font-weight: normal; padding: 3px 0 8px 20px; font-size: 0.9em; }

.services { list-style-type: none; margin: 0; padding: 0; }
.services li { background: url(../images/sprites.png) no-repeat -784px 0; margin: 0; padding: 2px 0 2px 25px; color: #333;}
.services li.architecture { background-position: -783px -32px; }
.services li.design { background-position: -783px -58px; }
.services li.code { background-position: -782px -82px; }
.services li.cms { background-position: -782px -108px; }
.services li.hosting { background-position: -781px -134px; }
.services li.support { background-position: -782px -161px; }
.services li.marketing { background-position: -782px -186px; }
.services li.ecommerce { background-position: -782px -233px; }
.services li.newsletter { background-position: -782px -330px; }
.services li.photo { background-position: -782px -281px; }
.services li.video { background-position: -782px -304px; }
.services li.seo { background-position: -782px -256px; }

#projectscreenshots { margin: 0 0 0 2px; position: relative; }

#gallery-menu { text-align: center; padding: 10px; height: 10px; position: absolute; top: -36px; right: 0; }
#gallery-menu a { background: url(../images/sprites.png) no-repeat -79px -491px; display: block; width: 12px; height: 12px; float: left; text-indent: -9999px; margin: 0 2px;}
#gallery-menu a:hover,#gallery-menu  a.wactive { background-position: -96px -491px; }

.ourwork {padding-bottom: 25px;}
div.casestudy {
	float: left;
	margin: 0 15px 15px 0;
	padding: 0;
	width: 306px;
}

div.casestudy.active { cursor: pointer; }
div.casestudy.last { margin: 0; }


div.casestudy a {
	display: block;
	position: relative;
	width: 284px;
	height: 160px;
	overflow: hidden;
	border: solid 1px #e6e6e6;padding: 10px; background: #fff;line-height: 1;
}

div.casestudy a:focus, 
div.casestudy a:hover { text-decoration: none; cursor: pointer;}

div.casestudy img {
	position: absolute;
	top: 10px;
}

/* =WORK - SCREEN ROTATOR ******************************************/

div#screenrotator {
	float: right;
	margin: 0;
	width: 628px;
	height: 682px;
	display: block;
	position: relative;
	background: #fff;
}

#home-temp div#screenrotator {
	float: left;
	margin: 179px 0 0 187px;
	width: 578px;
	height: 376px;
	display: block;
	position: relative;
	background: none;
}

#flare { display: block;background: url(../images/flare.png) no-repeat; width: 578px; height: 376px;position: absolute; top: 0; left: -1px; z-index: 1000; }

#screenrotator .frame {background: url(../images/frame-gallery.png) no-repeat; width: 628px; height: 682px; position: absolute; top: 0; left: 0; z-index: 10;}

div#screenrotator button.prev{position:absolute;top:303px;left:-18px;z-index:10;display:block;width:50px;height:48px;background:url(../images/bg-arrows.png) no-repeat -26px 1px;border:none;outline:none;cursor:pointer;padding:0;}
#home-temp div#screenrotator button.prev{top:160px;left:-100px;background:url(../images/arrows2.png) no-repeat -4px -3px;width:60px;height:60px;}
div#screenrotator button.next{position:absolute;top:303px;right:-18px;z-index:10;display:block;width:50px;height:48px;background:url(../images/bg-arrows.png) no-repeat -72px 1px;border:none;outline:none;cursor:pointer;padding:0;}
#home-temp div#screenrotator button.next{top:160px;right:-100px;background:url(../images/arrows2.png) no-repeat -68px -3px;width:60px;height:60px;}


div#screenrotator button.prev:hover {background-position: -26px -46px;}
div#screenrotator button.next:hover {background-position: -72px -46px;}
div#screenrotator button.prev:active { background: url(../images/bg-arrows.png) no-repeat -26px -93px; }
div#screenrotator button.next:active { background: url(../images/bg-arrows.png) no-repeat -72px -93px; }
div#screenrotator button:focus { outline: none;-moz-outline-style: none; }
div#screenrotator button span {display: none;}

#home-temp div#screenrotator button.prev:hover {background-position: -4px -63px;}
#home-temp div#screenrotator button.next:hover {background-position: -68px -63px;}
#home-temp div#screenrotator button.prev:active { background-position: -4px -123px; }
#home-temp div#screenrotator button.next:active { background-position: -68px -123px; }
div#screenrotator button:focus { outline: none;-moz-outline-style: none; }


div.imagearea {
	float: left;
	display: block;
	width: 628px;
	height: 682px;
	overflow: hidden;
}
#home-temp div.imagearea {
	float: left;
	display: block;
	width: 578px;
	height: 376px;
	overflow: hidden;
}

div.imagearea li {list-style-type: none; margin: 0;}
div.imagearea img {	border: solid 1px #e6e6e6;padding: 10px; background: #fff;line-height: 1;}
#home-temp div.imagearea img {	border: none;padding: 0; background: none;line-height: 1;}



/* Galler Slider
-------------------------------------------------------------- */
#gallery { list-style-type: none; position: relative; }	
#gallery ul {border: solid 1px #e6e6e6; padding:10px; background: #fff; width: 682px;}
#gallery li{ width:628px;height:682px;overflow:hidden; padding: 0; margin: 0;}	
#prevBtn, #nextBtn{ display:block;position:absolute;left:-16px;top:200px;z-index: 11;background: url(../images/bg-arrows.png) no-repeat -28px -154px; width: 45px; height: 44px;}	
#nextBtn { left:600px; background-position: -78px -154px}														
#prevBtn a, #nextBtn a { display:block;text-indent: -9999px;width:41px;height:41px;background: url(../images/bg-arrows.png) no-repeat -28px -1px; }
#prevBtn a:hover {background-position: -28px -48px; }
#prevBtn a:active {background-position: -28px -95px; }

#nextBtn a { background: url(../images/bg-arrows.png) no-repeat -77px -1px; }	
#nextBtn a:hover { background-position: -77px -48px; }	
#nextBtn a:active { background-position: -77px -95px; }	

/* PrimaryContent
-------------------------------------------------------------- */
#primaryContent {float: left; display: inline; width: 615px; margin: 40px 30px 40px 0;}
p.intro {font-size:1.1em; line-height: 1.8em; }
.col { float: left; display: inline; width: 255px; margin-right: 20px; }

.col ul {margin: 0; padding: 0; }
.col li {margin: 0 0 20px 0; padding: 0 0 0 60px; list-style-type: none; }
.col li a {display: block; font-size: 1.1em; }
.col li.icon {background: url(../images/icons-services.png) no-repeat 0 0; }
.col li#websitedev {background-position: 0 5px; }
.col li#webdesign {background-position: 0 -110px; }
.col li#shop {background-position: 0 -349px; }
.col li#hosting {background-position: 0 -469px; }
.col li#marketing {background-position: 0 -602px; }
.col li#seo {background-position: 0 -737px; }
.col li#cms {background-position: 0 -224px; }
.col li#usability {background-position: 0 -873px; }

/* SecondaryContent
-------------------------------------------------------------- */
#secondaryContent {float: left; display: inline; width: 270px;padding:40px 0 40px 30px; min-height: 450px; }
#secondaryContent h3 {font-size: 0.9em; }
#secondaryContent #contact { border-bottom: none; padding-bottom: 0;}

.sideBlock {border-bottom: solid 1px #e6e6e6; margin: 0 -30px 20px -30px; padding: 0 30px 10px 30px; }
.sideBlock h3 {margin-bottom: 0.5em; }

#randomProject {padding-bottom:0; }
.randomScreen {margin: 0 0 0 -20px; }

/* Blocks
-------------------------------------------------------------- */
.block {clear: both; margin-bottom: 40px;}
.block h2 {margin: 0 0 8px 0;padding: 6px 0 0 0; font-weight: normal; font-size: 20px; }
.block h2 a:visited {font-weight:  normal; }
.block .icon {background: url(../images/sprites.png) no-repeat 0 0; display: block; float: left; width: 50px; height: 50px; text-indent: -9999px; margin: 0 10px 0 0;}
.clientwork .icon {background-position: -82px 0;}
.ourservices .icon {background-position: -75px -108px;}
.getintouch .icon {background-position: -75px -218px;}
.designdev .icon {background-position: 0px 4px;}
.codingopt .icon {background-position: 0px -105px;}
.promomarkt .icon {background-position: -0px -218px;}

/* Footer
-------------------------------------------------------------- */
#footer { font-size: 0.8em; padding-top: 20px; color: #999; clear: both; background: url(../images/bg-footer.gif) repeat-x; }
#footer a {color: #666; font-weight: normal; text-decoration: none; }
#footer strong { font-weight: normal; }

#newsletter {float:right; display: inline; width: 305px; padding: 0 0 0 0px; }
#newsletter input.emailinput {background: url(../images/sprites.png) no-repeat 0 -665px; font-size: 1em; padding: 7px 0px 0 30px; color:#ccc; border: none; height: 26px; width: 174px;}
#newsletter .submitbutton {vertical-align: top;}

#copy {padding: 5px 0 10px 70px; background: url(../images/smallzooglah.png) no-repeat 0 ;}