@charset "utf-8";

#nav>ul>li:first-child {
	background: #ddd;
	background: rgba(255,235,235,0.75);	
}

#nav>ul>li:first-child a { color: #015 }

#logo { position: absolute; left: 10px; top: 10px; width: 200px; height: 84px; background-image: url('../images/logo.png') }

#main { margin: 0 auto; width: 960px }
#nav { margin-left: 280px; width: 680px }
form { display: inline }

#mainTextLeftAndRight { display: table; width: 100%; margin-top: 40px; padding-top: 80px; padding-bottom: 10px; background-image: url('../images/screenshot.png'); background-repeat: no-repeat; background-position: 100% 72px }

#mainTextLeft { display: table-cell; vertical-align: top; color: #f0f0f0; font-size: 110% }
#mainTextLeft img { margin-top: 60px }
#mainTextLeft>ul { margin: 0; padding: 10px 0 5px 25px }
#mainTextLeft>p { color: #e8c178; font-size: 102%; font-weight: bold }

#mainTextRight { display: table-cell; text-align: right; width: 300px; padding: 0 0px 0 0 }
#mainTextRight:hover { background-position: right -430px }

#play { width: 303px; height: 255px; background-image: url('../images/play.png'); background-position: -999px -999px; background-repeat: no-repeat; cursor: pointer;
	opacity: 0.5;
	transition: opacity .5s;
	-webkit-transition: opacity .5s;
	-moz-transition: opacity .5s;
	-o-transition: opacity .5s;
	transition-delay: .75s;
	-moz-transition-delay: .75s;
	-webkit-transition-delay: .75s;
	-o-transition-delay: .75s;
}
#play:hover { background-position: 24px 165px; opacity: 1 }

#testimonial { display: inlinee; color: #87c0d8; margin: 20px 0 0 -20px; padding: 0 }
#testimonial>p { margin: 0 15px 5px 0 }
#testimonial>p:first-child { color: #d7e0e2; font-family: times; font-size: 105% }
#testimonial a { color: #87c0d8; font-weight: bold; text-decoration: none }
#testimonial a:hover { color: #d7e0e2 }

#panel { display: table; padding: 10px 3px; background-color: #dce1e7; border: 1px solid #b6b6b6; border-radius: 10px }
#panel>a { display: table-cell; text-decoration: none; background-position: 95% 100%; background-repeat: no-repeat; padding: 5px 10px; border-right: 1px solid #b6b6b6; width: 222px }
#panel>a:hover>div>p { color: #000 }
#panel>a:first-child { background-image: url('../images/resizeIcon.png') }
#panel>a:first-child+a { background-image: url('../images/CDicon.png') }
#panel>a:first-child+a+a { background-image: url('../images/designIcon.gif') }
#panel>a:first-child+a+a+a { background-image: url('../images/updatesIcon.gif'); border-right: none }

.box { display: inline }

.box>p:first-child { font-size: 115%; color: #1479A0; font-weight: bold; font-family: Arial, Helvetica, sans-serif; margin: 0; width: 210px }

.box>p:first-child+p { font-size: 94%; color: #555; font-family: Arial, Helvetica, sans-serif; margin: 5px 0; width: 175px }

.box>img { position: absolute; bottom: 0; right: 0 }

