/*
 * common.css - part of:
 * WV CMS - the ever evolving custom content management system
 *
 * Copyright 2006-2011, Gravinese Enterprises Inc
 * Released under LGPL License.
 *
 * Author Jules Gravinese
*/

BODY, #body {
	background: #000;
	font-family: 'ProximaNovaLight';
	font-size: 15px;
	color: #cccccc;
	margin: 0 0 40px 0;
	/* letter-spacing: -0.005em; */
	overflow-x: hidden;
}

TD, TH, DIV, TEXTAREA, INPUT, SELECT {
	font-family: 'ProximaNovaLight';
	font-size: 15px;
	color: #cccccc;
	/* letter-spacing: -0.005em; */
}

a:link, a:visited {
	color: #33ff00;
	outline: none;
	text-decoration: none;
}

a:hover, a:active {
	color: #33ff00;
	outline: none;
	text-decoration: underline;
}


/* ============== PARALLAX =========== */
#container {
	width: 1100px; 
	margin: 10px auto 0; 
	position:relative; 
	height: 700px;
	overflow: hidden;
}

#clouds {
	z-index: 1;  
	left: -200px;
	top: 10px;
}

#band {
	z-index: 2; 
	top:   162px; 
	left: -300px;
	opacity: 0.75;
}

#logo {
	z-index: 11;  
	top:   48px;
	left: 942px;
}

#logoCloud {
	z-index: 3;
	top:  117px;
	left: 312px;
}

#punch {
    color: white;
    font-size: 25px;
    letter-spacing: -0.05em;
    margin: 0 auto;
    position: relative;
    width: 980px;
    z-index: 2;
}

#faderLeft {
	z-index: 1;
	position: fixed;
	top: 10px;
	left: 0px;
}
#faderRight {
	z-index: 1;
	position: fixed;
	top: 10px;
	right: 0px;
}

/*
#clouds, #logo, #logoCloud, #logoText, #prods, #faderLeft, #faderRight, #band, #km {
	position:absolute;
}
*/


/* ============= ACCORDION ========= */
#accordion {
	width: 1002px;
	margin: 50px auto 0 auto;
	overflow: hidden;
	height: 240px;
	z-index: 11;
	position: relative;
}

#accordion DIV.panel {
	float: left;
	width: 333px;
	overflow: hidden;
	height: 240px;
}

#accordion DIV.panel DIV.panelContainer {
	/* dude, tableless design is teh suxor */
	width: 1000px;
	overflow: hidden;
	background: url(../images/media/gui/panelBG.jpg) 100% 50% no-repeat transparent;
}

.pLeft {
	width: 260px;
	height: 240px;
	padding: 0px 65px 0 12px;
	display: table-cell;
	vertical-align: top;
	position: relative;
}
.p1 {
	background: url(../images/media/gui/p1Glow.jpg) top left no-repeat transparent;
}
.p2 {
	background: url(../images/media/gui/p2kv.jpg) top left no-repeat transparent;
/*
	padding-left: 20px;
	width: 190px;
*/
}
.p3 {
	background: url(../images/media/gui/p3dash.jpg) top left no-repeat transparent;
	/*padding-left: 20px;
	padding-right: 0;
	width: 310px;*/
}
.pRight {
	background: url(../images/media/gui/separater.png) top right no-repeat transparent;
	display: table-cell;
    height: 240px;
    padding: 0 20px 0 0;
    vertical-align: top;
    width: 642px;
}

H2 {
	margin: 0;
	font-size: 22px;
	letter-spacing: -.02em;
	color: #59ff21;
	height: 26px;
	font-weight: normal;
}

H3 {
	font-size: 15px;
	letter-spacing: 0em;
	color: #59ff21;
	margin: 0;
	font-weight: normal;
}

.pLeftIntro {
	margin-top: 125px;
}

.pRightTop {
	height: 132px;
}
.pRightBot {
	height: 72px;
}

#playVideo {
    background: url("../images/media/gui/play-video.png") no-repeat scroll right top transparent;
    display: block;
    height: 122px;
    margin: 26px 0 0 90px;
    position: absolute;
    width: 117px;
}

#playDemo {
    background: url("../images/media/gui/play-demo-video.png") no-repeat scroll right top transparent;
    display: block;
    height: 122px;
    margin: 26px 0 0 53px;
    position: absolute;
    width: 154px;
}


/* ================ ANIMATION ===============*/
.dotContainer {
	height: 170px;
	width: 221px;
	/* border: 1px solid green; */
	z-index: 3;
	display: table-cell;
	top: 360px;
}
#dotContainerLeft {
	left: 290px;
}
#dotContainerRight {
	left: 550px;
}
.dotContainer img {
	display:none;
}


#km {
	z-index: 3; 
	top:  528px;
	left: 200px;
}
#km TD {
	/* width: 209px; */
}
#km TD DIV {
	text-align: center;
	color: #33ff00;
	font-size: 24px;
}

#km1 {
	left:200px; 
	top:528px; 
	z-index:4;
}
#km2 {
	left:665px; 
	top:528px; 
	z-index:4;
}
#kmg1 {
	display:none; 
	left:200px; 
	top:528px; 
	z-index:3;
}
#kmg2 {
	display:none; 
	left:665px; 
	top:528px; 
	z-index:3;
}

#aHome, #aWork, #aLanc, #aTour {
	top: 610px;
	z-index: 2;
	color: #33ff00;
	font-size: 24px;
	display: none;
}
#aHome { left: 270px; }
#aTour { left: 710px; }
#aLanc { left: 715px; }
#aWork { left: 700px; }

#logoText {
	z-index: 3;
    left: 310px;
    position: relative;
    top: 228px;
}
#logoText IMG, #logoText DIV {
	position: absolute;
}
#syncIng, #syncYoursettings, #syncAnytime, #syncAnywhere {
	display: none;
}


/* ================= FOOTER ============= */
#razFooterSocial {
    height: 40px;
    width: 980px;
    margin: 0 auto;
}
#razFooterSocial, #razFooterSocialEU {
    color: #777777;
    font-weight: 700;
    line-height: 1;
    padding: 0;
}
#razFooterSocial #joinTwitter, #razFooterSocialEU #joinTwitter {
    float: right;
    padding: 5px 10px;
    font-size: 11px;
}
#razFooterSocial #joinFb, #razFooterSocialEU #joinFb {
    float: left;
    line-height: 25px;
    font-size: 11px;
}


/* =============== ETC ============== */
.green {
	color: #00ff00;
}
.flrt {
	float:right;
}
.fllt {
	float:left;
}
.clear {
	clear: both;
}

/* =============== Download ============== */
#download {
	width: 406px;
	margin: 35px auto 0;
	text-align: center;
}

#download a#btnsignup {
    background: url(../images/btn-signup.png) no-repeat left top;
    width: 203px;
    height: 51px;
    display: block;
}

#download a#btnsignup:hover, #download a#btnsignup.selected {
    background-position: 0 -51px;
}

#download a#btndownload {
    background: url(../images/btn-dl.png) no-repeat left top;
    width: 203px;
    height: 51px;
    display: block;
}


#download a#btndownload:hover, #download a#btndownload.selected {
    background-position: 0 -51px;
}

a#btndlpc {
    background: url(../images/btn-dl-pc.png) no-repeat left top;
    width: 146px;
    height: 51px;
    display: block;
}


a#btndlpc:hover, a#btndlpc.selected {
    background-position: 0 -51px;
}

a#btndlmac {
    background: url(../images/btn-dl-mac.png) no-repeat left top;
    width: 146px;
    height: 51px;
    display: block;
}


a#btndlmac:hover, a#btndlmac.selected {
    background-position: 0 -51px;
}

#downloadpage {
	width: 525px;
	height: 333px;
	background: url(../images/dl-container.png) no-repeat center center;
}