/** Tina Tabone Style Sheet **/

html {
	padding:0px;
	margin: 0px;
}

body {
	text-align: center;
	padding: 0px;
	margin: 0px;
	background-color: #25221B;
	background-image: url(../images/t6_bg.gif);
	background-position: 38px 20px;
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	letter-spacing: normal;
	color: #1A1A1A;
	line-height: 1.2em;
}

img {
	margin: 0px;
	padding: 0px;
	border:none;
}

dl {
	margin: 5px;
}

li {
	margin: 0px;
	padding: 0px;
	font-size: 11px;		
}

div {
	text-align: left;
	margin: 0px;
	padding: 0px;
	border: none;
}

.clear
{
	clear: both;
}

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

a:hover
{
	text-decoration: underline;
	border: none;
	outline: none;
}

a:active
{
  	outline: none;
}

a.normal:hover {
	text-decoration: none;
}

/** Table Top **/ 
#tabletop {
	position: static;
	margin: 0px;
	padding: 0px;
	background: none;
	height: 620px;
}

/** Header **/
#header {
	position: absolute;
	height: 86px;
	width: 850px;
	top: 15px;
	left: 70px;
	z-index: 1001;
}

#logo {
	position:absolute;
	display: block;
	top: 0px;
	left: 0px;
}

#nav {
	position:absolute;
	top: 40px;
	left: 0px;
	width: 100%;
}

#nav table {	
	border-collapse: collapse;
	width: 850px;
}

#nav td {
	background-color: #25221B;
	width: 10%;
	height: 50px;
	border: 2px solid #413C33;
	text-align: center;
	vertical-align: middle;
	opacity: 1;
}

#nav a {
	color: #c1ae94;
	font-size: 13px;
	opacity: 0.9;
}

#nav a:hover {
	opacity: 1;
	text-decoration: none;
}

/** Footer **/
#footer {
	position: absolute;
	color: #c1ae94;
	width: 850px;
	height: 20px;
	text-align: center;
	left: 70px;
	top: 680px;
	
}

#footer a {
	color: #c1ae94;
}

/** Book **/
#book {
	position: absolute;
	z-index: 1000;
	overflow: hidden;
	text-align: center;
}

/** Book Side **/
#bookside {
	position: absolute;
	left: 0px;
	width: 217px;
	height: 700px;
	background-color: transparent;	
}

.bgteapot {
	top: 56px;
	left: 0px;
	width: 217px;
	height: 700px;
	background-position: -1px 0px;
	background-repeat: no-repeat;
	background-image: url(../images/t6_teapot.jpg);
}

/** Pages **/

.bgpages {
	top: 140px;
	left: 140px;
	background-color: #FFF;
	width: 724px;
	height: 520px;
	background-image: url(../images/t6_pages.jpg);
	background-repeat: repeat-y;
	background-position: center top;
}


/** About **/
.bgabout {
	top: 140px;
	left: 140px;
	background-image: url(../images/t6_about.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	width: 724px;
	height: 520px;
}

/** Cover **/

.bgcover {
	top: 140px;
	left: 293px;
	background-image: url(../images/t6_cover_bg.jpg);
	width: 377px;
	height: 520px;
}

#cover {
	text-align: center;
	width: 100%;
	height: 100%;
}

#cover a {
	text-align: center;
}

#cover img.logo {
	margin-top: 75px;
}

#random_image{
	width: 100%;
	margin-top: 15px;
	margin-bottom: 25px;
	margin-left: 5px;
	text-align: center;
}

#random_image p {
	text-align: center;
	font-size: 1.2em;
}

#enterwebsite {
	text-align: center;
	font-size: 1.3em;
	color: #747474;
}

/** Category Index **/

#container.pgcenter {
	background-image: url(../images/t6_pages.jpg);
	background-repeat: repeat-y;
	background-position: 0 top;
}


#toc_right_con.autoscroll{
	overflow-y: auto;
	height: 100%;
	padding-top: 50px;
	padding-bottom: 0px;
	width: 47%;
}

div.toc_cat_product{
	width: 96px;
	height: 96px;
	margin: 6px 10px 6px 2px; 
	float: left;
	overflow: hidden;
	text-align: center;
}

div.toc_cat_product img{
	overflow: hidden;
	margin:0px;
	border: 3px Solid #CCC;
	height: 85px; 
	width: 85px; 
}
div.toc_category {
	text-align: center;
	font-size: 26px;
	margin-top: 100;
	margin-left: 50px;
	width: 75%;
	height: 30px;
	padding: 0px;
	padding-top: 5px;
}

div.toc_category_sub {
	text-align: center;
	margin-top: 0px;
	width: 100%;
}
div.toc_category_hint {
	position: absolute;
	left: 0px;
	bottom: 20px;
	text-align: center;
	margin-top: 20px;
	width: 100%;
	color: #888;
	font-style: italic;
}
div.toc_category_desc {
	position: absolute;
	display: block;
	top: 130px;
	text-align: left;
	margin-left: 50px;
	width: 75%;
}


/** Page **/

#toc_left_con
{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 50%;
	height: 100%;
	background-color: transparent;
	border-right: 1px Solid #CCC;
}

#toc_right_con
{
	position: absolute;
	width: 50%;
	height:100%;
	background-color: transparent;
	top: 0px;
	right: 0px;
}

#toc_right_con h2.toc {
	margin-top: 40px;
	margin-left: 40px;
	font-style: italic;
}

.pcon {
	position: relative;
	text-align: center;
	width: 724px;
	height: 520px;
	opacity: 1;
	overflow: hidden;
}

.active {
	opacity: 1;
}

.pdesc {
	word-wrap: normal;
	overflow: hidden;
}

.imgpointer {
	cursor: pointer;
}  

.new {
	color: red;
	size: 9px;
}

/** Next/Previous Page Hint **/
#nextpage_hint {
	position: absolute;
	left: 868px;
	top : 615px;
	z-index: 2900;
	display:none;
}
#prepage_hint {
	position: absolute;
	left: 48px;
	top : 615px;
	z-index: 2901;
	display:none;
}

/** Table Of Content **/
#toc_right_con H1
{
	margin-top: 35px;
	margin-left: 43px;
	font-size: 15px;
	font-weight: normal;
}

#toc_right_con H2 {
	margin-top: 35px;
	margin-left: 40px;
	margin-bottom: 5px;
	font-size: 11px;
	font-weight: normal;
	color: #777;
	font-style: italic;
}

#toc_right_con LI.cat
{
	width:290px;
	margin-top: 14px;
	font: bold 10px;
	margin-left: 15px;
	list-style: none;
}

#toc_right_con UL
{
	margin: 1px;
	margin-left: 30px;
	padding: 0px;
}

#toc_right_con LI.pro
{
	list-style-image: url(../images/bullet.gif);
	margin: 0px;
	margin-top: 3px;
	margin-left: 36px;
	margin-bottom: 1px;
	padding: 0px;
	font-weight: normal;
}

.liline {
	width: 269px;
	position: relative;
}

.liline a:hover {
	border-bottom: 1px dotted #C8C5C5; 
	text-decoration: none;
}

.liline a:hover img {
	opacity: 0.5;
}

.p_pageno
{
	top: 0px;
	right: 0px;
	position: absolute;
	font-weight: normal;
}

div.pages a {
	border: none;
	width: 17px;
	margin:1px;
	text-align: center;
    color: #333;
	padding: 0px;
	display: block;
	float: left;
}
div.pages a.current {
	border: 1px Solid #999;
	background-color:#EEE;
    color: #333;
}
div.pages {
	display: block;
	position: absolute;
	bottom: 6px;
	right: 25px;    
}


/** Show Case on TOC **/

#showcase P
{
	width: 180px;
	margin: 0 auto;
	margin-top: 15px;
	color: #777;
	font-style: italic;
	text-align: center;
}

#showcase {
	bottom: 25px;
	left: 80px;
	width: 173px;
	height: 200px;
	text-align: center;
	position: absolute;
}

/** Book Page **/

#container {
	width: 754px;
	height: 520px;
	overflow: hidden;
	background-color: #FFF;
}

#container DIV.pageno
{
	position: absolute;
	bottom: 6px;
	right: 25px;
	text-align: right;
	color: #333;
}

#container div.image {
	overflow: hidden;
}

/** Loading **/

#loading {
	height: 12px;
	width: 100px;
	font-size: 11px;
	position: absolute;
	right: 10px;
	top: 10px;
	color: #C1AE94;
	margin: 0px;
} 

#loading img {
	vertical-align: middle;
}

/** Page Nav **/
.nextpage {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 55px;
	height: 55px;
}
.nextpage a {
	width: 55px;
	height: 55px;
	display: block;
	text-decoration: none;
	background-image: url(../images/ico_page_next0.png);
	background-position: right bottom;
	background-repeat: no-repeat;
}

.nextpage a:hover {
	background-image: url(../images/ico_page_next.png);
	background-position: right bottom;
	background-repeat: no-repeat;
}

.prepage {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 55px;
	height: 55px;
}
.prepage a {
	width: 55px;
	height: 55px;
	display: block;
	text-decoration: none;
	background-image: url(../images/ico_page_pre0.png);
	background-position: left bottom;
	background-repeat: no-repeat;
}

.prepage a:hover {
	background-image: url(../images/ico_page_pre.png);
	background-position: left bottom;
	background-repeat: no-repeat;
}

/** Article **/

#article h1 {
	margin-top: 45px;
	margin-left: 0px;
	margin-bottom: 25px;
	text-align: left;
	font-size: 22px;
	font-weight: normal;
}

#articlelist { 
	position: absolute;
	left: 35px;
	top: 0px;
	height: 99%;
	width: 296px;
}
#articlelist ol {
	margin-top: 15px;
	margin-left: 0px;
	padding-left: 18px;
}
#articlelist li {
	margin-left: 0px;
	margin-top: 10px;
	cursor: pointer;
	font-size: 12px;	
}

#articlelist li img{
	opacity: 0.3;
}

#articlelist li:hover img{
	opacity: 1;
}

#articlelist li.select {
	text-decoration: underline;
}

#articlelist li.select img{
	opacity: 1;
}


#articletoolbar {
	position: absolute;
	right: 2px;
	top: 5px;
	width:20px;
	height: 70px;	
	vertical-align: bottom;		
	background-color: #FFF;
	z-index: 1000;
}

#articletoolbar img{
	margin-top: 5px;
}

.carticle {
	background-color: #E6E6E6;
}

#articlecontent {
	position: absolute;
	margin-left: 10px;;
	width: 280px;
	height: auto;
	overflow-y: none;
	top: 0px;
}

#articlecontent li {
	margin-top: 10px;
}
#articlecontent ol {
	margin-left: 10px;
	padding-left: 10px;
}

#articlecontainer {
	position: absolute;
	right: 30px;
	top: 25px;
	height: 100%;
	width: 300px;
	overflow-y: hidden;
	border: none;
}


/** About **/ 
#about h1 {
	margin-top: 35px;
	margin-left: 0px;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: normal;
}

#about { 
	position: absolute;
	left: 35px;
	top: 0px;
	height: 99%;
	width: 296px;
}

.cabout {
	background-image: url(../images/t6_about.jpg);
	background-repeat: repeat-y;
	background-position: center top; 
}

/** Contact **/
#contact h1 {
	margin-top: 35px;
	margin-left: 0px;
	margin-bottom: 10px;
	font-size: 12px;
	font-weight: normal;
}

#contact { 
	position: absolute;
	right: 10px;
	top: 0px;
	height: 99%;
	width: 165px;

}

.small {
	font-size: 9px;
}


/*Modal*/
.modal-overlay
{
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	background: #000000;
	opacity: .75;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
	z-index: 20000;
}

* html .modal-overlay
{
	position: absolute;
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

.modal-window
{
	position: absolute;
	top: 20px;
	left: 20px;
	height: 600px;
	margin: 0;
	padding: 0;
	z-index: 20001;
	text-align: center;
}
* html .modal-window
{
	position: absolute;
}
.modal-window img{
	position: relative;
	margin: auto;
	border: 2px solid #FFF;
}

img.closeimage {
	display: inline;
	border: none;
	margin: 0px;
	margin-left: -5px;
}