.kai {
    font-family: dfkai-sb, stkaiti, 標楷體, 华文楷体;
}
.serif {
    font-family: pmingliu, simsun, 新細明體, serif;
}
.sans-serif {
    font-family: simhei, sans-serif;
}
@-webkit-keyframes shiny {
    from { }
    to   { text-shadow: 2px -1px 1px orange; }
}

@-webkit-keyframes pulse {
    0% { 
		opacity: 1.0;
		-webkit-transform: scale(1.0) rotate(0deg);
	}
    33% { 
		opacity: 0.75;
		-webkit-transform: scale(1.1) rotate(-5deg);
	}
    67% { 
		opacity: 0.5;
		-webkit-transform: scale(1.1) rotate(5deg);
	}
    100% { 
		opacity: 1.0;
		-webkit-transform: scale(1.0) rotate(0deg);
	}    
}

a:hover {
     -webkit-animation-name: shiny;
     -webkit-animation-duration: 0.7s;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: alternate;
     -webkit-animation-timing-function: ease-in-out;
	 text-decoration: underline;
	 color: orange;

}
body {
	background: #181818;
	border-top: 5px solid #000;
	color: brown;
	font: pmingliu, 新細明體 ,sans-serif;
	font-size: 14px;
	padding: 20px 0 40px;
}

a {
	color: #666600;
	text-decoration: none;
}


h1 {
	font-family: Georgia, serif;
	font-weight: normal;
	text-align: middle;
}

h2 {
	padding: 20px 0 0;
	text-align: center;
}

p {
	border: 0px solid #666;
	overflow: hidden;
	
}

table{
	margin-top: 10px;
	width: 100%;
}
table th {
	background: orange;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 4px;
	padding-right: 4px;
	vertical-align: center;
	text-align: center;
}

table td {
	
	border-bottom: 1px dotted #3399FF;
	padding: 4px;

	vertical-align: center;
	text-align: left;
}
.text_top {
	vertical-align: top;
}
.altrow  {
	background: #FFFFAA;
}

.M0 {

	color: #CCFF00;
	background: #CC9900;
}
.M0p {
	
	color: #CCFF00;
	background: #AA8800;
}
.M {
	
	color: #CCFF00;
	background: #997700;
}
.Mp {
	
	color: #CCFF00;
	background: #996600;
}
.M1 {
	
	color: #CCFF00;
	background: #993300;
}
.M2 {
	
	color: #CCFF00;
	background: #990000;
}


#navbar_top {
	margin: 0;
	background: #181818;
	width: 960px;
	 
}
#navbar {
	margin: 0;
	width: 960px;
	 
}
#navbar  a {
	color: #fff;
	
	
	text-decoration: none;
	
}
#navbar  a:hover {
	color: #A19801;
}
#navbar table{
	background: #181818;
	
	color: #fff;
	margin-bottom:0;
	margin-top:0;
	width: 100%;
	
	background-image: url(../img/menu_bg.jpg);
	background-repeat:no-repeat;

}

#navbar img{
	
	background: #181818;
	
}
#navbar table td{
	
	text-align: center;
	vertical-align: bottom;
	border: 0;
}


.related table td{
	
	vertical-align: middle;
}

.dripbox table td{
	
	text-align: center;
	padding: 0;
	border: 0;
}


.classroom  table td{
	border: 1px solid #666;
}


.view table{
	width:100%;
}


.logo_wall {
	background: white;
	vertical-align: center;
	
}

#footer {
	text-align:center;
}

.Product_Type table{
	width:100%;
	align: center;
}

#s3slider1 {
	margin: 0;
   width: 960px; /* important to be same as image width */
   height: 400px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3slider1Content {
   width: 960px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
  list-style-type: none;
}

.s3slider1Image {
   float: left; /* important */
   position: relative; /* important */
   margin-left: 0; /* important */
   display: none; /* important */
}

.s3slider1Image span {
   position: absolute; /* important */
   left: 0;
   font: 16px;
   padding: 10px 13px;
   width: 937px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   //top: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}
.addthis_toolbox .hover_effect
{
    
    padding: 10px 0 6px 10px;
    border: 3px solid #eee;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.addthis_toolbox .hover_effect div
{
    float: left;
}

.addthis_toolbox .hover_effect a
{
    border: 2px solid #fff;
    padding: 2px 2px 2px 16px;
    position: relative;
    text-decoration: none;
}

.addthis_toolbox .hover_effect a:hover
{
    border: 2px solid #105CB6;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #B4D3F8;
    color: #105CB6;
    text-decoration: none;
}

.addthis_toolbox .hover_effect span
{
    position: absolute;
    width: 16px;
    height: 16px;
    top: 2px;
    left: 1px;
}
.menubutton{
	font-weight: bold;
	text-align: center;
	margin-bottom: 3px;
	margin-top: 3px;
}

.menubutton a {
	padding: 4px;
	text-decoration: none;
	display: block;

}


.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}

.container_12 {
	background: #fff url(../img/12_col.gif) repeat-y;
	
}

.container_16 {
	//background: #fff url(../img/16_col.gif) repeat-y ;
	background: #FFFFCE;
	
}

.container_24 {
	background: #fff url(../img/24_col.gif) repeat-y;
}