body{
  overflow:hidden;
  color: #ccc;
  background: #000 url(../img/bodybg.png) no-repeat top left;
  font-size: 12px;
  font-family: sans-serif;}
/*div{
border: 1px solid #fff;}*/


h1{
  margin-bottom: 0.25em;}
h1{
	text-align: left;
  font-size: 15px;}
h2{
  font-size: 13px;
  font-weight: bold;}
p           { margin: 0 0 1.5em; text-align: left;}
p img.left  { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; }
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; }

a{color: #f7971d;
text-decoration: none;}
a:hover{color: #0071bc;}

#container{
	position: relative;
	width:3834px;
	height:1957px;}
.stage{
	position: absolute;
	width:950px;
	height: 500px;}
#home{
	top: 1220px;
	left: 486px;
	height: 269px;
	padding-top: 231px;}
#services{
	top: 1220px;
	left: 2450px;
	width: 864px;
	padding-right:36px;}
#portfolio{
	top: 240px;
	left: 2450px;}
#contact{
	top: 240px;
	left: 486px;
	width: 870px;
	height: 430px;
	padding-top: 70px;
	padding-left: 80px;}
#layoutAnchor{
	position:absolute;}

.nav{
  position: absolute;
  bottom: 0;
  right:0;
  /*background: url(../img/sprites.png) no-repeat -749px -506px;*/
  height: 29px;
  float: left;}
.nav li{
  float: left;
  list-style: none;
  margin-left:4px}
.nav li a{
  display: block;
  float: left;
  width: 94px;
  height: 29px}
.nav li a[rel="home"]{background: url(../img/sprites.png) no-repeat -746px -532px;}
.nav li a[rel="services"]{background: url(../img/sprites.png) no-repeat -841px -532px;}
.nav li a[rel="portfolio"]{background: url(../img/sprites.png) no-repeat -935px -532px;}
.nav li a[rel="contact"]{background: url(../img/sprites.png) no-repeat -1030px -532px;}
.nav li a[rel="home"]:hover, .nav li a[rel="home"].selected{background: url(../img/sprites.png) no-repeat -746px -497px;}
.nav li a[rel="services"]:hover, .nav li a[rel="services"].selected{background: url(../img/sprites.png) no-repeat -841px -497px;}
.nav li a[rel="portfolio"]:hover, .nav li a[rel="services"].selected{background: url(../img/sprites.png) no-repeat -935px -497px;}
.nav li a[rel="contact"]:hover, .nav li a[rel="services"].selected{background: url(../img/sprites.png) no-repeat -1030px -497px;}

#home .slides{
  margin: 0 265px;
  height: 200px;}
#home .slides .container{
  width: 1410px;}
#home .slide{ 
  margin-right:50px;
  width: 420px;
  float: left;}
#home .brand{
  float: left;
  width:168px;
  height:244px;
  margin-left: 30px;
  background: url(../img/sprites.png) no-repeat -10px -9px; }
#home .menu{
  float: right;
  margin-right: 25px}
#home .menu ul{
	padding-top: 75px;}
#home .menu li{
		width:173px;
	text-align: left;
	list-style: none;
	height: 20px;
	line-height: 20px;
	padding-left: 25px;
	margin-bottom: 10px;}
#home .menu li a{
	border-bottom:1px solid #f05822;}

#services h1{
	float: left;
	text-align: left;
  font-size: 1.1em;
  width: 35%;
  border-bottom:1px dashed #0071bc;
  margin-bottom:140px;}
#services .slides{
  width: 100%;
  height: 300px;}
#services .container{
  width: 3800px;
  float: left;}
#services .slide{
  position: relative;
  float: left;
  padding-bottom: 100px;
  width:864px;}
#services .menu ul{
  margin-top:60px;
  float: left;
  padding-bottom: 147px;
  background: url(../img/sprites.png) no-repeat -279px 36px;}
#services .menu li{
  list-style: none;
  float: left;
  margin-right: 65px;}
#services .menu li a{
  display: block;
  float: left;
  width: 176px;
  height:50px;}
#services h1.motion, #services h1.web, #services h1.multimedia{
  width: 100%;
  border: none;
  height: 34px;
  margin-bottom: 40px;}
#services h1.motion{
  background: url(../img/sprites.png) no-repeat -186px -160px;}
#services h1.web{
  background: url(../img/sprites.png) no-repeat -186px -200px;}
#services h1.multimedia{
  background: url(../img/sprites.png) no-repeat -186px -240px;}
#services .content{
  float: left;
  width: 450px;
  padding: 6px;
  margin-left: 40px;}
#services .submenu{
  padding-top:8px;
  float: left;
  margin-left: 30px;}
#services .submenu li{
  list-style: none;
	height: 20px;
	line-height: 20px;
	padding-left: 25px;
	margin-bottom: 15px;}
#services .submenu li a, #services .submenu li span{
	display: block;
	width:100%;
	border-width: 0 0 1px 0;
	border-style: solid;
	color: #ccc;
	line-height: 18px;}
#services .menu a[rel="motion"]{background: url(../img/sprites.png) no-repeat -935px -574px;}
#services .menu a[rel="web"]{background: url(../img/sprites.png) no-repeat -935px -639px;}
#services .menu a[rel="multimedia"]{background: url(../img/sprites.png) no-repeat -935px -705px;}
#services .menu a[rel="motion"]:hover, #services .menu a[rel="motion"].selected{background: url(../img/sprites.png) no-repeat -745px -574px;}
#services .menu a[rel="web"]:hover, #services .menu a[rel="web"].selected{background: url(../img/sprites.png) no-repeat -745px -639px;}
#services .menu a[rel="multimedia"]:hover, #services .menu a[rel="multimedia"].selected{background: url(../img/sprites.png) no-repeat -745px -705px;}

#portfolio h1{
  font-size: 1.4em;
  padding-left:25px;}
#portfolio .list{

  padding: 10px 5px 0px;
  width: 946px;
	height:175px;
  background: url(../img/sprites.png) no-repeat -188px -275px;}
#portfolio .list a{
  color: #ccc;
	width:100%;
	display: block;}
#portfolio .list .slides{
  overflow: hidden;
	margin-bottom: 22px;}
#portfolio .list .container{
  width: 1920px;
  float: left;}
#portfolio .list ul{
  width: 300px;
  float: left;
  margin: 0 10px;
  border-right: 1px solid #464646;}
#portfolio .list ul.last{
	margin-right:0}
#portfolio .list li{
position: relative;
  list-style: none;
  width: 290px;
  height: 32px;
  line-height: 32px;}
#portfolio .list li.selected, #portfolio .list li.hover{
	border-bottom-style: solid;
	border-bottom-width: 3px;
	height: 29px;}
#portfolio .list li div{
  position: absolute;
	top: 0px;
	right: 0px}
#portfolio .scroll{
  float: right;}
#portfolio .scroll .left-arrow, #portfolio .scroll .right-arrow{
  display: block;
  float: left;
  width: 17px;
  height: 17px;
  margin: 0 8px;}
#portfolio .image{
  float: left;
  width:584px;
  height:247px;
  margin-right: 35px}
#portfolio .content{
  float: left;
  width: 269px;}
#portfolio .content h1{
	text-align: left;
  padding: 0 0 .1em;
  font-size: 1.8em;}
#portfolio .content h2{
	text-align: left;
  font-weight: normal;}
#portfolio .preview{
	float: left;
	height: 20px;
	line-height: 20px;
	padding-left: 25px;}
#portfolio .content .preview a{
  border-bottom:1px solid #f05822;}
.video-player{
	background: url(../img/sprites.png) no-repeat -683px -776px;
	width:430px;
	height:302px;
	padding:103px 18px;}
.video-player .close{
	display: block;
	background: url(../img/sprites.png) no-repeat -418px -736px;
	width:51px;
	height:23px;
	margin: 15px 0 0 380px;
	/*padding:103px 18px;*/}

#contact .slides{
  float: left;
  width: 550px;
  height: 400px;}
#contact .menu{
  width: 180px;
  float: left;
  padding-top: 110px;}
#contact .menu li{
  list-style: none;}
#contact .menu a{
  color: #fff;
  font-size: 1.3em;}
#contact .slide{
  margin-bottom: 50px;}
#contact .contact{
  padding-top:100px;
  height: 263px;}
#contact .contact div{
  position: relative;
  background: url(../img/sprites.png) no-repeat -188px -470px;
  height: 263px;
  padding-right: 45px;}
#contact .contact h1{
  border-bottom: 1px solid #f05822;}
#contact .contact textarea{
  color: #999;
  background: #000;
  border: none;
  width: 100%;
  height: 174px;}
#contact .contact .submit{
  float: right}
#contact .about .content{
  width: 70%;}
#contact .about .partner{
  text-align: right;
  padding-bottom: 20px}
#contact .about .partner h1{
  color:#f05822;
  margin-bottom: 0;}
#contact .about .partner h2{
  color:#0071bc;
  border-bottom: 1px solid #f7971d;
  padding-bottom: 5px;
  margin-bottom: 5px;}
#contact .about .kuma, #contact .about .jogra{
width: 152px;
height: 152px;
float: right;
margin: 0 0 0 20px;}
#contact .about .kuma{
  background: url(../img/sprites.png) no-repeat -19px -277px;}
#contact .about .jogra{
  background: url(../img/sprites.png) no-repeat -19px -450px;}

.layout-shadow{
  position: absolute;}
#shadow-top, #shadow-bottom{
  background: url(../img/shadow-t.png) repeat-x top left;
  height: 248px;
  width: 100%;}
#shadow-right, #shadow-left{
  width: 572px;
  height: 100%;
  background: url(../img/shadow-l.png) repeat-y top left;}
#shadow-bottom{
  bottom: 0;
  background: url(../img/shadow-b.png) repeat-x top left;}
#shadow-left{
  left:0;}
#shadow-right{
  right:0;
  background: url(../img/shadow-r.png) repeat-y top left;}

/*misc classes*/
.slides {position:relative; overflow:hidden;}
.hide{display: none;}
span.big{font-size:1.3em;}
span.bigger{font-size:2.1em;}
.yellow-text, #portfolio .multimedia {color: #f7971d; border-color: #f7971d;}
.orange-text, #portfolio .web {color: #f05822; border-color: #f05822}
.blue-text, #portfolio .motion {color: #0071bc; border-color: #0071bc}
.left-arrow{ background: url(../img/sprites.png) no-repeat -1114px -100px;}
.right-arrow{ background: url(../img/sprites.png) no-repeat -1114px -79px;}
.white-text {color: #fff}
.lightgray-text {color: #ccc}
.blue-bullet{ background: url(../img/sprites.png) no-repeat -1114px -8px;}
.yellow-bullet{ background: url(../img/sprites.png) no-repeat -1114px -31px;}
.orange-bullet{ background: url(../img/sprites.png) no-repeat -1114px -55px;}
.blue-border{border-color:#0071bc}
.yellow-border{border-color:#f7971d}
.orange-border{border-color:#f05822}