@charset "UTF-8";

/* Load Universal Styles */

@import url('universal.css');

body {
	margin: 0px;
	background:url(../images/random/randomizer.php) bottom right no-repeat fixed;
}

/* STRUCTURE */

/* Flash Content */

div#flashhead {
	width:100%;
	height:300px;
	background:#f8f8f8 url(../images/bg_flash.png) center top repeat-x;
	text-align:center;
	clear:both;
}
div#flashcontent {
	position:relative;
	width:950px;
	height:300px;
	margin:0px auto;
}



/* Main Content */

div#main_container {
	width:984px;
	padding: 20px 20px 20px 20px;
	margin:0 auto;
	overflow:hidden;
	background: none;
}

div#switcher{
	padding-top:40px;
}

h2.services{
	position:absolute;
	top:105px;
	right:47px;
	display:block;
	width:224px;
	height:34px;
	margin:0px;
	padding:0px;
	text-indent:-9999px;
	background:url(../images/h2_services.png) 0px 0px no-repeat;
}
div#video, div#web, div#apps{
	width:984px;
	overflow:hidden;
}

div.services_left{
	width:492px;
	position:relative;
	float:left;
	background:url(../images/bg_serviceshowcase.png) top center no-repeat;
}

div.services_right{
	width:452px;
	position:relative;
	float:right;
	padding:10px 20px 0px 0px;
}


div.services_right p{
	text-align: justify;
	line-height: 18px;
}

/* Showcase */

/* Jflow */

div#displaycase{
	width:404px;
	height:227px;
	padding:20px;
	border:#e1e1e1 1px solid;
	margin:0 auto;
	margin-top:10px;
	background:#f8f8f8 url(../images/bg_flash.png) 0px 0px no-repeat;
	overflow:hidden;
}

#demoreel{
	overflow:hidden;
	background:#666;
	width:400px;
	height:225px;
	margin:0px;
	padding:0px;
	border:#e1e1e1 1px solid;
}

/* Section Headers */

h3#videomotion{
	width:450px;
	height:37px;
	display:block;
	background:url(../images/h3_videomotion.png) 0px 0px no-repeat;
	text-indent:-9999px;
	padding:0px;
	margin:0px;
}

h3#webdesign{
	width:450px;
	height:37px;
	display:block;
	background:url(../images/h3_webdesign.png) 0px 0px no-repeat;
	text-indent:-9999px;
	padding:0px;
	margin:0px;
}

h3#webbasedapps{
	width:450px;
	height:37px;
	display:block;
	background:url(../images/h3_webbasedapps.png) 0px 0px no-repeat;
	text-indent:-9999px;
	padding:0px;
	margin:0px;
}

/* Jflow */

div#web_container, div#app_container{
	width:400px;
	height:400px;
	padding:20px;
	border:#e1e1e1 1px solid;
	margin:10px auto 0px auto;
	background:#f8f8f8 url(../images/bg_flash.png) 0px 0px no-repeat;
	overflow:hidden;
}
#webSlides, #appSlides{
	overflow:hidden;
	width:400px;
	height:400px;
	margin:0px;
	padding:0px;
}

#webSlides img, #appSlides img{
	border:#e1e1e1 1px solid;
	width:398px;
	height:398px;
}

div#webController, div#appController{
	width:400px;
	height:25px;
	padding:0px 20px;
	margin:5px auto;
	overflow:hidden;
}

#webController span, #appController span{
display:block;
width:22px;
height:22px;
background:#FFF;
margin-right:5px;
cursor:pointer;
text-align:center;
font-weight:bold;
border:#e1e1e1 1px solid;
line-height:22px;
float:left;
}
#webController span:hover, #appController span:hover{
border:#eb2a2e 1px solid;
}

#jFlowSlide, #jFlow2Slide{
background: url(../images/cnbg.jpg) top left no-repeat;
}

#webController span.jFlowSelected, #appController span.jFlow2Selected{
color:#FFF;
background:#eb2a2e;
border:#eb2a2e 1px solid;
}


.jFlowPrev, .jFlowNext, .jFlow2Prev, .jFlow2Next{
	position:absolute;
cursor:pointer;
width:76px;
height:48px;
}

.jFlowPrev, .jFlow2Prev{
	background:url(../images/cs_prev.png) 0px 0px no-repeat;
	top:250px;
	left:10px;
}
.jFlowPrev:hover, .jFlow2Prev:hover{
	background:url(../images/cs_prev.png) 0px -53px no-repeat;
}

.jFlowNext, .jFlow2Next{
	background:url(../images/cs_next.png) 0px 0px no-repeat;
	top:250px;
	right:10px;
}
.jFlowNext:hover, .jFlow2Next:hover{
	background:url(../images/cs_next.png) 0px -53px no-repeat;
}
	
	

/* Misc. */


.getflash{
	position:absolute;
	display:block;
	width:160px;
	height:41px;
	text-indent:-9999px;
	background:url(../images/getflashplayer.jpg) 0px 0px no-repeat;
	top:129px;
	left:395px;
}

a.moreexamples{
	display:block;
	height:25px;
	width:156px;
	background:url(../images/button_moreexamples.png) 0px 0px no-repeat;
	text-indent:-9999px;
	margin:10px 0px 0px 300px;
}

a.moreexamples:hover{
	background:url(../images/button_moreexamples.png) 0px -35px no-repeat;
}