@import "common.css";

body {
    color: #555;
    font-color: #555;
    padding:10px;
    border:0;
    margin:0;
    font-family: "tahoma","Gill Sans","Futura","Gotham","sans-serif","Helvetica", "Arial", "Verdana";
    font-size: 1em;
    background: url(../images/logo_fade.png) no-repeat right bottom white;
}
#header {
  font-weight: normal;
  height: 89px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0px;
  position: relative;
  width: 900px;
}
#body {
  width: 900px;
  margin: auto;
  border-bottom:1px solid #427dcc;
  padding:0px 0 19px 0;
}

table {
    border-collapse: collapse;
    border-spacing:0px;
}


h1 {
    font-size:1.2em;
    font-weight:bold;
    /*background-image: url(../images/header_ball.gif);*/
    background-position:left;
    background-repeat:no-repeat;
    padding-left:0px;
    margin:0 0 12px 0;
}
h2 {
    font-size:1.1em;
}



a:link, a:visited {
  color: #427dcc;
  font-color: #427dcc;
  text-decoration: none;
  font-weight:bold;
}
a:active, a:hover {
  color: white;
  background-color:#427dcc;
  text-decoration: none;
}

/* -----------------------------------------------
             HEADER
   ----------------------------------------------- */
#header #logo{
    float:left;
    margin-left:20px;
}

#header #logo a{
    background-color:#fff;
}

#header #links {
    padding-top:10px;
    float:right;
}

#guest_id0 {
    font-size:80%;
    font-weight:bold;
}
/* -----------------------------------------------
             FOOTER
 ----------------------------------------------- */

.footer {
  margin: 5px auto;
  text-align: center;
  padding: 0;
  font-weight: bold;
  color:#666666;
  line-height: 25px;
  font-size:80%;
  width:900px;
}

.footer a:link, .footer a:visited {
  color:#666;
  text-decoration: none;
}
.footer a:active, .footer a:hover {
  color: white;
  text-decoration: none;
}

.footernav {
    float:left;
}

.copyright {
  float:right;
  margin: 0px;
  font-weight: bold;
  color:#666;
  font-size:90%;
}

input:focus, textarea:focus {
	background-color: #DAFEDA;
}

/* -----------------------------------------------
             UTIL
   ----------------------------------------------- */
.number, .right {
    text-align:right;
}
.top {
    vertical-align:top;
}
.bottom {
    vertical-align:bottom;
}
.middle {
    vertical-align:middle;
}
.left {
    text-align:left;
}
.center {
    text-align:center;
}
.nowrap {
    white-space: nowrap;
}

div.msg {
    clear:both;
}
/* -----------------------------------------------
             FAQ
 ----------------------------------------------- */
div.question a,div.answer a {
}
a.answer{
    clear: both;
    display: block;
    padding:3px 0 4px 0;
}
div.answer {
    margin:0.6em 0 0.6em 30px;
    clear: both;  display: block;
}
/* -----------------------------------------------
             CONTACT
 ----------------------------------------------- */
span.note {
    color:#aaa;
    font-size:70%;
}
form.contactform input, form.contactform textarea{
    width:200px;
}
.contactform td {
    font-weight:bold;
    white-space:nowrap;
    vertical-align:top;
}

/* -----------------------------------------------
             TABS
 ----------------------------------------------- */
#tab_header {
	position: relative;
	height: 2em;
	width: 900px;
    margin:auto;
    /*border-bottom:5px solid #427dcc;*/
    margin-top:10px;
}

#header_bar {
    background: url("../images/header_bar.gif") no-repeat top;
    height:8px;
}
#header_bar.ginza_help {
    background-position:0 -40px;
}
#header_bar.ginza_walk {
    background-position:0 -16px;
}
#header_bar.ginza_cart {
    background-position:0 -24px;
}
#header_bar.pricing {
    background-position:0 -32px;
}

#tab_header ul {
	/*position: absolute;*/
	/*bottom: -5px;*/
	width: 100%; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
	width: 900px; /* a width is required for Opera, older Mozilla browsers, and Konqueror browsers */
	margin: 0 0 0 20px;
	padding: 0;
}


#tab_header ul li  {
	display: inline;
	list-style: none;
}

#tab_header ul a {
	width: 8em;
	display: block;
	float: left;
	padding: 5px 0;
	margin: 1px 3px 0 0;
	text-align: center;
	font-family: tahoma, verdana, sans-serif;
	font-size: 85%;
	font-weight:bold;

	text-decoration: none;
    background: url("../images/tab_bg.gif") repeat-x bottom;
    background-position:0 -9px;
	border: 1px solid #427dcc;
    border-bottom: none;
    color:#fff;
}

#tab_header ul a.ginza_help {
    background-position:0 -180px;
}
#tab_header ul a.ginza_walk {
    background-position:0 -72px;
}
#tab_header ul a.ginza_cart {
    background-position:0 -108px;
}
#tab_header ul a.pricing {
    background-position:0 -144px;
}

#tab_header ul a.current,#tab_header ul a:hover {
    font-weight:bold;
}

.code {
    font-family:monospace;
    font-size:10pt;
    padding: 7px 45px 7px 7px;
    margin-right: 35px;
    background: lavender;
}

.code-default {
    font-style:italic;
}

table.features td, table.features th {
    padding-top:30px;
}
a.small {
    font-size:100%;
    font-weight:normal;
}
table.top td {
    vertical-align:top;
}
table.pricing  {
    /*border: 1px solid #ccc;*/
    font-size:120%;
}
table.pricing td,table.pricing th {
    border-bottom: 1px solid #eaeaea;
    text-align:center;
    font-weight:normal;

}
table.pricing th img {
    float:left;
}

table.pricing th {
    text-align:left;
    padding-left:10px;
}

form.merchant_signup label {
    width:200px;
    float:left;
    /*text-align:right;*/
}
form.merchant_signup {
    font-size:80%;
}
form.merchant_signup table td {
    text-align:center;
}
div.fieldWithErrors {
    display:inline;
    float:left;
    border:2px solid red;
}
form.merchant_signup div.float {
    text-align:left;
}
#error {
  border: 2px solid red;
  padding: 1em;
  margin-bottom: 0em;
  background-color: #f0f0f0;
  font: bold smaller sans-serif;
}
#notice {
 border: 2px solid green;
}
.help_color {
    color:#ff8c47;
}
.walk_color {
    color:#a2649f;
}
.cart_color {
    color:#0fac0f;
}
/* -------------------------------------------
              INDEX PAGE
 -------------------------------------------*/
table.index {
    margin-top:45px;
}
table.index td.info{
    color:#666;
    text-align:left;
    padding-left:33px;
    vertical-align:top;
}
/* -------------------------------------------
              SIGNUP PAGE
 -------------------------------------------*/
form.merchant_signup label {
    width:200px;
    float:left;
    /*text-align:right;*/
}
form.merchant_signup {
    font-size:80%;
}
form.merchant_signup table td {
    text-align:center;
}
div.fieldWithErrors {
    display:inline;
    float:left;
    border:2px solid red;
}
form.merchant_signup div.float {
    text-align:left;
}
/* -------------------------------------------
              JQUERY TOOLS
 -------------------------------------------*/
#scroll {
	position:relative;
	height:560px;
	overflow:hidden;
	border:1px solid #ddd;
	width:900px;
	padding:15px 0 15px 0;
	-moz-border-radius:5px;
	border-radius:5px;
	-webkit-border-radius:5px;
}

#scroll.ginza_walk {
    border:2px solid #a2649f;
}
#scroll.ginza_help {
    border:2px solid #0069f8;
}
#scroll.ginza_cart {
    border:2px solid #0fac0f;
}
#tools {
	width:9999em;
	position:absolute;
	height:500px;
    top:0px;
}

.tool {
	float:left;
	width:900px;
	height:500px;
	background-repeat:no-repeat;
	background-position:0 -40px;
    padding-top:2px;
}

.details {
	background-color:#fff;
	color:#666;
	float:left;
	font-size:1.1em;
	margin:0px 0 0 0;
	padding:10px 60px;
	width:480px;
}
.product_img {
	float:left;
	padding:10px 0px 0 60px;
}


.product_details, .demos {
	background-color:#fff;
	background-color:rgba(255, 255, 255, 0.8);
	float:right;
	min-height:365px;
	padding:15px 25px 0 0;
	width:272px;
    text-align:left;
}
.product_details {
    /*padding-top:14px;*/
	width:480px;
}

.product_details h1, .demos h2 {
	color:#065598;
	font-size:22px;
	display:block;
	padding:0px 0;
}

.demos a {
	color:#666;
	font-size:12px;
	text-decoration:none;
}
.demos a.index {
    clear:both;
    margin-bottom:50px
}

.features  {
    float:left;
    position:relative;
    width:400px;
}
.key_features h2, .features h1 {
	color:#065598;
	font-size:22px;
	display:block;
	padding:0;
    margin:13px 0 0 0;
}
.key_features p, .features p, .demos p {
	margin:0 0 4px;
	background:transparent url(http://static.flowplayer.org/tools/img/bullet.png) no-repeat scroll 0 2px;
	padding:1px 0 1px 22px;
}
.key_features p {
    font-size:0.9em;
}

#thumbs {
	/*background:url(http://static.flowplayer.org/tools/img/demo-navi.jpg) no-repeat;*/
	background:transparent url(../images/navi.jpg) repeat-x;
	height:90px;
	position:absolute;
	top:520px;
	width:910px;
	left:-8px;
}

.t a {
	background:transparent url(../images/navi.jpg) no-repeat scroll -21px -0px;
	margin-left:11px;
	display:block;
	width:99px;
	float:left;
	height:90px;
	cursor:pointer;
}
.t img {
	margin-top:11px;
	cursor:pointer;
}

.t a.active {
	cursor:default !important;
    background-position:-21px -90px !important;
    background-position:-21px -90px;
}
.navi {
    float:left;
    padding-right:15px;
	/*margin-left:314px;*/
	/*_margin-left:304px;*/
}

.product_details h2 {
    font-size:1em;
    font-weight:bold;
    margin:0;
    padding:0;
    color:#065598;
    margin-bottom:5px;
}

.features_img {
    float:left;
    padding-right:25px;
}