/*
 * !IMPORTANT: Do not edit this file (so that it will be easier to update the template)!
 * Put your css modifications into css/custom.css
 */


/******************************
 * Reset
 ******************************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
    border: 0;
    vertical-align: baseline;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,img { 
    border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
}
ol,ul {
    list-style:none;
}
caption,th {
    text-align:left;
}
h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border:0; }


/******************************
 * Default layout
 ******************************/

.container {
    position: relative;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
}

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
    display: inline;
    float: left;
    position: relative;
    margin-left: 10px;
    margin-right: 10px;
}

.grid-1 { width: 60px; }
.grid-2 { width: 140px; }
.grid-3 { width: 220px; }
.grid-4 { width: 300px; }
.grid-5 { width: 380px; }
.grid-6 { width: 460px; }
.grid-7 { width: 540px; }
.grid-8 { width: 620px; }
.grid-9 { width: 700px; }
.grid-10 { width: 780px; }
.grid-11 { width: 860px; }
.grid-12 {
	width: 940px;
	font-family: "΢ÈíÑźÚ";
	font-size: 12px;
	font-weight: bold;
}
.grid-13 { width: 700px; height: 250px}


.one-half, .one-third, .two-thirds, .one-fourth {
    float: left;
    margin-left: 4%;
}

.one-half {
    width: 47.98%;
}

.one-third {
    width: 30.6666%;
    *width: 30.64%;
}

.two-thirds {
    width: 65.3334%;
}

.one-fourth {
    width: 22%;
}

.first {
    margin-left: 0;
}


/******************************
 * 768px >= width <= 959px
 ******************************/

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .container {
        width: 768px;
    }
    
    .grid-1 { width:44px; }
    .grid-2 { width:108px;}
    .grid-3 { width:172px; }
    .grid-4 { width:236px; }
    .grid-5 { width:300px; }
    .grid-6 { width:364px; }
    .grid-7 { width:428px; }
    .grid-8 { width:492px; }
    .grid-9 { width:556px; }
    .grid-10 { width:620px; }
    .grid-11 { width:684px; }
    .grid-12 { width:748px; }
    .grid-13 { width:748px; height: 250px}
}


/******************************
 * width <= 767px
 ******************************/

@media only screen and (max-width: 767px) {
    .container {
        width: 300px;
    }
    
    .grid-1,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10,
    .grid-11,
    .grid-12,
  .grid-13,
    .one-half,
    .one-third,
    .two-thirds,
    .one-fourth {
        display: block;
        float: none;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}


/******************************
 *  480px <= width <= 767px
 ******************************/

@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container {
        width: 420px;
    }
    
    .grid-1,
    .grid-2,
    .grid-3,
    .grid-4,
    .grid-5,
    .grid-6,
    .grid-7,
    .grid-8,
    .grid-9,
    .grid-10,
    .grid-11,
    .grid-12,
    .one-half {
        display: block;
        float: none;
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}


/******************************
 * Typography
 ******************************/

body {
	font-size: 12px;
	font-family: "΢ÈíÑźÚ";
	line-height: 20px;
	top: -10px;
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: 10px;
    font-family: Georgia, Times, serif;
}

h1 { font-size: 40px; line-height: 46px; }
h2 { font-size: 34px; line-height: 40px; }
h3 { font-size: 28px; line-height: 34px; }
h4 { font-size: 22px; line-height: 28px; }
h5 { font-size: 16px; line-height: 22px; }
h6 { font-size: 12px; line-height: 18px; }

p, form, table, ul, ol, dl {
    margin-bottom: 20px;
}


/******************************
 * Classes
 ******************************/

.alpha { margin-left: 0; }
.omega { margin-right: 0; }


/* http://sonspring.com/journal/clearing-floats */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/
.clearfix {
  zoom: 1;
}