 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800);
@import url('button.css');

@font-face {
    font-family: 'Open Sans';
    src: url('opensans-condbold-webfont.eot');
    src: url('opensans-condbold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-condbold-webfont.woff') format('woff'),
         url('opensans-condbold-webfont.ttf') format('truetype'),
         url('opensans-condbold-webfont.svg#OpenSansCondensedBold') format('svg');
    font-weight: normal;
    font-style: normal;

}


/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 0.12.0
*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym {border:0;}
a {outline:none;}

/*== GENERAL ======================================================================*/
body {
  position:relative;
  font-size:10px;
  font-family:Arial;
  /*background:url(../img/noise.png);*/
}

/* highlight */
::selection {
	background:#feef00; 
  color:#000;
	}
::-moz-selection {
	background:#feef00; 
  color:#000;
}

/* clearfix */
.clear:before, 
.clear:after {content:""; display:table;} 
.clear:after {clear:both;} 
.clear { *zoom:1;}

.left {float:left;}
.right {float:right;}
.hide {display:none;}
.center {text-align:center;}

/* grid960 */
#g960 {
	display: none;
	opacity: 0.3;
  position:absolute;
	top:0; 
	bottom:0;
	left:0;
	right:0;
	background:url(../img/g960.png) top center repeat-y;
	z-index:10000;
}

.w960 {
	position:relative;
	width:96em;
	background:none;
	margin:0 auto;
}

.box {
	position:relative;
	float:left;
	border:1px solid transparent;
	/*border-color:red;*/
}

.inner {
  border: none;
}

.x1 {width:7.8em;}
.x2 {width:15.8em;}
.x3 {width:23.8em;}
.x4 {width:31.8em;}
.x5 {width:39.8em;}
.x6 {width:47.8em;}
.x7 {width:55.8em;}
.x8 {width:63.8em;}
.x9 {width:71.8em;}
.x10 {width:79.8em;}
.x11 {width:87.8em;}
.x12 {width:95.8em;}

.proto {height:3em;}

/*== HEADER ======================================================================*/
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6.2em;
  background: #000000;  
  background-image: -webkit-gradient(linear, left top, left bottom, from(#262626), to(#000000)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #262626, #000000); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #262626, #000000); /* FF3.6+ */
  background-image:      -o-linear-gradient(top, #262626, #000000); /* Opera 11.10+ */
  background-image:         linear-gradient(to bottom, #262626, #000000);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#262626', EndColorStr='#000000'); /* IE6–IE9 */
  z-index: 10000;
  
  box-shadow: 0em .1em .7em rgba(0, 0, 0, 0.3);
  -moz-box-shadow:0em .1em .7em rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0em .1em .7em rgba(0, 0, 0, 0.3);
}

#logoContainer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6.2em;
  z-index: 10000;
}

#menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 6.2em;
  z-index: 10000;
}

.logo {
  position: absolute;
  width: 13.4em;
  height: 9em;
  margin: -1px 0 0 4.5em;
  background:url(../img/lgo_justGage_small.png) top left no-repeat;
}

.logoBig {
  position: absolute;
  top: 0;
  left: 2.5em;
  width: 178px;
  height: 127px;
  margin: -1px auto 0 auto;
  background:url(../img/lgo_justGage.png) top left no-repeat;
}

.mainMenu {
	position:relative;
  display: inline-block;
  float: right;
	margin:0 0 0 0;
}

.mainMenu li {
	display:inline-block;
	float:left;
	margin:0 0.5em;
}

.mainMenu li a:link,
.mainMenu li a:active,
.mainMenu li a:visited,
.mainMenu li a:hover {  
  font-family:'Open Sans', sans-serif;
	/*-webkit-font-smoothing: subpixel-antialiased;*/
	display:inline-block;
	font-size:1.6em;
  line-height:2.6em;
	padding:0 1.5em;
  margin:0.625em 0 0 0;
	text-decoration:none;
	color:#feef00;
}
.mainMenu li a:hover {
  color:#fff;
  /*background:#363636;*/
   -moz-border-radius:0.3em;
  -webkit-border-radius:0.3em;
  border-radius:0.3em;
}

.mainMenu li a.button:link,
.mainMenu li a.button:active,
.mainMenu li a.button:visited,
.mainMenu li a.button:hover {
  margin: .95em 0 0 0;
  padding: .5em  2.4em .4em .8em;
  font-family: 'Arial';
  font-weight: normal;
  color: #fff;
  font-size:1.4em;
  line-height:1.4em;
  min-width: 0;
}
.mainMenu li a.button:hover {
}

/*== CONTENT ======================================================================*/

#about {
  padding: 17em 0 0em 0;
}

h1 {
  font-family:'Open Sans', sans-serif;
  font-size:3.8em;
  line-height:1em;
  color:#000;
  margin:0 0 .8em 0;
}

p {
  font-size: 1.4em;
  line-height: 1.571428571428571em;
  margin:0 0 2.142857142857143em 0;
}

strong {
  font-weight: bold;
}

.whiteSection {
  background: #fff url(../img/white_section_top.png) top center no-repeat;
  padding: 12em 0 10em 0;
}

.darkSection {
  background: #494949 url(../img/dark_section_highlight.png) top left repeat-x;
  padding: 12em 0 10em 0; 
}

.darkSection h1 {color: #fff;}
.darkSection p {color: #bcbcbc;}
.darkSection p strong{color: #fff;}
.darkSection a {color: #feef00;}

pre {
  font-size: 1.2em;
  border: 1px solid #d9d9d9;
}

pre.setup {
  margin: 2em 5em 0 2em;
}

pre.frst {
  margin-top: 0em;
}

ul.highlights {
	margin:1em 0 0 0;
	display:block;
}

ul.highlights li {
	display:block;
	clear:both;
	margin:0 0 2.3em 0;
	
}

ul.highlights li span.bullet {
	background: #9b9b9b;
	display:inline-block;
	float:left;
	width:2em;
	height:2em;
	text-align:center;
	line-height:2em;
	font-size:1.3em;
	font-weight:bold;
	color:#fff;
	margin:-0.2307692307692308em 1.538461538461538em 1.153846153846154em 0;
  
  -moz-border-radius:1em;
  -webkit-border-radius:1em;
  border-radius:1em;
}

ul.highlights li span.text {
	line-height:1.285714285714286em;
	font-size:1.4em;
}

ul.features {
	margin:1em 0 0 3em;
	display:block;
}

ul.features li {
	display:block;
	clear:both;
	margin:1em 0 1em 0;
  padding: .5em .5em .5em 1.5em;
	font-size: 1.4em;
  border: 1px solid transparent;
}
ul.features li:hover {
  border: 1px solid red;
}

ul.features li:hover .desc {
  color: red;
}

ul.features li .circle {
}

ul.features li .option {
  font-weight: bold;
}

ul.features li .type {
  margin-right: .5em;
}

ul.features li .arrow {
  display:inline-block;
  position: relative;
  top: 0px;
  width:0px;
  height:0px;
  font-size:0px;
  line-height:1em;
  border:4px solid transparent;
  border-left-color: #ccc;
}

ul.features li .desc {
  margin-left: .3em;
  color: #9b9b9b;
}

.submenu {
  position: relative;
  background:url(../img/submenu_shadow.png) center right no-repeat;
  padding:5.1em 0 10em 0;
}

#tip {
  position: absolute;
  width: 6em;
  height: 16.6em;
  background:url(../img/submenu_tip.png) top left no-repeat;
  top: 0em;
  right: 1.6em;
}

.submenu ul {
  margin:2em 7.6em 0 3em;
}

.submenu ul li {
  font-family:'Open Sans Condensed', sans-serif;
  font-size:2em;
  text-align: right;
  line-height:1em;
  color:#868686;
  margin:0em 2em 2.1em 0;
  cursor:pointer;
}
.submenu ul li:hover {
  color:#cc0000;
}
.submenu ul li.active, 
.submenu ul li.active:hover {
  color:#000;
}

#democontainer {
  display: block;
  /*border: 1px solid red;*/
  margin: 0 0 0 0;
}

#democontainer > li {
  display: none;
}


#democontainer > li:first-child {
  display: block;
}

#democontainer > li .viewport {
  padding:3em 0 0 0;
}

#democontainer > li .viewport .demo {
  text-align: center;
}

#democontainer > li .viewport .demo .button { 
  margin-top: 2em;
}

#democontainer > li p {
  margin: 2em; 
}

.download {
  padding: 0 0 0 1.5em;
}

.label {
  color: #bcbcbc;
  font-size: 1.2em;
  margin: 0 0 0.4em .5em;
}

.donate {
  display:block;
  width: 9.7em;
  height: 3.1em;
  background:url(../img/donate.png) top left no-repeat;
  margin: .5em 0 0 3em;
  text-decoration: none;
}

#footer {
  height: 20em;
  background: #494949;
}

/*== DEMO1 ======================================================================*/
.kv {
      positoin: relative;
      margin-top: -6em;
      background: url(../img/keyVisual.jpg) no-repeat;
      width:47.8em;
      height:44.7em;
}

.col1 {
  margin: 8.7em 2em 0em 7.9em;
}

.col2 {
  margin: 9.2em 0em 0em 3.2em;
}

.col2 .sz0 {
  margin:2em 0 0 0;
}

.sz0 {
  width: 100px;
  height: 80px;
}

.sz1 {
  width: 200px;
  height: 160px;
}

.demo1 {
  background: url(../img/surface.png) center 17em no-repeat;
  padding:2em 0 4em 0;
}

.demo1 .widget {
  display: inline-block;
  position: relative;
}

.demo1 .widget .box {
  margin: 7px;
  text-align: center;
  border:1px solid #d9d9d9;
  -webkit-border-radius: 3px; 
  border-radius: 5px; 
  
  background: #fff;
  
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.05);
}

.demo1 .widget .x0 {
  width: 100px;
  height: 80px;
}

.demo1 .widget .x1 {
  width: 200px;
  height: 160px;
}

.d1 {
  left: 8.2em;
}

.d2 {
  top: 3em;
  left: 5.5em;
}

.small_shadow {
  background: url(../img/small_shadow.png) center bottom no-repeat;
  padding bottom: 20px;
  position: absolute;
  width: 164px;
  height: 25px;
  left: -25px;
  top: 77px;
  z-index: -1;
}

.big_shadow {
  background: url(../img/big_shadow.png) center bottom no-repeat;
  padding bottom: 20px;
  position: absolute;
  width: 328px;
  height: 50px;
  left: -55px;
  top: 137px;
  z-index: -1;
}

/*== DEMOS ======================================================================*/
#g3 {
  display:inline-block;
  width:400px;
  height: 320px;
  margin-right:2em;
}

.narrow {
  display:inline-block;
  width: 104px;
}

#g4,
#g4a, 
#g4b {
  display:inline-block;
  width:100px;
  height: 80px;
  margin-top: 2em;
}

#g5,  
#g8,
#g11,
#g14,
#g17 {
  display:inline-block;
  width:200px;
  height: 160px;
  margin-right:1em;
}

#g6,
#g9,
#g12,
#g15,
#g18 {
  display:inline-block;
  width:200px;
  height: 160px;
  margin-right:1em;
}

#g7,
#g10,
#g13,
#g16,
#g19 {
  display:inline-block;
  width:200px;
  height: 160px;
}

