/* 
 * Sliding Tabs - jQuery Plugin
 * Copyright 2010, Christian André
 *
------------------------------------------------------------------------------------- */

/* Reset
------------------------------------------------------------------------------------- */
body, div, ul, ol, li, p, h1, h2, h3, span, pre, a, img, blockquote, table, tbody, tfoot, thead, tr, th, td, pre, code { 
	margin:0px; padding:0px; border:0 none; outline:0; vertical-align:baseline;
}
ol, ul { list-style:none; }
input { margin:0px; padding:0px; }
:focus { outline:none; }

/* Helpers
------------------------------------------------------------------------------------- */
.fl { float:left; }
.fr { float:right; }
.clear { clear:both; }
.hide { display:none; }

/* Layout
------------------------------------------------------------------------------------- */
body {
	font:13px/18px Arial, Helvetica, sans-serif;
	color:#616161;	
	padding-top:111px;
	background-color:#f5f5f5;
}

body#demo {	
	width:775px;
	margin:20px auto;
	padding-top:0px;
}

a {
	outline:none;
	text-decoration:none;
	color:#1ca5ec;
}

a:hover { 
	color:#fff; 
	background-color:#fff; 
}

h1, h2 { 
	color:#454545; 
}

div#container {
	width:775px;
	margin:0px auto;
}



div#header_center {
	width:775px;	
	margin:0px auto;
}

div#intro {
	float:left;
	width:775px;
	font:24px/33px Georgia, "Times New Roman", Times, serif;
	color:#a9a9a9;
	padding:24px 0px;
	border-bottom:1px solid #E4E4E4;
}

div#intro span {
	color:#7a7a7a;
}

div.column {	
	float:left;
	clear:both;
	width:775px;
	height:412px;
}

div#demos {
	height:433px;
	padding-top:30px;
}

h1 {
	font-size: 18px;
	font-weight: bold;
	margin-bottom:20px;
}

/* Navigation
------------------------------------------------------------------------------------- */
ul#nav {
	float:left;
	clear:both;
	width:775px;
	padding:18px 0px 15px;
	border-bottom:1px solid #E4E4E4;
}

ul#nav li {
	float:left;
}

ul#nav li.fl_r {
	float:right;
}

ul#nav li.logo {
	margin-top:9px;
	padding:15px 34px 15px 0px;
	border-right:1px solid #E4E4E4;
}

ul#nav li h1 {
	float:left;
	display:block;
	width:164px;
	height:34px;
	margin-bottom:0px;
	background:url(../img/logo.gif) no-repeat 0px 0px;
	text-indent:-9999px;
}

ul#nav li h1 a {
	width:180px;
	height:34px;
	background:none;
}

ul#nav li a.version {	
	float:left;
	height:auto;
	font-size:10px;
	line-height:11px;
	color:#fff;
	margin-left:6px;
	padding:1px 2px;
	text-indent:0px;
	background:#525252;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}

ul#nav li a.version:hover {
	background:#1ca5ec;
	border-bottom:0 none;
}

ul#nav li h1 a:hover {
	border:0 none;
}

ul#nav li a {
	display:block;
	height:9px;	
	background:url(../img/nav.jpg) no-repeat;
	text-indent:-9999px;
}

ul#nav li a:hover {	
	border-bottom:2px solid #bebebe;
}

ul#nav li a.demos, ul#nav li a.howto, ul#nav li a.opts {
	margin-top:36px;
	margin-left:34px;
	padding-bottom:9px;
	background-color:#09F;
}

ul#nav li a.demos {
	width:112px;
	background-position:0px -36px;
}

ul#nav li a.howto {
	width:71px;
	background-position:-151px -36px;
}

ul#nav li a.opts {
	width:50px;
	background-position:-260px -36px;
}

ul#nav li a.buy {
	width:80px;
	height:80px;
	margin-top:1px;
	margin-right:0px;
	background-position:-349px 0px;
}

ul#nav li a.buy:hover {
	border-bottom:0 none;
}

/* Customize tabs
------------------------------------------------------------------------------------- */
div#customize_container {
	clear:both; /* IE6 Fix */
	position:absolute;
	top:-46px;
	right:0px;
}

div#tabs_horizontal div#customize_container {
  z-index:100; 
}

div#tabs_vertical div#customize_container {
  z-index:50; 
}

ul.customize li {
	float:left;
}

ul.customize li p {
	padding-top:7px;
	padding-right:10px;
	color:#858585;	
}

ul.customize li a {
	display:block;
	text-indent:-9999px;
	height:29px;
	width:29px;
	border:1px solid #DADADA;
	background:#FFF url(../img/icons.gif) no-repeat;
}

ul.customize li a#add {	
	background-position:-1px 0px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:3px;	
}

ul.customize li a#add.btn_enabled:hover {
	background-position:-1px -29px;
}

ul.customize li a#remove {
	border-right:0 none;
	border-left:0 none;
	background-position:-31px 0px;	
}

ul.customize li a#remove.btn_enabled:hover {
	background-position:-31px -29px;
}

ul.customize li a#options {
	position:relative;
	background-position:-61px 0px;
	border-top-right-radius:3px;
	border-bottom-right-radius:3px;
	-moz-border-radius-topright:3px;
	-moz-border-radius-bottomright:3px;
	-webkit-border-top-right-radius:3px;
	-webkit-border-bottom-right-radius:3px;	
}

div#tabs_horizontal ul.customize li a#options {
	z-index:10;
}

div#tabs_vertical ul.customize li a#options {
	z-index:10;
}

ul.customize li a.vert {
	position:relative;
	z-index:-1;	
}

ul.customize li a#options.btn_enabled:hover {
	background-position:-61px -29px;
}

ul.customize li a#options.active {
	border-color:#c1c1c1;
	border-bottom-color:#fff;
	background-position:-61px -29px;
	border-bottom-right-radius:0px;
	-moz-border-radius-bottomright:0px;
	-webkit-border-bottom-right-radius:0px;	
}

ul.customize li a.btn_disabled {
	cursor:default;
	opacity:0.4;
	filter:alpha(opacity = 40);
}