@charset "utf-8";
/* CSS Document */
html, body { 
	font-size: 15px; font-family: "微軟正黑體", "新細明體", Arial; color: #666; line-height: 20px; letter-spacing: 2px;
	margin: 0px; padding: 0px; height: 100%;}

H1 { font-size: 17px;}

H2 { font-size: 15px; margin: 0px; padding: 0;}

a:link {
	font-size: 13px; text-decoration: none; color: #666;
}

a:visited {
	font-size: 13px; text-decoration: none; color: #666;
}

a:hover {
	font-size: 13px; text-decoration: none; color: #9744ad;
}

a:active {
	font-size: 13px; text-decoration: none; color: #666;
}

code {
	border: #666 double; color: #FFF; background-color: #333; white-space: pre; border-radius: 8px; padding: 4px;}

textarea {
	width: 100%; padding: 4px; height: 300px; background: #F5FFFA; overflow: auto; border-radius: 8px;}

img { width: 80%;}


#page {
	min-height: 100%; width: 100%; position: relative; margin: 0 auto;}

#header { height: 88px; margin-left: auto; margin-right: auto;}
nav { width: 20%;}
article { width: 80%; text-align: left;}
section { padding-bottom: 75px; display: inline-block;}
footer {
	position: absolute; bottom: 0px; width: 100%; height: 75px; text-align: center;}


#main { width: 100%; margin-left: auto; margin-right: auto;}

#logo {
	width: 150px; height: 88px; position: absolute; background: url(/images/logo/UniqueJS_logo.png);}

#nav_left {
	 vertical-align:top; display: inline-block; width: 240px; text-align: left;
}
#nav_top { display: none;}

#menu_button {
	display: none;
}

@media (max-width: 1960px) {
	#header { width: 1240px;}
	#main { width: 1240px;}
	article { width: 980px;}
}

@media (max-width: 1280px) {
	#header { width: 1024px;}
	#main { width: 1024px;}
	article { width: 760px;}
}

@media (max-width: 1024px) {
	#header { width: 888px;}
	#main { width: 888px;}
	article { width: 640px;}
}

@media (max-width: 888px) {
	#header { width: 680px;}
	#main { width: 680px;}
	article { width: 680px;}
	#menu_button {
		display:inline; border-color: #000; border-radius: 5px; right: 15px; top: 15px; position: absolute;
	}
	#menu_button_line {
		display: block; background-color: #666; width: 25px; height: 2px; border-radius: 1px; margin-top: 4px;
	}
	#menu_button_line2 {
		display: block; background-color: #666; width: 25px; height: 2px; border-radius: 1px; margin-top: 4px; margin-bottom: 4px;
	}
	#nav_left{ display: none;}
	
	#nav_top { display: none; position:absolute; width: 680px; margin-left: auto; margin-right: auto;}
	#nav_top ul { background: rgba(99, 99, 99, 0.95); padding:0px; margin:0px;}
	#nav_top ul li{ display:block; float:none; text-align: left; width:100%; padding-left: 15px;}
	#nav_top ul li a:link{ color: #fff;}
	#nav_top ul li a:visited{ color: #fff;}
	#nav_top ul li a:hover{ color: #fff;}
	#nav_top ul li a:active{ color: #fff;}
}

@media (max-width: 680px) {
	#header { width: 480px;}
	#main { width: 480px;}
	article { width: 480px;}
	#menu_button { right: 10px; top: 10px;}
	#nav_top { width: 480px;}
	section { padding-bottom: 95px;}
}

@media (max-width: 480px) {
	#header { width: 320px;}
	#main { width: 320px;}
	article { width: 320px;}
	#nav_top { width: 320px;}
}