/* CSS Document */
body{padding:0px; margin: 0 0 10px 0; background: url(../images/bgleak.png) repeat-y top left #590000; background-attachment : fixed; color:#FFFFFF; font:12px/14px Arial, Helvetica, sans-serif;}
div, p, ul, h2, h3, h4, h5, form, img{padding:0px; margin:0px;}
ul{list-style-type:none;}

/*----TOP PANEL----*/
#topPan{width:878px; height:113px; position:relative; margin: auto; background:url(../images/toppan-bg.jpg) 0 0 repeat-x;-webkit-box-shadow: 3px 3px 5px #FF0000; box-shadow: 3px 3px 5px #FF0000;-webkit-border-bottom-right-radius : 25px; -moz-border-radius-bottomright:25px; -webkit-border-bottom-left-radius : 25px; -moz-border-radius-bottomleft:25px; border : 1px solid #990000;}
#topPan img.logo{width:219px; height:58px; position:absolute; top:13px; left:104px;}
#topPan ul{width:576px; height:30px; position:absolute; top:83px; left:96px;}
#topPan ul li{width:81px; height:30px; float:left;}
#topPan ul li a{width:81px; height:30px; display:block; background:url(../images/menu-bg.gif) 0 0 repeat-x #2F0000; color:#fff; font:12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;}
#topPan ul li a:hover{background:#590000; color:#fff; text-decoration:none;}

#topPan ul li.home{width:81px; height:30px; display:block; background:#590000; color:#fff; font:12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;}

#topcontactPan{width:153px; height:40px; background:url(../images/icon1.jpg) 0 0 no-repeat #CC0000; color:#fff; position:absolute; top:18px; left:384px;}
#topcontactPan p.tollfree{width:78px; height:17px; background:#590000; color:#fff; font-size:11px; font-weight:bold; text-transform:uppercase; margin:4px 0 0 37px; text-align:center; line-height:17px;} 
#topcontactPan p.phoneno{font-size:18px; padding:5px 0 0 37px;}

/*#topimagePan{width:209px; height:83px; position:absolute; top:0px; right:0px; background:url(../images/image1.jpg) 0 0 no-repeat;}*/
/*----/TOP PANEL----*/

/*----BODY PANEL----*/
#bodyPan{width:815px; position:relative; margin:0 auto;}
/*----Left Panel----*/
#leftPan{width:580px; float:left; padding:18px 26px 20px 0;letter-spacing : 1.2px; line-height : 1.5em;}
#leftPan p{padding:14px 0 0;}

#leftPan h2{width:220px; height:26px; background:#590000; color:#fff; font:26px/26px Georgia, "Times New Roman", Times, serif; }
#leftPan h2 span{background:#590000; color:#F10000;}
#leftPan fieldset{border : 1px solid #FF9999; padding : 10px;}
#leftPan fieldset legend{color : #FF9999; font-size : 16px; font-weight : bold; padding : 10px;}
/*-------Left Block One-------*/
#onePan{width : 240px; float : left; padding : 20px 45px 0 0;}
#onePan h3{color : #FFFFFF}
#onePan h3 span{color : #F10000}
#twoPan{width : 242px; float:left; padding:20px 0 0;}
#twoPan h3{color : #FFFFFF}
#twoPan h3 span{color : #F10000}

#leftblockonePan{width:240px; float:left; padding:10px 45px 0 0;}

#leftblockonePan p span{font-weight:bold;}
#leftblockonePan p.border{height:8px; background:url(../images/doted-line.gif) 0 0 repeat-x; padding:0px; margin:10px 0 0;} 

#leftblockonePan h3{width:180px; height:40px; background:#590000; color:#fff; font:26px/40px Georgia, "Times New Roman", Times, serif;}
#leftblockonePan h3 span{background:#590000; color:#F10000;}

#leftblockonePan h4{width:200px; height:26px; background:#590000; color:#fff; font-size:14px; font-weight:bold; text-transform:uppercase;}
#leftblockonePan h4 span{background:#590000; color:#CD7A7A; font:28px/26px Georgia, "Times New Roman", Times, serif;}

#leftblockoneLinkPan{width:157px; height:19px; display:block; margin:5px 0 0 82px; clear:both;}
#leftblockoneLinkPan ul{width:157px; height:19px;}
#leftblockoneLinkPan ul li{height:19px; float:left; font-size:11px; text-transform:uppercase;}
#leftblockoneLinkPan ul li.comments{width:60px; height:19px; padding:0 30px 0 0; display:block; background:url(../images/icon2.jpg) 100% 0 no-repeat #590000; color:#fff; }

#leftblockoneLinkPan ul li.more{width:58px; height:19px; margin:0 0 0 8px;}
#leftblockoneLinkPan ul li.more a{width:58px; height:19px; background:url(../images/arrow1.gif) 100% 2px no-repeat #590000; color:#fff; text-decoration:none; padding:0 20px 0 0;}
#leftblockoneLinkPan ul li.more a:hover{width:58px; height:19px; background:url(../images/arrow2.gif) 100% 2px no-repeat #590000; color:#fff; text-decoration:none;}

#leftblockoneLinktwoPan{width:157px; display:block; margin:5px 0 0 82px; clear:both;}
#leftblockoneLinktwoPan ul{width:157px;}
#leftblockoneLinktwoPan ul li{height:19px; float:left; font-size:11px; text-transform:uppercase;}
#leftblockoneLinktwoPan ul li.comments{width:60px; height:19px; padding:0 30px 0 0; display:block; background:url(../images/icon2.jpg) 100% 0 no-repeat #590000; color:#fff; }

#leftblockoneLinktwoPan ul li.more{width:58px; height:19px; margin:0 0 0 8px;}
#leftblockoneLinktwoPan ul li.more a{width:58px; height:19px; background:url(../images/arrow1.gif) 100% 2px no-repeat #590000; color:#fff; text-decoration:none; padding:0 20px 0 0;}
#leftblockoneLinktwoPan ul li.more a:hover{width:58px; height:19px; background:url(../images/arrow2.gif) 100% 2px no-repeat #590000; color:#fff; text-decoration:none;}

/*----Left Block Two Panel----*/
#leftblocktwoPan{width:192px; float:left; padding:10px 0 0;}

#leftblocktwoPan h3{width:180px; height:50px; background:#590000; color:#fff; font:26px/50px Georgia, "Times New Roman", Times, serif;}
#leftblocktwoPan h3 span{background:#590000; color:#F10000;}

#leftblocktwoPan ul{width:192px;}
#leftblocktwoPan ul li{float:left;}
#leftblocktwoPan ul li.bookname{width:150px; height:18px; display:block; background:url(../images/arrow.gif) 0 6px no-repeat #590000; color:#CD7A7A; font-size:12px; line-height:18px; padding:0 0 0 10px;}
#leftblocktwoPan ul li.price{width:25px; height:18px; display:block; background:#590000; color:#fff; font-weight:bold; line-height:18px;}

#leftblocktwoPan p{width:190px; height:42px; float:left; display:block; background:url(../images/icon3.gif) 100% 0 no-repeat #590000; color:#fff; font-size:16px; text-transform:uppercase; margin:10px 0 0;}
#leftblocktwoPan p span{font-size:11px; font-weight:bold; text-transform:uppercase;}
/*----/Left Block Two Panel----*/
/*----/Left Panel----*/

/*---- Right Panel----*/
#rightPan{width:209px; float:left; padding:20px 0 0;}
#rightPan #div{width:209px; background:url(../images/form1-bg.gif) 0 0 repeat #590000; color:#fff;-webkit-box-shadow: 3px 3px 5px #FF0000; box-shadow: 3px 3px 5px #FF0000; margin : 0 0 10px 0;}
#rightPan #div2{width:209px; background:url(../images/form1-bg.gif) 0 0 repeat #590000; color:#fff; margin-top:5px; margin-bottom:5px;-webkit-box-shadow: 3px 3px 5px #FF0000; box-shadow: 3px 3px 5px #FF0000;}
#rightPan #div2 ul{width:188px; padding:0 0 10px 21px; color:#fff; margin:0 0 13px 0;}
#rightPan #div2 ul li{width:150px; height:16px;font-size:9pt; font-family : tahoma}
#rightPan #div2 ul li img{width : 16px; height : 10px; margin-right : 5px; float : left;}
#rightPan #div2 ul li a{width:150px; height:16px; background:url(../images/arrow3.gif) 0 5px no-repeat; color:#fff; font-size:12px; text-decoration:none; line-height:18px; padding:0 0 0 10px;}
#rightPan #div2 ul li a:hover{width:141px; height:18px; background:url(../images/arrow4.gif) 0 5px no-repeat; color:#FFD6D6; text-decoration:none;} 
#rightPan #div2 h2{width:189px; height:36px; background:url(../images/member-bg.gif) 0 0 no-repeat; padding:0 0 0 20px; font:20px/36px Georgia, "Times New Roman", Times, serif; margin:0 0 8px 0; color : #FFFFFF;}
/* right pan div2 class */
#rightPan .div2{width:209px; background:url(../images/form1-bg.gif) 0 0 repeat #590000; color:#fff; margin-top:5px; margin-bottom:5px;-webkit-box-shadow: 3px 3px 5px #FF0000; box-shadow: 3px 3px 5px #FF0000;}
#rightPan .div2 ul{width:188px; padding:0 0 10px 21px; color:#fff; margin:0 0 13px 0;}
#rightPan .div2 ul li{width:150px; height:16px;font-size:9pt; font-family : tahoma}
#rightPan .div2 ul li img{width : 16px; height : 10px; margin-right : 5px; float : left;}
#rightPan .div2 ul li a{width:150px; height:16px; background:url(../images/arrow3.gif) 0 5px no-repeat; color:#fff; font-size:12px; text-decoration:none; line-height:18px; padding:0 0 0 10px;}
#rightPan .div2 ul li a:hover{width:141px; height:18px; background:url(../images/arrow4.gif) 0 5px no-repeat; color:#FFD6D6; text-decoration:none;} 
#rightPan .div2 h2{width:189px; height:36px; background:url(../images/member-bg.gif) 0 0 no-repeat; padding:0 0 0 20px; font:20px/36px Georgia, "Times New Roman", Times, serif; margin:0 0 8px 0; color : #FFFFFF;}
/* end class */
#rightPan #div h2{width:189px; height:36px; background:url(../images/member-bg.gif) 0 0 no-repeat; padding:0 0 0 20px; font:20px/36px Georgia, "Times New Roman", Times, serif; margin:0 0 8px 0; color : #FFFFFF;}
/*#rightPan #div ul{width:189px; padding : 0 0 0 20px; font : 20px/36px Georgia, "Times New Roman", Times, serif; margin : 0 0 8px 0; color : #FFFFFF; background:url(../images/form1-bg.gif) 00 repeat #590000;}
*/
#rightPan #div label{width:66px; height:18px; float:left; display:block; font-size:13px; line-height:18px; padding:0 0 0 21px; margin:9px 0 0;}
#rightPan #div label.label1{width:138px; height:16px; float:left; display:block; background:#2F0000; color:#FC0404; font-size:10px; text-transform:uppercase; margin:9px 0 0 2px; padding:0 0 0 19px;}

#rightPan #div input{width:100px; height:18px; float:left; display:block; padding:0px; margin:9px 0 0;}
#rightPan #div input.botton{width:30px; height:14px; float:left; display:block; background:url(../images/botton.gif) 100% 3px no-repeat #2F0000; color:#fff; font-size:12px; border:none; padding:0 10px 0 0; margin:9px 0 0; line-height:14px; }

#rightPan h3{width:188px; height:33px; background:#3C0101; color:#fff; font:20px Georgia, "Times New Roman", Times, serif; padding:18px 0 0 21px; margin:13px 0 0;}

#rightPan ul{width:188px; padding:0 0 0 21px; color:#fff; margin:0 0 13px 0;}
#rightPan ul li{width:188px; height:16px;font-size:9pt; font-family : tahoma}
#rightPan ul li a{width:188px; height:16px; background:url(../images/arrow3.gif) 0 5px no-repeat; color:#fff; font-size:12px; text-decoration:none; line-height:18px; padding:0 0 0 15px;}
#rightPan ul li a:hover{width:188px; height:18px; background:url(../images/arrow4.gif) 0 5px no-repeat; color:#FFD6D6; text-decoration:none;} 

#rightform2Pan{width:209px; position:relative; margin:0 auto;}
#rightPan form.form2{width:209px; height:111px; background:url(../images/form1-bg.gif) 0 0 no-repeat #2F0000; color:#fff; font-size:12px; }
#rightPan form.form2 h2{width:189px; height:36px; background:url(../images/member-bg.gif) 0 0 no-repeat; padding:0 0 0 20px; font:20px/36px Georgia, "Times New Roman", Times, serif; margin:0 0 8px 0;}
#rightPan form.form2 label{width:43px; height:18px; float:left; display:block; font-size:12px; padding:0 0 0 12px; line-height:18px;}
#rightPan form.form2 input{width:100px; height:18px; float:left; display:block; padding:0px;}
#rightPan form.form2 select{width:41px; height:20px; float:left; display:block; background:#fff; color:#000; font-size:14px; margin:0 0 0 4px;} 

#rightPan form.form2 input.search{width:60px; height:20px; float:right; display:block; background:url(../images/botton2.gif) 100% 6px no-repeat #2F0000; border:none; color:#fff; font-size:12px; line-height:20px; padding:0 25px 0 0; position:absolute; top:78px; right:8px;} 
/*----/BODY PANEL----*/

/*----BOTTOM BODY PANEL----*/
#bodyBottomPan{width:878px; height:40px; background:url(../images/body-bottombg.gif) 0 0 repeat-x #590000; color:#CD7A7A; position:relative; margin:0 auto; clear:both; padding:52px 0 0;}
#BottomLeftPan{width:178px; float:left;}
#BottomLeftPan p{background:#590000; color:#fff; font:30px/25px Georgia, "Times New Roman", Times, serif; padding:0 0 0 32px;}
#BottomLeftPan p span{font-size:21px; text-transform:uppercase;}

#BottomMiddlePan{width:393px; float:left; background:url(../images/image2.gif) 100% 0 no-repeat; padding:0 206px 0 0;}

#BottomMiddlePan p.more{width:70px; height:16px; margin:5px 0 30px 318px;}
#BottomMiddlePan p.more a{width:60px; height:16px; display:block; background:url(../images/botton2.gif) 85% 50% no-repeat #3C0101; color:#fff; text-transform:uppercase; font-size:11px; line-height:18px; text-decoration:none; padding:0 0 0 10px;}
#BottomMiddlePan p.more a:hover{background:url(../images/botton2.gif) 85% 50% no-repeat #3C0101; color:#F10000; text-decoration:none;}
/*----/BOTTOM BODY PANEL----*/
/*----FOOTER PANEL----*/
#footerPan{width:878px; background:#2F0000; color:#fff; position:relative; margin:20px auto; font:12px/16px "Trebuchet MS", Arial, Helvetica, sans-serif; clear:both; padding:10px 0 10px 0;-webkit-box-shadow: 3px 3px 5px #FF0000; box-shadow: 3px 3px 5px #FF0000; border : 1px solid #990000;-webkit-border-bottom-right-radius : 25px; -moz-border-radius-bottomright:25px; -webkit-border-bottom-left-radius : 25px; -moz-border-radius-bottomleft:25px;}
.footerPanKol{margin : 0 10px; width : 180px; float : left; border : 1px solid #FF6666; background-color : #FF9999; height : 80px; padding : 5px;}
.footerPanKol h4{color : #000000;font-weight : bold;}
.footerPanKol a{text-decoration : underline; color : #AA0000;}
.footerPanKol a:hover{text-decoration : none; color : #FFCCCC;}

#footerPan ul{width:400px; position:relative; margin:0 auto;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#fff; background:#2F0000; text-decoration:none;}
#footerPan ul li a:hover{text-decoration:underline;}

#footerPan p.copyright{width:204px; background:#2F0000; color:#fff; position:absolute; top:48px; left:198px; font-size:12px;}

#footerPan ul.templateworld{width:250px; background:#2F0000; color:#fff; display:block; position:absolute; top:68px; left:198px; font-size:10px;}
#footerPan ul.templateworld li{height:20px;}
#footerPan ul.templateworld li a{background:#2F0000; display:block; color:#fff; text-decoration:none;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}

#footerPanhtml{width:62px; height:12px; display:block; position:absolute; top:50px; left:400px;}
#footerPanhtml a{width:48px; height:12px; display:block; background:url(../images/xhtml-normal.gif) 85% 60% no-repeat #B70000; color:#fff; line-height:12px; font-size:11px; font-weight:bold; text-decoration:none; padding:0 0 0 10px;}
#footerPanhtml a:hover{background:url(../images/css-normal.gif) 85% 60% no-repeat #913C3C; color:#fff;}

#footerPancss{width:50px; height:12px; display:block; position:absolute; top:50px; left:460px;}
#footerPancss a{width:40px; height:12px; display:block; background:url(../images/css-normal.gif) 35px 3px no-repeat #913C3C; color:#fff; line-height:12px; font-size:11px; font-weight:bold; text-decoration:none; padding:0 0 0 10px; text-transform:uppercase;}
#footerPancss a:hover{background:url(../images/xhtml-normal.gif) 35px 3px no-repeat #B70000; color:#fff;}
#lang{float : right; margin : 3px}

#ptitle {font-weight : bold; font-size : 12pt; color : #AA0000; border-bottom : 1px dotted #AA0000}
#pdivt {background-color : #FFCCCC; padding : 5px; margin : 8px; float : left; width : 200px; height : 200px; border : 1px solid #AA0000; color : #000000}
.pdivt {background-color : #FFCCCC; padding : 5px; margin : 8px; float : left; width : 200px; height : 200px; border : 1px solid #AA0000; color : #000000; -webkit-box-shadow: 3px 3px 5px #FFFFFF; box-shadow: 3px 3px 5px #FFFFFF; padding : 3px 0 3px 10px; color : #AA0000;}
#newtut{margin : 20px 0;}
#newtut h2{font-size : 16px; color : #FFCCCC; font-weight : bold;}
#newtut ul li a{color : #FFFFFF;}
#newtut ul li a:hover{color : #FF0000; text-decoration : none;}

#tutorialpage{color : #EEEEEE;}
#tutorialpage a{text-decoration : underline; color : #FF0000}
#tutorialpage a:hover{color : #000000}
#tutorialpage h1{font-size : 16pt; font-family :arial}
#tutorialpage ul{padding : 20px; margin : 5px;}
#tutorialpage ul li{list-style-type:disc;}
#tutorialpage ol{padding : 20px; margin : 5px;}
#tutorialpage ol li{list-style-type:disc;}
#tutorialpage h2{font-size : 13pt; font-family : arial; margin-top : 10px; font-weight : bold; width : 100%}
#tutorialpage ul li a{color : #FFFFFF;}
#tutorialpage ul li a:hover{color : #FF0000;}

#titlet h1{font-size : 16pt; color : #FFFFFF; font-family : arial}
#tipage {border-bottom : 1px dotted #EEEEEE; margin-bottom : 10px; padding-bottom : 10px}
#tipage h2{width:100%;font-family : arial; font-weight : bold; font-size : 14pt}
#tipage h2 a{color : #FFFFFF; text-decoration : underline;}
#tipage h2 a:hover{text-decoration : none; color : #FF0000}
#tipage h3{font-size : 12pt; color : #FFFFFF; font-family : arial; font-weight : bold; width:100%}
#ptables {background-color: #FFEEEE; margin-top : 10px; margin-bottom : 10px; color : #000000; width : 100%}
#ptables2 {background-color: #FFEEEE; margin-top : 10px; margin-bottom : 10px; color : #000000; width : 100%; border-collapse : collapse; border : 1px solid #000000;}
#ptables2 th, td{border : 1px solid #000000; text-align : left;padding : 2px 5px;font-size: 12px;}
#ptables2 th{text-align : center; background-color : #000000; color : #FFFFFF; font-weight : bold;}
#ptables2 td{color : #000000; background-color : #FFFFFF; vertical-align : top;}
#ptables2 td.ie{background: url(../images/browser/ie.gif) no-repeat center #FFFFFF; height : 24px;}
#ptables2 td.noie{background: url(../images/browser/noie.gif) no-repeat center #FFFFFF; height : 24px;}
#ptables2 td.mf{background: url(../images/browser/firefox.gif) no-repeat center #FFFFFF; height : 24px;}
#ptables2 td.nomf{background: url(../images/browser/nofirefox.gif) no-repeat center #FFFFFF; height : 24px;}
#ptables2 td.ch{background: url(../images/browser/chrome.gif) no-repeat center #FFFFFF; height : 24px;}
#ptables2 td.noch{background: url(../images/browser/nochrome.gif) no-repeat center #FFFFFF; height : 24px;}
#ptables2 td.sa{background: url(../images/browser/safari.gif) no-repeat center #FFFFFF; height : 24px;}
#ptables2 td.nosa{background: url(../images/browser/nosafari.gif) no-repeat center #FFFFFF; height : 24px;}
#ptables2 td.op{background: url(../images/browser/opera.gif) no-repeat center #FFFFFF; height : 24px;}
#ptables2 td.noop{background: url(../images/browser/noopera.gif) no-repeat center #FFFFFF; height : 24px;}

.ptables2 {margin-top : 10px; margin-bottom : 10px; color : #000000; width : 100%; border-collapse : collapse;border : 1px solid #000000; background-color : #FFEEEE;}
.ptables2 tr th, td{border : 1px solid #000000; text-align : left;padding : 2px 5px; font-size : 12px;}
.ptables2 tr.notsupported{background-color : #EEEEEE; color : #C0C0C0}
.notsupported{color : #C0C0C0;font-style : italic;}
a.notsupported {color : #C0C0C0;}
.deprecated{color : #FF0000;}
.ptables2 th{text-align : center; background-color : #000000; color : #FFFFFF; font-weight : bold;}
.ptables2 td{color : #000000; vertical-align : top;}
.ptables2 td.ie{background: url(../images/browser/ie.gif) no-repeat center #FFFFFF; height : 24px;}
.ptables2 td.noie{background: url(../images/browser/noie.gif) no-repeat center #FFFFFF; height : 24px;}
.ptables2 td.mf{background: url(../images/browser/firefox.gif) no-repeat center #FFFFFF; height : 24px;}
.ptables2 td.nomf{background: url(../images/browser/nofirefox.gif) no-repeat center #FFFFFF; height : 24px;}
.ptables2 td.ch{background: url(../images/browser/chrome.gif) no-repeat center #FFFFFF; height : 24px;}
.ptables2 td.noch{background: url(../images/browser/nochrome.gif) no-repeat center #FFFFFF; height : 24px;}
.ptables2 td.sa{background: url(../images/browser/safari.gif) no-repeat center #FFFFFF; height : 24px;}
.ptables2 td.nosa{background: url(../images/browser/nosafari.gif) no-repeat center #FFFFFF; height : 24px;}
.ptables2 td.op{background: url(../images/browser/opera.gif) no-repeat center #FFFFFF; height : 24px;}
.ptables2 td.noop{background: url(../images/browser/noopera.gif) no-repeat center #FFFFFF; height : 24px;}

.marked{color : #FF0000}
#headtitle td{background-color : #000000; color : #FFFFFF; font-weight : bold}
#bodytitle td{color : #000000}
#codepath {margin : 10px}
#codeborder{color : #000000; background-color : #FFEEEE; border : 1px solid #AA0000; padding : 5px; margin:10px 0; overflow-x : scroll;}
.codeborder{color : #000000; background-color : #FFEEEE; border : 1px solid #AA0000; padding : 5px; margin:10px 0; overflow-x : scroll;}

#tcrumb{font-size : 10pt;}
#tcrumb a{color : #FFFFFF; text-decoration: underline}
#tcrumb a:hover{color : #FF0000;}
#tcrumb ul{list-style : none;padding : 0}
#tcrumb ul li{display : inline;}

#tutorialpage #articlespage {font-size : 9pt; font-family : arial}
#tutorialpage #articlespage h2{font-weight : bold; font-size : 12pt;}
#tutorialpage #articlespage h2 a{text-decoration : underline; color : #FFFFFF}
#tutorialpage #articlespage h2 a:hover{text-decoration : none; color : #FF0000}
#aboutart{margin-top : 30px; margin-bottom : 20px; border-top : 1px dotted #FFFFFF; border-bottom : 1px dotted #FFFFFF; padding : 5px}
#menupaging{margin-top : 10px}

#reg{float : right;font-size : 11px;}
#reg a{color : #FFFFFF; text-decoration : underline;}
#reg a:hover{color : #303030; text-decoration : none;}

#login{text-align : center; margin : 50px auto;}
#login #title{font-size : 18px; font-weight : bold; margin-bottom : 10px;}
#login input{background-color : #FFCCFF; border : 1px solid #FF0000; margin : 2px; padding : 3px 8px; font-style : italic}
#login input:hover{background-color : #FF0000; color : #FFFFFF;}
#login input:focus{background-color : #FF0000; color : #FFFFFF;}
#login .button{
background-color : #AA3300; padding : 3px 8px; color : #FFFFFF; 
transition:width 0.5s, height 0.5s;
-webkit-transition:width 0.5s, height 0.5s, -webkit-transform 0.5s; /*Safari and Chrome*/
-o-transition:width 0.5s, height 0.5s, -o-transform 0.5s; /*Opera*/
}
#login .button:hover{
width:80px;
height:40px;
font-weight : bold;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /*Safari and Chrome*/
-o-transform:rotate(360deg); /*Opera*/
}

.disptutorcont{text-align : center; margin : 0 auto; width : 370px;}
.disptutor{float : left; height : 100px; width : 100px; border : 1px solid #FF0000; padding : 5px; margin : 0 3px;}
.disptutor img{width : 90px; height : 70px;}

#clear{clear : both;}

div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  background-color : #EEEEEE;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #000000;
  }
div.img a:hover img
  {
  border:1px solid #ff0000;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  color : #000000;
  }
  
#rounded_borders{margin : 20px auto; padding : 10px; text-align : center; border:2px solid #FF0000; background-color : #FFFFFF; border-radius:25px; -moz-border-radius : 25px; -webkit-border-radius : 25px; color : #000000;}
#boxshadows{margin : 20px auto; box-shadow: 10px 10px 5px #888888; -moz-box-shadow : 10px 10px 5px #8888888; -webkit-box-shadow: 10px 10px 5px #888888; width : 90%; background-color : #FFFFFF; color : #000000; text-align : center; padding : 20px;}
#imageborder{-moz-border-image:url(,,.images/tutor/border.jpg) 30 30 round; -webkit-border-image:url(../images/tutor/border.jpg) 30 30 round; border-image:url(../images/tutor/border.jpg) 30 30 round; background-color : #FFFFFF; color : #000000; padding : 10px; text-align : center;margin : 20px auto;}

#textshadow{text-shadow: 5px 5px 5px #FF0000; margin : 10px auto; text-align : center; font-size : 20px; background-color : #FFFFFF; color : #000000; padding : 20px;}
#normal{height : auto; width : 100px; margin : 10px; padding : 5px; border : 1px solid #FF0000; background-color : #FFFFFF; color : #000000;}
#wordwrap{height : auto; width : 100px; word-wrap : break-word; margin : 10px; padding : 5px;border : 1px solid #FF0000; background-color : #FFFFFF; color : #000000;}


@font-face
{
font-family: newFont;
src: url('http://www.leakbali.com/fonts/MISTRAL.TTF');
}

#fontface{font-family : newFont; padding : 10px; margin : 0 auto; text-align : center; font-size : 30px; line-height : 1.3em}
#original2D{width : 100px; height : 80px; background-color : #FFFFFF; color : #000000; border : 1px solid #FF0000; margin : 10px; padding : 10px; text-align : center;}
#tr2D{width : 100px; height : 80px; border : 1px solid #FF0000; background-color : #FF3300; color : #000000; transform: translate(25px,25px);-webkit-transform: translate(25px,25px); -o-transform: translate(25px,25px); -moz-transform: translate(25px,25px);padding : 10px; }
#rotasi{transform: rotate(30deg); -webkit-transform: rotate(30deg); -o-transform: rotate(30deg); -moz-transform: rotate(30deg);background-color : #00FF00; color : #000000;padding : 10px; margin : 40px 10px; font-size : 16px; width : 100px; text-align : center;}
#skew{transform: skew(30deg,20deg);-webkit-transform: skew(30deg,20deg);-o-transform: skew(30deg,20deg);-moz-transform: skew(30deg,20deg); background-color : #0000FF; color : #FFFFFF; fot-size : 16px; text-align : center; margin : 40px 10px; padding : 10px; width : 150px;}
#matrix2D{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);width : 100px; height : 80px; background-color : #FFFFFF; color : #000000; border : 1px solid #FF0000; margin : -20px 10px 40px 10px; padding : 10px; text-align : center;}

#rotasiX{transform: rotateX(120deg);-webkit-transform: rotateX(120deg); margin : 20px 10px; padding : 10px; text-align : center; background-color : #FFFFFF; border : 1px solid #FF0000; color : #000000; width : 150px;}
#rotasiY{transform: rotateY(130deg);-webkit-transform: rotateY(130deg); margin : 20px 10px; padding : 10px; text-align : center; background-color : #FFFFFF; border : 1px solid #FF0000; color : #000000; width : 150px;}
#rotasiZ{transform: rotateZ(130deg);-webkit-transform: rotateZ(130deg); margin : 60px 10px; padding : 10px; text-align : center; background-color : #FFFFFF; border : 1px solid #FF0000; color : #000000; width : 100px;}
#rotasi3d{transform : rotate3d(1,2,1,45deg); -webkit-transform: rotate3d(1,2,1,45deg); margin : 50px 10px; padding : 10px; text-align : center; background-color : #FFFF00; border : 1px solid #FF0000; color : #000000; width : 100px;}
#perspektif{-webkit-scaleX(2); scaleX(2); margin : 50px 10px; padding : 10px; text-align : center; background-color : #FFFF00; border : 1px solid #FF0000; color : #000000; width : 100px;}

#animateddiv
{
width:60px;height:40px;position : absolute; background:#EEEEEE;color:#000000;font-weight:bold;font-size:15px;padding:10px;margin:5px;
-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;-webkit-border-radius:5px;-o-transition-property:width,height,-o-transform,background,font-size,opacity;-o-transition-duration:1s,1s,1s,1s,1s,1s;transition-property:width,height,transform,background,font-size,opacity;transition-duration:1s,1s,1s,1s,1s,1s;border-radius:5px;opacity:0.4;
}

#animateddiv:hover
{
-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);opacity:1;background:#FF0000; color : #FFFFFF;width:90px;height:60px;
font-size:30px;
}

#animasi{width:60px;height:40px;background:#FFFFFF;color:#000000;position:relative;font-weight:bold;font-size:20px;padding:10px;-webkit-animation:animasi 5s 1;-webkit-border-radius:5px;margin : 10px;}

@keyframes animasi
{
0%
	{
	-webkit-transform: rotate(0deg);
	left:0px;
	}
25%
	{
	-webkit-transform: rotate(20deg);
	left:0px;
	}
50%
	{
	left:500px;
	-webkit-border-radius:5px;
	-webkit-transform: rotate(0deg);
	}
55%
	{
	left:500px;
	-webkit-transform: rotate(0deg);
	}
70%
	{
	left:500px;	
	background:#FF0000;
	-webkit-transform: rotate(0deg);
	}
100%
	{
	-webkit-transform: rotate(-360deg)
	}
}

@-webkit-keyframes animasi
{
0%
	{
	-webkit-transform: rotate(0deg);
	left:0px;
	}
25%
	{
	-webkit-transform: rotate(20deg);
	left:0px;
	}
50%
	{
	left:500px;
	-webkit-border-radius:5px;
	-webkit-transform: rotate(0deg);
	}
55%
	{
	left:500px;
	-webkit-transform: rotate(0deg);
	}
70%
	{
	left:500px;	
	background:#FF0000;
	-webkit-transform: rotate(0deg);
	}
100%
	{
	-webkit-transform: rotate(-360deg)
	}
}

#animasi2
{
width:100px;
height:100px;
background-color:#FFFFFF;
color : #FF0000
animation: animasi2div 5s;
-webkit-animation: animasi2div 5s; /* Safari and Chrome */
margin : 10px 0;
}

@keyframes animasi2div
{
from {background: #FFFFFF;}
to {background: #0000FF;}
}

@-webkit-keyframes animasi2div
{
from {background: #FFFFFF;}
to {background: #0000FF;}
}

#animasi3{
width:100px;
height:100px;
background:red;
animation: animasiku 5s;
-webkit-animation: animasiku 5s;
margin : 10px 0;
}

@keyframes animasiku
{
0%   {background: #FF0000;}
25%  {background: #FFFF00;}
50%  {background: #0000FF;}
100% {background: #00FF00;}
}

@-webkit-keyframes animasiku
{
0%   {background: #FF0000;}
25%  {background: #FFFF00;}
50%  {background: #0000FF;}
100% {background: #00FF00;}
}

#animasi4{
width:100px;
height:100px;
background:#FF0000;
position:relative;
animation: animasi4ku 5s;
-webkit-animation: animasi4ku 5s; 
margin : 10px 0;
}

@keyframes animasi4ku
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes animasi4ku 
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

#animasi5
{
width:100px;
height:100px;
background:red;
position:relative;
animation: animasi5ku 5s linear 2s infinite alternate;
/*Safari and Chrome: */
-webkit-animation: animasi5ku 5s linear 2s infinite alternate;
margin : 10px 0;
}

@keyframes animasi5ku
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

@-webkit-keyframes animasi5ku /*Safari and Chrome */
{
0%   {background: red; left:0px; top:0px;}
25%  {background: yellow; left:200px; top:0px;}
50%  {background: blue; left:200px; top:200px;}
75%  {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}

.newspaper{-moz-column-count:3; -webkit-column-count:3; column-count:3; margin : 10px 0;}
.newspaper2{-moz-column-count:3; -webkit-column-count:3; column-count:3; -moz-column-gap:40px; -webkit-column-gap:40px; column-gap:40px;
-moz-column-rule:4px outset #ff00ff; -webkit-column-rule:4px outset #ff00ff; column-rule:4px outset #ff00ff; margin : 10px 0;}

#resizing{resize:both;overflow:auto;margin : 10px 0;border : 1px solid #FF0000; color : #000000; background-color : #FFFFFF; padding : 10px 40px; width : 300px;}

#boxsizing{margin : 10px 0 50px 0;}
#boxsizing .container{width:35em;border:1em #00FF00 solid;}
#boxsizing .box{box-sizing:border-box;-moz-box-sizing:border-box; -webkit-box-sizing:border-box; width:50%;border:1em solid red;float:left;background-color : #FFFFFF;color : #000000;}
#outlineoffset{margin:25px;width:150px; padding:10px;height:70px;border:2px solid black;outline:2px solid red;outline-offset:15px;background-color : #FFFFFF;color : #000000;}

@font-face
{
font-family: judulFont;
src: url('http://www.leakbali.com/fonts/JOKERMAN.TTF');
}

#judul{font-family : judulFont; padding : 5px 10px; margin : 0 auto; text-align : center; font-size : 40px; line-height : 1.3em}
#judul{position : absolute;}
#judul a{color : #FFFFFF; text-decoration : none;text-shadow: 5px 5px 5px #000000;}
#judul{-webkit-transition:-webkit-transform 1s,opacity 1s,background 1s,width 1s,height 1s,font-size 1s;-webkit-border-radius:5px;-o-transition-property:width,height,-o-transform,background,font-size,opacity;-o-transition-duration:1s,1s,1s,1s,1s,1s;transition-property:width,height,transform,background,font-size,opacity;transition-duration:1s,1s,1s,1s,1s,1s;border-radius:5px;width : 200px; height : 50px;}
#judul:hover{
-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);opacity:1;width:120px;height:80px;font-size:60px;opacity:0.4;width : 160px; height : 50px;color : #FF0000;
}

@font-face
{
font-family: subjudulFont;
src: url('http://www.leakbali.com/fonts/BRUSHSCI.TTF');
}

#subjudul{font-family : subjudulFont; padding : 10px; margin : 45px 20px; text-align : center; font-size : 20px; line-height : 1.3em}
#subjudul{position : absolute;}

#contact{margin : 5px 0; font-size : 12px;}
#contact h4{font-weight : bold; font-size : 14px;}
#contact table{border : 0;}
#contact table td{border : 0;}
#contact table td.cleft{width : 150px;vertical-align : top; text-align : right; padding-right : 10px; font-size : 12px;}
#contact table td.cright{vertical-align : top; font-size : 12px;}
#contact input,textarea,select{background-color : #FFCCCC;padding : 2px 4px;}
#contact input:hover,textarea:hover,select:hover{background-color:#AA0000; color : #FFFFFF}
#contact input:focus,textarea:focus,select:focus{background-color:#AA0000; color : #FFFFFF}
#contact .button{background-color : #AA0000; color : #FFFFFF; font-weight : bold;}

.home li{list-style-type : none; background:url(../images/botton.gif) no-repeat left center; padding-left : 14px;}
.home li a{color : #FFFFFF;text-decoration : none;}
.home li a:hover{color : #FFCCCC;text-decoration : underline}

#pr{margin : 10px;}
#pr a{color : #FF0000;}
#pr a:hover{color : #FFCC99}
#browsercheck{margin : 10px auto; padding : 10px; background-color : #FFCCCC; color : #000000; font-size : 11px; font-family : tahoma; width : 160px; border : 1px solid #FF0000;}

#csharing{margin-top : 20px;}
#csharing fieldset{border : 1px solid #FFCCEE; padding: 10px; }
#csharing fieldset table{width : 99%;}
#csharing fieldset table, td{border : 0;}
#csharing fieldset table tr td.kiri{width : 150px; text-align : right ; padding-right : 20px; vertical-align : top; padding-top : 5px; font-size : 12px;}
#csharing fieldset table tr td.kanan{vertical-align : top; font-size : 12px;}
#csharing input,textarea{background-color : #FFEEEE; color : #000000; padding : 3px 5px; border : 1px solid #AA0000;}
#csharing input:hover, textarea:hover{background-color : #AA0000; color : #FFFFFF; border : 1px solid #FFFFFF;}
#csharing input:focus, textarea:focus{background-color : #AA0000; color : #FFFFFF; border : 1px solid #FFFFFF;}
#csharing input#button{background-color : #AA0000; font-weight : bold; color : #FFFFFF;border : 1px solid #FFFFFF;}
#csharing img{float : left; margin-right : 10px;}

#viewshare{margin : 10px 0;}
#viewshare a div#viewsh{padding : 2px 10px 2px 10px; font-size : 9px; color : #000000; background-color : #EEEEEE; border : 1px solid #606060; width : 80px; display : inline;}
#viewshare a:hover div#viewsh{padding : 2px 10px 2px 10px; font-size : 9px; color : #FFFFFF; background-color : #AA0000; border : 1px solid #FFFFFF; width : 80px;display : inline;}
#view a{color : #FFFFFF; text-decoration : underline;}
#view a:hover{color : #FF0000;}

.code{background : url(../images/code.png) top repeat-x #E0E0E0; background-size : 40px 13px; border : 1px solid #AA0000; padding : 15px 5px 10px 5px; color : #000000; overflow-x : auto; box-shadow : 1px 1px 2px #FFCCFF;-webkit-box-shadow : 1px 1px 2px #FFCCFF; -moz-box-shadow : 1px 1px 2px #FFCCFF;
}

#alexaresult{border : 1px solid #909090; background : url(../images/alexa.jpg) right no-repeat #FFFFFF; padding-left : 30px; color : #000000; width : 80px; padding : 2px 3px;}

#search{position : absolute; right : 10px; top : 55px;}
.new{color : #FFFFFF; background-color : #AA0000; padding : 2px 4px;}

#footerbottom{margin : 20px 0 0 0; font-size : 10px; text-align : center; color : #FFCCCC; font-family : tahoma; letter-spacing : 0.1em}
#footerbottom a{color : #FFCCCC; text-decoration : underline;}
#footerbottom a:hover{color : #FF0000;text-decoration : none;}
#footerbottom #copy{color : #CCCCCC;}

#leftbg{background : url(../images/leftbg.png) red no-repeat center; height : 20px; width : 30px; position : fixed; right : 0; top : 100px; padding-top : 350px; text-align : center; padding-left : 5px;}

#toplogin{width : 878px; margin : 5px auto;}
#formtoplogin{float : right;}
#formtoplogin a{color : #EEEEEE; text-decoration : underline;}
#formtoplogin a:hover{color : #FF0000; text-decoration : none;}
#toplogin input{font-style : italic}

#register{margin : 20px;}
#register h2{font-size : 20px; width : 100%; font-family : verdana; border-bottom : 1px solid #FFFFFF; margin-bottom : 10px; font-weight : bold;}
.notice{font-style : italic; font-size : 11px; color : #EEEEEE;}
.notice2{font-style : italic; font-size : 11px; color : #FF0000;}
.requ{color : #FF0000;}