@charset "UTF-8";
/* CSS Document */

/* general */
*{
 margin:0;
 padding:0;
 vertical-align: baseline; 
}

body {
 min-width: 800px;
 background-color: #85BBDF;
 font-family: Helvetica, Arial, sans-serif ! important;
}

#fullscreen {
 background-color: #fff;
 width: 100% ! important; 
 padding: 0px ! important;
 overflow: auto;
}

html{
 height: 100%;
}

ol, ul { 
  list-style: none; 
}

.spacer {
	clear: both;
	display: block;
}
.nonblockspacer {
	display: inline;
	clear: none;
}
a:link {
	text-decoration: none;
	color: #0071bc;
}
a:visited {
	text-decoration: none;
  color: #0071bc;
}
.error {
    background-color: #efffc9;
    padding: 0px 20px 0px 20px;
    color: red;
}

.message {
    margin: 10px;
    background-color: #eee;
    padding: 10px;
    color: #888;
    font-style: italic;
}
.left {
  text-align: left;
}
.center {
	text-align: center;
}
.right {
  text-align: right;
}
.box {
  padding: 20px;
}
.src {
  -moz-border-radius: 5px;                                                      
  -webkit-border-radius: 5px;
}
.rc {
  -moz-border-radius: 10px;                                                      
  -webkit-border-radius: 10px;
}
.brc {
  -moz-border-radius: 20px;                                                      
  -webkit-border-radius: 20px;
}

.lb {
  color: #a1c8ef; 
}
.blue {
  color: #3fa9f5;
}
.grey {
  color: #777;
}
.gold {
  color: #f7931e ! important;
}
.red {
  color: red;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}  
.yellow {
  color: yellow ! important;
}
.url {
  text-decoration: underline;
  color: blue;
}
.normal {
  font-weight: normal;
}
.small {
  font-size: 0.9em;
}
.smaller {
  font-size: 0.8em;
}
.smallest {
  font-size: 0.7em;
}
.big, h2{
  font-size: 1.3em;
}
.bigger {
  font-size: 1.6em;
}

h1 {
  font-size: 2em;
  color: #f7931e ! important;
  line-height: 1.3em;
  text-shadow: rgba(0,0,0,.2) 0px 2px 5px; 
  font-weight: normal;
}

.biggest {
  font-size: 2em;
}

.opaque {
  opacity:0.4;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
}

.bigButton, .bigButton2 {
  text-align: center;
  margin: 0 auto ! important;
  background-color: #fff ! important;
  height: 76px;
  font-size: 40px;
  line-height: 64px;
  font-family: Arial ! important;
  font-weight: bold;
}  
.bigButton {
  width: 146px;
  background: url(/images/sprite.gif?1) -12px -757px;  
}
.bigButton2 {
  width: 176px;
  background: url(/images/sprite.gif?1) -12px -832px;  
}

.bigButton a, .bigButton2 a{
  color: #fff ! important;
}


.sbutton {
  border: 1px solid #f6c266;
  background-color: #f7931e;
  font-size: 16px;
  color: #fff ! important;
  height: 28px;
  font-weight: bold;
  padding: 2px 15px 2px 15px;
  -moz-border-radius: 5px;                                                      
  -webkit-border-radius: 5px;
} * html .sbutton {
  height: 20px;
}
.sbutton_disabled {
  border: 1px solid #fce7c2;
  background-color: #fee0b1;
  font-size: 16px;
  color: #fff ! important;
  height: 28px;
  padding: 2px 15px 2px 15px;
  -moz-border-radius: 5px;                                                      
  -webkit-border-radius: 5px;
}
.shadowbutton {
  font-size: 20px ! important;
  background: url(/images/sprite.gif) -16px -458px;
  width: 120px;
  height: 36px;
  border: none;
  margin: 0px;
  padding: 0px;
  color: #fff ! important;
  font-weight: bold;
}

.artIcon {
  margin: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  -moz-border-radius: 15px;                                                      
  -webkit-border-radius: 15px;
}
.premiumIcon {
  margin: 5px;
  padding: 5px;
  -moz-border-radius: 10px;                                                      
  -webkit-border-radius: 10px;
  border: 1px solid #ccc;
  background-color: #ffffff;  
  float: left;
}
.premiumIcon img {
  border: none;
}

.none {
  display: none;
}
.hidden {
  visibility: hidden;
}
/* end general */

#divider{
  background-color: #fff;
  height: 25px;  
  border-top: 2px solid #ccc;
}
#pagetop {
  width: 1004px; 
  margin: 0 auto;  
  height: 85px;
  margin-top: -20px;
}
#pagetop #logo {
  width: 250px;
  height: 75px;
  float: left;
  cursor: hand;
  background: url(/images/logo-CLOUD.png) no-repeat;
}
#pagetop #login {
	float: right; 
	color: #fff;
	font-size: 1.2em;
	font-weight: bold;
	padding: 40px 40px 0 0;
}
#pagetop #login A {
	color: #fff;
}

#dots {
  clear: both;
  width: 1004px; 
  margin: 0px auto;
  margin-top: -45px;
}
#dots img {
  margin-left: 30px;
  
}
#topnav {
  background-color: #fff;
  padding-bottom: 10px;
}
#topnav #navbar {
  width: 1004px; 
  margin: 0 auto;
}
#topnav #nav {
  margin-top: -3px;
	padding: 0px 0 0 32px;
} * html #topnav #nav { margin-top: -8px}

#topnav li {
  display: inline;
  list-style-type: none;
  margin: 0px 13px 0 12px;
}
#topnav li A {
  padding-top: 40px;
  color: #aaa !important;
  font-weight: bold;  
}
#topnav li A:hover {
  color: #f69226 ! important; 
}
#topnav .selected {
	color: #000 ! important;
}
#pagebody {
  background-color: #fff;
  border-bottom: 2px solid #ccc;    
}

#pagemain {
  margin: 0px auto;
  background-image: none;
  background-color: #fff;
  width: 1002px;  
}
html>/**/body #pagemain {
  border-top: 1px solid #fff;
}

#pagefooter {
	text-align: center;	
	padding: 10px;
  font-size: 1em;
}
#pagefooter li {
	display: inline;
	margin: 0px 15px 0 15px;
}
#pagefooter li A {
	color: #fff ! important;
}
#pagefooter_copyright {
    margin-top: 5px;
    white-space: nowrap;
    color: #fff;
    font-size: 0.8em;
    text-align: center;
}


/* browe page */
#filter {
	width: 580px; 
	float: right;
	font-size: 0.8em;
}
#filter .item{
	float: left;
  width: 80px;
  text-align: center;
  line-height: 1.7em;
}
.bkpro .disabled label{
  color: #ccc;
}
.bkpro .icon {
	height: 25px;
  background-image: url(/images/sprite.gif);
}
.bkpro .disabled .iconp {
  background-position: 6px -54px;
}
.bkpro .enabled .iconp {
  background-position: 6px -90px;
}
.bkpro .disabled .iconf {
  background-position: 6px -126px;
}
.bkpro .enabled .iconf {
  background-position: 6px -162px;
}
.bkpro .disabled .icone {
  background-position: 6px -200px;
}
.bkpro .enabled .icone {
  background-position: 6px -236px;
}
.bkpro .disabled .icons {
  background-position: 6px -272px;
}
.bkpro .enabled .icons {
  background-position: 6px -308px;
}
.bkpro .disabled .iconc {
  background-position: 6px -344px;
}
.bkpro .enabled .iconc {
  background-position: 6px -380px;
}

#searchbox {
  margin: 10px 590px 10px 30px;
  padding: 30px;
}
#searchbox #searchkeys {
  font-size: 1.2em;
  width: 180px;
  padding: 2px;
  border: 1px solid #3fa9f5;  
}


#lib {
  margin: 30px 20px;
}
#lib h3 {
  margin-bottom: 10px;
  padding-left: 10px;
  font-size: 1.3em;
  border-bottom: 1px solid #ccc;
}
#lib .box {
  float: left;
  margin: 10px 0px 20px 0px;
}
#lib .delete {
  border: none;
}
#lib .pic {
  float: left;
  width: 170px; 
  height: 131px;
  border: 1px solid #eee; 
}
#lib .title {
  padding-top: 10px;
  width: 170px;
  text-align: center;
  clear: left;
  color: #777;
  font-weight: bold;
}

#signup {
  width: 680px;
  margin: 10px auto;
  line-height: 1.8em;
}
#setting {
  width: 800px;
  margin: 10px auto;
  line-height: 1em;
}

#personalize {
  width: 800px;
  margin: 0px auto;
  margin-top: 30px;
  line-height: 1em;
}

.sjform {
  margin-top: 20px;
  font-size: 1.1em;
}
.sjform div {
    margin: 20px;
}
.sjform .error{
  font-size: 0.8em;
  margin: 10px 50px 5px 50px;
  text-align: center;
 }
.sjform label {
    float: left;
    width: 240px;
    text-align: right;
  line-height: 1.5em;
}
.sjform li label {
    float: none;
    display: inline;
    width: 100%;
    text-align: left;
}

.sjform .msg {
  text-align: center;
  font-size: 0.8em;
  margin-left: 150px;
  font-style: italic;
}
.sjform .tbox, .sjform select, .sjform embed, .sjform textarea{
    margin-left: 20px;
    width: 300px;
    font-size: 1em;
    border: 1px solid #3fa9f5;
}
.sjform textarea{
    height: 160px;
    padding: 5px;
}
.sjform .radio {
  margin: 0 10px 0 20px;
}
.sjform ul {
  margin-left: 240px;
  font-size: 14px;
}
.sjform li {
  list-style-type: none;
  margin-bottom: 5px;
}
.dotlist {
  list-style-type: none;
}
.dotlist li {
  background-image: url(/images/sprite.gif);
  background-repeat: no-repeat;
  padding-left: 35px;
}
.dotlist li A {
  font-weight: bold;
}
.dotlist .bluedot {
  background-position: -215px -5px;
}
.dotlist .orangedot {
  background-position: -215px -54px;
}
.dotlist .yellowdot {
  background-position: -215px -103px;
}
.dotlist .greendot {
  background-position: -215px -152px;
}
.dotlist .pinkdot {
  background-position: -215px -201px;
}
#templates {
  margin: 30px;
  padding: 30px 0 10px 0px
}
#templates .opt {
  padding: 30px 40px 30px 40px;
}
#templates .opt img{
  padding: 2px;
  border: 2px solid #ccc;
  float: left;
  margin-right: 30px;
}
#templates h3 {
  padding-top: 20px;
}
#templates p {
  margin: 0 50px 0 360px;
  padding: 20px;
  line-height: 1.4em;
  font-size: 0.9em;
}
#faqs {
  width: 600px;
  line-height: 1.5em;
  margin: 30px auto;  
}
#faqs h4{
  margin: 40px 0 5px 0;
  color: #3eb44a;
}
#faqs h4 a{
  color: #3eb44a;
}


#policy {
  margin: 10px;
  color: #444;
  width: 570px;
 }
 
#policy h3{
  margin-bottom: 20px;
} 

.soc_container {
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  width: 400px;
  color: #fff;
  border: 1px solid #EFEFEF;
  position:absolute;
  background-color: #333;
  visibility:hidden;
  font-size: 1.1em;
  line-height:18px;
}
.soc_container li {
  display: inline;
  margin-left: 30px;
}
.soc_container a{
  color: #aadd00;
  text-decoration:none;
}

#swfContainer {
   display: block;
   width: 100%;
}
#editorHeader img{ 
  border: none;
  margin: -20px 0 -10px 20px;
}

#editorDiv {
  display: none;
  padding: 0;
  margin: 0;
}
.tip {
  width: 280px; 
  background-color: #333;
  -moz-border-radius: 5px;                                                      
  -webkit-border-radius: 5px;
  color: #fff;
  padding: 15px;
  opacity:0.8;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  font-size: 14px;
  line-height: 18px;
}
.tip-wrap {display: none}
.tip-text   { display: none}


.twindow {
  margin: 0 auto; 
  background: #fff url(/images/w_b_r.gif) no-repeat bottom right;
  padding: 0px;
}
.twindow img {
  border: none;
}
.twinhead {
  background: #fff url(/images/w_h_r.gif) no-repeat top right;
  margin: 0px;
  padding: 0px;
}
.twinhead h2{
  color: white;
  text-align: center;
  font-size: 1.3em;
  font-weight: normal;
  text-shadow: rgba(0,0,0,.2) 0px 2px 5px;   
}
.twinhead h2 a{
  color: white;
}

.twinhead #title {
  background: url(/images/w_h_l.gif) no-repeat top left;
  margin-top: 0px;
  padding: 15px 0px 10px 0px;
}
.twinbody {
  background: url(/images/w_b_l.gif) no-repeat bottom left;
  margin: 0;
  padding: 0px 30px 0px 30px;
}
.twinbody h3{
  font-size: 0.9em;
} 
.twinbody p{
  margin: 10px 0 10px 0;
  font-size: 0.8em;
  color: #777;
  line-height: 1.2em;
}
.twinbody li {
  margin: 2px 0 2px 15px;
  font-size: 0.8em;
  color: #777;
  list-style: disc;
}  
.my_navbar {
  text-align: left;
  margin: 20px 0 0 0;
  padding: 5px 0 5px 20px;
  background-color: #808080;
  color: white;
}
.my_navbar a {
   color: yellow;
}
.my_navbar li {
  display: inline;
}
.my_navbar .divider {
  padding: 0 10px 0 10px;
  text-align: center;
  color: #ccc; 
}

.otable td, .otable th{ 
  padding: 10px 30px 10px 30px;
  border-bottom: 1px dotted #ccc;
  text-align: center;
}

#nbk {
position: relative; margin: -15px 0 20px 0;  overflow: hidden;
}
#nbkplayer {
position: absolute; top: 0x; left: -9000px; background-color: #fff;
}
#nbkplayer object {
outline:none;
}
#nbkinfo {
position: relative; margin-top: 63px;
}
#nbkcover {
position:absolute; left:485px; top:0px;
}
#nbkcover #img1 {
border: none; 
}
#nbkcover #img2 {
border: none; margin: -35px 0 0 190px;
}
#nbkspine {
position:absolute; left:485px; top:0px;
}
#nbkspine img {
border: none; width: 15px; height: 380px;
}
#nbkbackcover {
position:absolute; left:0px; top:0px; display: none;
}
#nbkbackcover img {
border: none; 
}
#nbkbackspine {
position:absolute; left: 495px; top:0px; display:none;
}
#nbkbackspine img {
border: none; width: 15px; height: 380px;
}
#nbkmeta {
padding: 0 540px 0 0; width: 460px;
}
#nbkmeta #right{
float: right; width: 210px;
}
#nbkmeta #checkout {
background-color:#eee; padding: 20px 10px 0 0;
}
#nbkmeta select {
width:40px; vertical-align: 2px;
}
#nbkmeta .divider {
background-color:#fff; padding: 15px;
}
#nbkmeta #qm {
float: right; margin: -10px 5px;
}
#nbkmeta #intro {
background-color:#eee; padding: 20px 10px 0 10px; margin-top: 0px; line-height: 1.2em;
}
#nbkmeta #left {
margin: 0 240px 0 0; background-color: #fff;
}
#nbkmeta #meta1 {
font-size: 0.9em; line-height: 1.3em; margin-top: 10px; color: #777;
}
#nbkmeta .block {
margin: 10px 10px 0 0; border-top: 1px solid #ccc; padding-top:20px;
}

#help_left {
 float: left;
 width: 300px;
 line-height: 1.2em;
}
#help_left h3 {
  color: #333;
  font-size: 1em;
  margin: 20px 0 10px 0;
}
#help_left ol {
  margin: 10px 0 30px 0;
}
#help_left ol li {
  margin: 5px 10px 5px 40px;
  font-size: 0.9em;
  color: #888;
  list-style-type: decimal;
}
#help_left p {
  font-size: 0.8em;
  color: #777;
  padding: 5px;
}
#help_right {
  margin: 20px 0 0 330px;
  line-heigh: 1.3em;
  color: #333;
  font-size: 0.9em;
}
#help_right h4{
  margin: 40px 0 10px 0;
  color: #3eb44a;
}
#help_right h4 a{
  color: #3eb44a;
}
#help_right ol {
  margin: 10px;
}

#help_right p {
  margin: 10px 0 10px 0;
}

#help_right ul li {
  margin: 10px 0px 10px 40px;
  list-style-type: disc;
}

#help_right ol li {
  margin: 10px 0px 10px 40px;
  list-style-type: decimal;
}
.followus {
  width: 280px; 
  margin: 20px auto;
  font-size: 0.8em;
}
.followus img {
  float: right; 
  border: none;
  margin-left: 5px;
  padding: 1px;
  border: 1px solid #ddd;
}
.followus a {
  font-weight: bold;
   color: #f7931e;
}

.y_box {
  width: 271px;
}  
.y_header {
  height: 25px; 
  background: url(/images/y_header.gif) no-repeat;
}
.y_footer {
  height: 24px; 
  background: url(/images/y_footer.gif) no-repeat;
}
.y_body {
  background: url(/images/y_body.gif) repeat-y;
  padding: 0 20px 0 20px;
  color: #333;
}

.g_box {
  width: 426px;
}  
.g_header {
  height: 32px; 
  background: url(/images/g_header.gif) no-repeat;
}
.g_footer {
  height: 27px; 
  background: url(/images/g_footer.gif) no-repeat;
}
.g_body {
  background: url(/images/g_body.gif) repeat-y;
  padding: 0 80px 0 30px;
  color: #333;
}

.d_box {
  width: 606px;
  position: relative;
}
.d_box img {
  border:none; 
}
.d_header {
  height: 36px; 
  background: url(/images/d_header.gif) no-repeat;
}
.d_footer {
  height: 38px; 
  background: url(/images/d_footer.gif) no-repeat;
}
.d_body {
  background: url(/images/d_body.gif) repeat-y;
  padding: 0 30px 0 10px;
  height: 150px;
  color: #333;
}
.d_box .d1 {
  float: left;
  width: 100px;
  height: 120px;
  font-size: 2em;
  color: white;
  text-align: center;
}
.d_box .d2 {
  float: left;
  width: 250px; 
  font-size: 0.9em;  
}
.d_box .d2 p {
  padding-left: 20px;
}
.d_box .d3 {
  margin-left: 350px;
  text-align: center;
}
#arrow_box {
 width: 606px;
 height: 153px;
 background: url(/images/arrow_box.gif) left top no-repeat;
}
#arrow_box ul {
 padding: 20px 40px 30px 80px;
} * html #arrow_box ul {
  padding-top: 10px;
}
#arrow_box li {
  list-style: none;
  text-align: right;
  padding: 2px 0 2px 0;
}
#cart_table {
width:100%; border: 1px solid #ccc
}
#cart_table img{
  border: none;
}
#cart_table td, #cart_table th {
  text-align: right;
}

#checkout_form {
  float: right; width: 350px;border: 3px solid #e6a100;
}
#checkout_form .block{ 
  margin: 15px 10px 10px 10px;
}
#checkout_form .block div{ 
 padding-top: 12px
}            }
#checkout_form label{
  width: 150px;
  display: block;
}
#checkout_form .block label{
  width: 100px;  
  padding: 3px;
}
#checkout_form input{
  width: 120px;
  float: right;
}
#checkout_form select{
  float: right;
  padding: 2px;
}
#school {
  border: 1px solid #ccc; 
  padding: 10px 0 10px 0; 
  background-color: #fdfce7;
}
.demo-info
{
  position:     absolute;
  top:        0;
  right:        4px;
  padding:      1px 2px;
  font-size:      0.9em;
  color:        #888;
}
.stable {
  width: 100%;
}
.stable img {
  border: none;
  vertical-align: -5px;
}

.stable td, .stable th{ 
  padding: 20px 10px 5px 10px;
  text-align: left;
  text-align: center;
  font-weight: normal;
  font-size: 0.8em;
}
.stable th {
 background-color: #e3efff;
 padding: 10px 10px 5px 10px;
 font-weight: bold;
}