html { margin: 0; padding: 0; }

body { background: #222; letter-spacing: 1px; margin: 0; padding: 0; font-size: 10pt; font-family: HelveticaNeue-Light, 'Helvetica Neue', sans-serif; color: #ebeff5; }

header { display: block; height: 100px; background-color: #ccc; 
	background-image: -webkit-gradient(radial, 450 150, 40, 450 150, 300, from(#f7f7f7), to(#a8a8a8));
	background-image: -moz-radial-gradient(450px 90px, ellipse farthest-side, #f7f7f7 0%, #a8a8a8 100%);
}


footer { clear: both; display: block; height: 55px; background: #c8c8c8; border-top: solid 3px #ddd; }

nav { display: block; position: relative; top: 70px; margin-left: 10px; }
nav ul { margin: 0; padding: 0; }
nav li { float: left; list-style: none; padding: 0; margin: 0; }

nav a { 
	position: relative; float: left; display: block; width: 100px; 
	margin-left: 1px; text-align: center; text-decoration: none; 
	border-top-left-radius: 6px; 
	border-top-right-radius: 6px;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;
	/* the following properties are overidden by a:hover and .selected */
	height: 22px; top: 2px; padding-top: 4px; 
	color: #ddd;
	background-color: #666;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#343434));
	background-image: -moz-linear-gradient(top, #666666, #343434);
	border-top: solid 2px #666;
	border-left: solid 2px transparent;
	border-right: solid 2px transparent;
}

nav a:hover, nav .selected {
	height: 22px; top: -1px; padding-top: 7px;
	color: #666;
	background-color: #dddddd;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));
	background-image: -moz-linear-gradient(top, #eee, #ddd);
	border-top: solid 2px #888;
	border-left: solid 2px #888;
	border-right: solid 2px #888;
}

h1 { font-weight: normal; font-size: 1.4em; color: #efefef; margin: 0 0 15px 0; padding: 5px; border-bottom: solid 1px #aaa; text-shadow: 2px 2px 3px #333; }


a { color: red; }

a:hover { color: #bbb; }

br.clear { clear: both; }

#page-container { 
	width: 900px; 
	background: #343434; 
	margin: 0 auto 30px auto; 
	box-shadow: 0px 0px 15px #111;
	-webkit-box-shadow: 0px 0px 15px #111;
	-moz-box-shadow: 0px 0px 15px #111;
}

#logo { float: right; position: relative; top: 20px; right: 30px; height: 75px; width: 300px; }

#page-main { 
	border-top: solid 3px #ddd;
	background-color: #343434; 
	min-height: 300px;
	background-image: -webkit-gradient(radial, 450 0, 40, 450 0, 400, from(#666), to(#343434));
	background-image: -moz-radial-gradient(450px 1px, cover, #555 0%, #343434 60%);
}

#disclaimer { text-align: center; padding-top: 20px; color: #333; font-weight: bold; }

.round-bottom {
	border-bottom-left-radius: 10px; 
	border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-moz-border-radius-bottomright: 10px;
}

.main { margin: 20px; width: 480px; float: left; }
.sub { margin: 20px; width: 340px; float: left; }

.main h2 { margin: 20px 0 0 5px; color: #999; font-weight: normal; font-size: 1.1em; text-shadow: 2px 2px 3px #333; }
.main p, .sub p { line-height: 1.4em; padding: 0; margin: 15px 5px 15px 5px;  }


.main li { line-height: 1.4em; margin: 0 0 5px 0; }

.bottom-runner { clear: both; margin: 0 0 30px 0; }


/* main page */


.product { margin: 0 0 10px 0; padding: 15px; width: 448px; float: left; background-color: transparent; border: solid 1px transparent; }

.product:hover { background-color: #3a3a3a; background-color: rgba(50, 50, 50, 0.5); border: solid 1px #444; cursor: pointer; }


.product img { float: left; margin: 0 20px 0 0; height: 80px; width: 80px; border: none; }

.product div { float: left; margin: 0; width: 340px; }



.product h2 { font-weight: normal; font-size: 1.3em; padding: 0; margin: 0; }

.product p { clear: both; margin: 5px 0 0 0; padding: 1px 0 0 0; line-height: 1.4em; }

.product a { color: #ebeff5; text-decoration: none; }



.product a:hover h2 { color: #888; }

.product a:hover p { color: #888; }

.android { float: right; display: inline-block; position: relative; top: -2px; margin: 0 0 0 5px; width: 20px; height: 24px; background-image: url('/images/android.png'); }
.apple { float: right; display: inline-block; position: relative; top: -2px; margin: 0 0 0 5px; width: 18px; height: 22px; background-image: url('/images/apple.png'); }
.palm { float: right; display: inline-block; position: relative; top: 5px; margin: 0 3px 0 5px; width: 31px; height: 12px; background-image: url('/images/palm.png'); }

.callout { margin: 30px 5px 5px 5px; padding: 10px 15px 10px 15px; background: #2a2a2a url('/images/dogear.png') right top no-repeat; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.callout h2 { font-weight: normal; font-size: 1.3em; margin: 0 0 10px 0; padding: 0; }
.callout .more { text-align: right; line-height: 2em; }
.callout-item img { float: left; margin-top: 3px; margin-right: 10px; }
.callout-item h2 { padding: 0; margin: 0 0 5px 0; font-weight: normal; }

.callout-item div { line-height: 1.3em; }

.news { margin: 0 0 50px 0; }
.news h1 { margin-bottom: 20px; }
.news h1 a { float: right; }
.news h1 a img { border: 0; }
.news-item { margin: 10px 0; padding: 0 5px; font-size: 0.9em; line-height: 1.3em; }
.news-item .date { display: block; font-size: .9em; color: #999; }


/* level 1 pages */

.sub-nav { margin: 0; background-color:#444; background-color: rgba(30,30,30,0.3); height: 30px; text-align: center; } /* #444 is for IE fallback */
.sub-nav .center { margin: 0 auto; display: inline-block; }
.sub-nav span { display: block; float: left; border-radius: 2px; }
.sub-nav a.selected { background-color: #c90000; color: #fff; } /* #ddd - #666 */
.sub-nav span:first-child { border-left: 1px solid #666; }
.sub-nav a { margin: 0; border-right: 1px solid #666; color: #ccc; display: inline-block; padding: 7px 20px; text-decoration: none; }
.sub-nav a:hover { background-color: #c90000; color: #fff; }

.quote { margin: 10px 20px 10px 10px; font-style: italic; color: #ccc; line-height: 1.3em; }

.quote .attrib { display: block; margin-top: 10px; font-style: normal; color: #ccc; font-weight: bold; padding-left: 10px; }

.quote .quotemark { font-size: 2em; position: relative; top: 10px; padding-right: 5px; }

.center { text-align: center; }

.appstore { text-decoration: none; color: #efefef; }
.appstore img { border: none;  }

.market { width: 280px; margin: 40px auto 40px auto; padding: 10px; background: #000; border :solid 2px #efefef; }
.market:hover { background: #222; cursor: pointer; }
.market .icon { float: left; border: none; width: 60px; height: 60px; }
.market .text { color: #fff; font-size: 1.2em; text-decoration: none; position: relative; top: 10px; }
.market span { font-weight: bold; }
.market .qrcode { float: right; border: none; width: 60px; height: 60px; -webkit-transition-property: height, width; -webkit-transition-duration: 0.5s; }
.market .qrcode:hover { width: 175px; height: 175px; }



#screenshots { text-align: center; }

/* apps */

.apps .app-list { margin: 0; padding: 0 0 0 20px; }
.apps .app-list img { position: relative; padding-right: 6px; top: 13px; border: none; }
.apps .app-list li { list-style: none; line-height: 2em; }
.apps .app-list a { text-decoration: none; font-size: 1.3em; color: #ddd; }
.apps .app-list a:hover { color: red; }

/* technology */
.technology li { line-height: 1.4em; margin: 0 0 15px 0; }

/* consulting */
.client { float: left; text-align: center; margin: 5px; }
.client img { height: 86px; width: 100px; }
.client p { margin: 5px 0 0 0; padding: 0; }

/* email list */

.coming-soon { padding: 20px; }

.button { background-color:#ddd; border:1px solid #999; border-top:1px solid #eee; border-left:1px solid #eee; padding: 4px; margin: 0 1px 0 1px; font-size: 1em; }
.button:hover { background-color:#aaa; }
.button:active { background-color:#555; color: #efefef; }
.email-field { background-color:#efefef; border:1px solid #999; border-bottom:1px solid #eee; border-right:1px solid #eee; padding: 4px; width: 200px; margin: 0 1px 0 1px; color: #000; font-size: 1em; }
.hint { font-style: italic; color: #999; }

/* hands-only */
.tm { font-size: .5em; position: relative; top: 5px; }
abbr { border-bottom-width: 0; }

/* hands only multi-platform */
.multi-platform { float: left; padding: 15px; width: 140px; height: 270px; text-align: center; }
.multi-platform:hover { background: #555; cursor: pointer; }
.multi-platform h3 { text-align: center; margin: 0; padding: 0; }
.multi-platform span { display: block; text-align: center; margin: 5px 0 10px 0; }