@charset "utf-8";

/* 簡單流變媒體

   注意: 流變媒體要求您必須移除 HTML 中媒體的高度和寬度屬性

   http://www.alistapart.com/articles/fluid-images/ 

*/

img, object, embed, video {max-width: 980px;}

/* IE 6 不支援最大寬度，因此寬度預設為 100% */

.ie6 img {width: auto;}



/*

	Dreamweaver 流變格線屬性

	----------------------------------

	dw-num-cols-mobile:		5;

	dw-num-cols-tablet:		8;

	dw-num-cols-desktop:	10;

	dw-gutter-percentage:	25;

	

	靈感來自於 Ethan Marcotte 的「具回應功能的網頁設計」 

	http://www.alistapart.com/articles/responsive-web-design

	

	以及 Joni Korpi 的「黃金格線系統」

	http://goldengridsystem.com/

*/



/* 行動版面: 480px 以下。 */

.gridContainer {width:97.6%; padding-left:1.2%; padding-right:1.2%; margin:auto;}

#search-form1 {display:none;}

#search-form2 {display:none;}

#search-form3 {display:block; float:left; width:100%;}

.slogan {display:none;}

#footer {clear:both; width:100%; display:block;}

#LayoutDiv1 {clear:both; width:100%; display:block;}

#LayoutDiv2 {clear:both; width:100%; display:block;}

#LayoutDiv3 {clear:both; width:100%; display:block;}

#LayoutDiv4 {clear:both; width:100%; display:block;}

#LayoutDiv5 {clear:both; width:100%; display:block;}

#LayoutDiv6 {clear:both; width:100%; display:block;}

#LayoutDiv7 {clear:both; width:198px; display:block;}

#LayoutDiv8 {clear:both; width:100%; display:block;}

#subnavCoolers {clear:both; width:100%; display:block;}

#Coolers-CPU {clear:both; width:100%; display:block;}

#Reviews {clear:both; width:100%; display:block;}

#News {clear:both; width:100%; display:block;}

#main-img-introduction {position:relative;}

#resizable {clear:both; width:150px; height:80px; display:inline;}

.main-img-resize {float:left; width:41.235%; height:auto;}

#introduction {float:left; width:42%; height:auto; margin-top:25px; margin-left:3%;}

.comingsoon {width:100%; height:auto;}
.featurephoto {width:100%; height:auto; max-width:500px; max-height:500px; border:3px solid #ffffff; overflow:hidden;}
.featurephoto2 {width:100%; height:auto; max-width:663px; max-height:500px; border:0px solid #ebebeb; overflow:hidden;}
.featurephoto6 {width:100%; height:auto; max-width:663px; max-height:786px; border:0px solid #ebebeb; overflow:hidden;}
.featurephoto5 {width:100%; height:auto; max-width:663px; max-height:437px; border:0px solid #ebebeb; overflow:hidden;}
.featurephoto3 {width:100%; height:auto; max-width:938px; max-height:528px; border:0px solid #ebebeb; overflow:hidden;}
.featurephoto4 {width:100%; height:auto; max-width:980px; max-height:551px; border:0px solid #ebebeb; overflow:hidden;}
.featurephoto7 {width:100%; height:auto; max-width:980px; max-height:401px; border:0px solid #ebebeb; overflow:hidden;}
.distributor-logo {width:100%; height:auto; max-width:210px; max-height:120px;}
#map {width:100%; height:100%; max-width:600px; max-height:600px;}



/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */

@media only screen and (min-width: 481px) {

.gridContainer {width:97.6%; padding-left:1.2%; padding-right:1.2%; margin:auto;}

#search-form1 {display:none;}

#search-form2 {display:block; float:right; margin-right:26%; width:24%;}

#search-form3 {display:none;}

.slogan {display:block; padding-top:24px; color:#C00027; font:0.83em/0.6 "Lucida Sans Unicode", "Lucida Grande", sans-serif;}

#footer {clear:both; width:100%; display:block;}

#LayoutDiv1 {clear:both; width:100%; display:block;}

#LayoutDiv2 {clear:both; width:100%; display:block;}

#LayoutDiv3 {clear:both; width:100%; display:inline-block; float:left;}

#LayoutDiv4 {clear:both; width:100%; display:block;}

#LayoutDiv5 {clear:both; width:100%; display:block;}

#LayoutDiv6 {clear:both; width:100%; display:block;}

#LayoutDiv7 {clear:both; width:396px; display:block; max-width:396px; min-width:198px;}

#LayoutDiv8 {clear:both; width:100%; display:block;}

#subnavCoolers {clear:both; width:100%; display:block;}

#Coolers-CPU {clear:both; width:100%; display:block;}

#Reviews {clear:both; width:100%; display:block;}

#News {clear:both; width:100%; display:block;}

#main-img-introduction {position:relative;}

#resizable {clear:none; width:320px; max-width:inherit; height:80px; display:inline;}

#main-img-resize {float:left; width:41.235%; height:auto;}

#introduction {float:left; width:42%; height:auto; margin-top:50px; margin-left:3%;}

.comingsoon {width:100%; height:auto;}
.featurephoto {width:100%; height:auto; max-width:500px; max-height:500px; border:3px solid #828282; overflow:hidden;}
.featurephoto2 {width:100%; height:auto; max-width:663px; max-height:500px; border:0px solid #ebebeb; overflow:hidden;}
.distributor-logo {width:100%; height:auto; max-width:210px; max-height:120px;}
#map {width:100%; height:100%; max-width:600px; max-height:600px;}

}



/* 桌面版面: 769px 到最大 1232px。樣式繼承自: 行動版面和表格版面。 */

@media only screen and (min-width: 769px) {

.gridContainer {max-width:982px; width:100%; padding-left:0; padding-right:0; margin:auto;}

#search-form1 {display:block; float:right; margin-right:352px;}

#search-form2 {display:none;}

#search-form3 {display:none;}

.slogan {display:block; padding-top:37px; color:#C00027; font:0.83em/0.6 "Lucida Sans Unicode", "Lucida Grande", sans-serif;}

#footer {max-width:982px; clear:both; width:100%; display:block; margin:inherit;}

#LayoutDiv1 {max-width:982px; max-height:85px; clear:both; width:100%;}

#LayoutDiv2 {max-width:982px; clear:both; width:100%; display:block;}

#LayoutDiv3 {max-width:982px; clear:both; width:100%; display:block;}

#LayoutDiv4 {max-width:982px; clear:both; width:100%; display:block;}

#LayoutDiv5 {max-width:982px; clear:both; width:100%; display:block;}

#LayoutDiv6 {max-width:982px; clear:both; width:100%; display:block;}

#LayoutDiv7 {max-width:600px; min-width:198px; width:600px; clear:none; display:inline; float:left;}

#LayoutDiv8 {max-width:780px; width:100%; clear:none; display:inline; float:left;}

#subnavCoolers {max-width:982px; clear:both; width:100%; display:block;}

#Coolers-CPU {max-width:982px; clear:both; width:100%; display:block;}

#Reviews {max-width:490px; clear:none; width:100%; display:inline; float:left;}

#News {clear:none; width:100%; display:inline; float:left;}

#main-img-introduction {position:relative;}

#resizable {clear:both; width:480px; size:auto; inherit; height:80px; display:inline;}

#main-img-resize {float:left; width:41.235%; height:auto;}

#introduction {float:left; width:42%; height:auto; margin-top:100px; margin-left:3%;}

.comingsoon {width:100%; height:auto;}
.featurephoto {width:100%; height:auto; max-width:500px; max-height:500px; border:3px solid #828282; overflow:hidden;}
.featurephoto2 {width:100%; height:auto; max-width:663px; max-height:500px; border:0px solid #ebebeb; overflow:hidden;}
.distributor-logo {width:100%; height:auto; max-width:210px; max-height:120px;}
#map {width:100%; height:100%; max-width:600px; max-height:600px;}

}