/******************************************************************************/
body {
    color: black;
    background: #FFFFFF none repeat scroll 0 0;
    margin: 0;
    padding: 0;

    font-family:"Trebuchet MS",Trebuchet,Verdana,Sans-serif;
    font-size:small;
    font-size-adjust:none;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:normal;
}

#navbar_top {
	margin: 0;
	padding: 0 20px 0 20px; /* 上右下左 */

	color: #FFFFFF;
	background: #666666 100% 0 no-repeat;
	height: 20px;

	position: relative;
	text-align: right;
}

  #navbar_top a {
    color: #FFFFFF;
  	text-decoration: none;
  }

  #navbar_top a:hover {
  	color: #FFCC00;
  	text-decoration: underline;
  }

div#content {
	position: relative;
	width: 920px;
	margin: 0px auto;
	padding: 0px 10px 40px 10px;
}

ul {
  list-style-image: none;
  list-style-position: outside;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

h2.title {
  border-bottom: 2px solid #FFCC00;
  background-color: #FFFF00;
  color: #669933;
  padding: 8px 10px 2px 15px;

}

p.title {
  padding: 2px 10px 2px 20px;

}

div.message {
    margin: 10px 0 15px 0;
    padding: 5px 10px 5px 30px;

    background: url('../image/icon/arrow_114.gif') 7px 7px no-repeat;
    background-color: #FFCCCC;

    border-style: solid;
    border-width: 2px;
    border-color: #C31400;
}

div.message_ajax_error {
  margin: 10px 0 15px 0;
  padding: 5px 10px 5px 30px;
  	
	background: url('../image/icon/form_error.gif') 7px 7px no-repeat;
	background-color: #FFCCCC;

  border-style: solid;
  border-width: 2px;
  border-color: #C31400;	
}

div.message_ajax_accept {
  margin: 10px 0 15px 0;
  padding: 5px 10px 5px 30px;
  	
	background: url('../image/icon/form_accept.gif') 7px 7px no-repeat;
	background-color: #CEE574;

  border-style: solid;
  border-width: 2px;
  border-color: #68C300;	
}

div.message_green {
  margin: 10px 0 15px 0;
  padding: 5px 10px 5px 30px;
  
  background: url('../image/icon/msg_green.gif') 7px 7px no-repeat #CEE574;
  
  border-style: solid;
  border-width: 2px;
  border-color: #68C300;  
}


div.message_hit {
  clear: both;
  margin: 0;
  padding: 20px 30px 20px 30px;
  
  background: #83ACCA; /* #CEE574 */
  color: #464646;
  
  font: bold 18px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
  /*
  border-left-style: solid;
  border-left-width: 2px;
  border-left-color: #464646;
  */
}

/* Error Msg
*******************************************************************************/
ul.errors {
  margin: 10px 10px 10px 10px;
  padding: 3px 0 3px 0;
  background-color: #FFCCCC;
  
  border-style: solid;
  border-width: 2px;
  border-color: #C31400;
}

ul.errors li {
  margin: 0;
  padding: 0 0 0 30px;
	background: url('../image/icon/arrow_114.gif') 10px no-repeat;
}

/******************************************************************************/
.fc_red {color: #FF0000}
.fc_orange {color: #FF6600}
.fc_gray {color: #9f9f9f}
.fc_black {color: #000000}
.bc_write {background-color: #FFFFFF}
.faq_red {
  color: #FF0000;
  font-weight: bold;
}
.faq_bold {
  font-weight: bold;
}
.faq_q {
  background-color: #CCFF99;
  border-bottom: 1px solid #66CC00;
  font-weight: bold;
}
p span.faq_q2 {
  margin: 0;
  padding: 0 30px 0 30px;
  background-color: #CCFF99;
  border-bottom: 1px solid #66CC00;
  font-weight: bold;
  font-size: 120%;
}
p span.faq_subtitle {
  margin: 0 0 0 5px;
  padding: 0 10px 0 10px;
  background-color: #FFD350;
  border-bottom: 1px solid #FF4000;
}
p.faq_content {
  margin: 0 0 0 10px;
  padding: 0 2px 0 2px;
}
p a.page_top {
  margin: 0 0 0 5px;
  padding: 0 10px 0 10px;
  color: #FFFFFF;
  background-color: #8C8C8C;
  border: 1px solid #000000;
  font-size:80%;
  text-decoration: none;
}
p a.page_top:hover {
  margin: 0 0 0 5px;
  padding: 0 10px 0 10px;
  color: #8C8C8C;
  background-color: #FFFFFF;
  border: 1px solid #000000;
  font-size:80%;
  text-decoration: none;
}
.signup_subject {
  background-color: #CCFF99;
  border-bottom: 1px solid #66CC00;
  font-weight: bold;
}
/******************************************************************************/
h3.help_title {
  margin: 0px 10px 0px 10px;
  padding: 2px 10px 2px 15px;
  
  color: white;
  background: #6E882F;
  border-bottom: 2px solid #A7C464;
}

div.help_content {
  margin: 0px 10px 0px 10px;
  padding: 15px 10px 35px 40px;
}

ul.help {
    margin: 0;
    padding: 0 0 0 15px;
}

ul.help li {
  margin: 0 0 5px 0;
  padding: 0 0 2px 3px;
  list-style-image: url('../image/icon/arrow_milkbox.gif');
}
/******************************************************************************/

#header {
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    position: relative;
    z-index: 10;

    background-image: url('../image/header_background.gif');
    background-repeat: repeat-x;
    background-position: bottom;
}	

#header_logo {
    margin: 0;
    padding: 10px 0 25px 20px;
    position: relative;
}

#nav_menu_background {
  margin: 0;
  padding: 0 0 0 20px;
  position: relative;
  background-color: #8ABF3B; 
}

#menu a{
  border-right:1px solid white;
  padding: 0 8px 0 8px;
  color: white;
  text-decoration: none;
  font-size: 16px;
}

#menu a:hover{
  border-right:1px solid white;
  padding: 0 8px 0 8px;
  color: black;
  background-color: white;
  text-decoration: none;
}

#news {
  padding: 28px 0 0 0;
  color: #FFFFFF;
  text-align: center;
}

/* Footer Area
*******************************************************************************/

#footer {
	position: relative;
	clear: both;
	
	margin: 30px 0 0 0;
	padding: 30px 0 30px 0;
	
    color: #666666;
    background-color: #F4F4F4;

    border-top-style: dotted;
    border-top-color: #848484;
    border-top-width: 1px;
  	  
}

#footer_menu {
  position: relative;
  margin: 0;
  padding: 0 0 0 30px;
  
  text-align: left;
}

    #footer_menu p {
      margin: 0;
      padding: 0;
    }
    
.footer_menu_main {
  margin: 0;
  padding: 0;
  font-weight: bold;
  color: #CCCCCC;
}

    #footer_menu a {
    	color: #FF6600;
    	text-decoration: none;
    }
    
    #footer_menu a:hover {
    	color: #FFFFFF;
    	text-decoration: none;
    	background-color: #669933;
    }

#footer_copyright {
	padding: 30px 30px 0 0;
    text-align: right;
}

    #footer_copyright a {
    	color: #FF6600;
    	text-decoration: none;
    }
    
    #footer_copyright a:hover {
    	color: #FFFFFF;
    	text-decoration: none;
    	background-color: #669933;
    }

/* Oval Button
*******************************************************************************/

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */
width: 100%;
}

/* 表單按鈕專用 */

form .ovalbutton{
cursor:pointer;
border:outset 0px;
background: transparent url('../image/oval/oval-orange-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}


form .ovalbutton input{
cursor:pointer;
border:outset 0px;
background: transparent url('../image/oval/oval-orange-right.gif') no-repeat top right;
display: block;
padding: 3px 11px 3px 0; /*Set 11px below to match value of 'padding-left' value above*/
}

form .ovalbutton:hover{ /* Hover state CSS */
border:outset 0px;
background-position: bottom left;
}

form .ovalbutton:hover input{ /* Hover state CSS */
border:outset 0px;
background-position: bottom right;
color: black;
}
                      

#all .ovalbutton{
cursor:pointer;
border:outset 0px;
background: transparent url('../image/oval/oval-blue-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 13px Tahoma; /* Change 13px as desired */
line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 11px; /* Width of left menu image */
text-decoration: none;
}


#all .ovalbutton a{
cursor:pointer;
border:outset 0px;
background: transparent url('../image/oval/oval-blue-right.gif') no-repeat top right;
display: block;
padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
text-decoration: none;
color: black;
}

#all .ovalbutton:hover{ /* Hover state CSS */
border:outset 0px;
background-position: bottom left;
}

#all .ovalbutton:hover a{ /* Hover state CSS */
border:outset 0px;
background-position: bottom right;
color: blue;
}

#all_green .ovalbutton{
cursor:pointer;
border:outset 0px;
background: transparent url('../image/oval/oval-green-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Tahoma; /* Change 13px as desired */
line-height: 18px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration: none;
}


#all_green .ovalbutton a{
cursor:pointer;
border:outset 0px;
background: transparent url('../image/oval/oval-green-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
text-decoration: none;
color: black;
}

#all_green .ovalbutton:hover{ /* Hover state CSS */
border:outset 0px;
background-position: bottom left;
}

#all_green .ovalbutton:hover a{ /* Hover state CSS */
border:outset 0px;
background-position: bottom right;
color: green;

display: block;
padding: 4px 10px 2px 0;
}


#all_orange .ovalbutton{
cursor:pointer;
border:outset 0px;
background: transparent url('../image/oval/oval-orange-left.gif') no-repeat top left;
display: block;
float: left;
font: normal 12px Tahoma; /* Change 13px as desired */
line-height: 18px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */
height: 24px; /* Height of button background height */
padding-left: 10px; /* Width of left menu image */
text-decoration: none;
}


#all_orange .ovalbutton a{
cursor:pointer;
border:outset 0px;
background: transparent url('../image/oval/oval-orange-right.gif') no-repeat top right;
display: block;
padding: 4px 10px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/
text-decoration: none;
color: black;
}

#all_orange .ovalbutton:hover{ /* Hover state CSS */
border:outset 0px;
background-position: bottom left;
}

#all_orange .ovalbutton:hover a{ /* Hover state CSS */
border:outset 0px;
background-position: bottom right;
color: green;

display: block;
padding: 4px 10px 2px 0;
}


div.buttonwrapper div.green{
background: transparent url('../image/oval/oval-green-left.gif') no-repeat top left
}

div.buttonwrapper div.green input{
background: transparent url('../image/oval/oval-green-right.gif') no-repeat top right;
}

div.buttonwrapper div.green a{
background: transparent url('../image/oval/oval-green-right.gif') no-repeat top right;
}

div.buttonwrapper div.orange{
background: transparent url('../image/oval/oval-orange-left.gif') no-repeat top left
}

div.buttonwrapper div.orange input{
background: transparent url('../image/oval/oval-orange-right.gif') no-repeat top right;
}

div.buttonwrapper div.orange a{
background: transparent url('../image/oval/oval-orange-right.gif') no-repeat top right;
}

div.buttonwrapper div.blue{
background: transparent url('../image/oval/oval-blue-left.gif') no-repeat top left
}

div.buttonwrapper div.blue input{
background: transparent url('../image/oval/oval-blue-right.gif') no-repeat top right;
}
  
div.buttonwrapper div.blue a{
background: transparent url('../image/oval/oval-blue-right.gif') no-repeat top right;
}

div.buttonwrapper div.red{
background: transparent url('../image/oval/oval-red-left.gif') no-repeat top left
}

div.buttonwrapper div.red input{
background: transparent url('../image/oval/oval-red-right.gif') no-repeat top right;
}

/* Bread Crumb
*******************************************************************************/


.breadcrumb{
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
margin: 0 0 20px 0;
padding: 2px 40px 2px 40px;
background: #F3FFE5;
width: 820px;
}

.breadcrumb a{
background: transparent url('../image/icon/breadcrumb.gif') no-repeat center right;
text-decoration: none;
padding-right: 18px; /*adjust bullet image padding*/
color: #6E982E;
}

.breadcrumb a:visited, .breadcrumb a:active{
color: #6E982E;
}

.breadcrumb a:hover{
text-decoration: underline;
}