/* This is the H1 title used in the sample PHP files */
	.sampleTitle {
		text-align:center;
	}

/*------------------------------------------*/	
/* 方案二修正版：保留浮動與行內寬度，加入卡片質感 */
.gridCell {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    /* 讓原本 PHP 的 float: left 與 width 正常作用，改用 box-sizing 避免變形 */
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 滑鼠懸停時微幅浮起，增加互動感 */
.gridCell:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}



/*------------------------------------------*/

/* 清除圖片外層連結與圖片本體的任何白框與外距 */
.gridCell .realviewLink {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    display: block;
    padding: 0 !important;
    margin: 0 auto;
}

.gridCell .realviewImage,
.gridCell img.realviewImage {
    border: none !important;
    outline: none !important;
    background: transparent !important;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 懸停時不顯示圖片外框 */
.gridCell .realviewLink:hover,
.gridCell .realviewLink:hover .realviewImage {
    border: none !important;
}

/* This is the style given to the text underneath the image (title, description, price...) */
	.gridCellInfo {
		text-align:center;
		font-size:.75em;
	}
/* Centers text under the product  */
	.gridCellInfo a, .gridCellInfo a span {
		text-align:center;
	}
/* This is the main container for the grid of products */
	.allGrids {
		text-align:center;
		width:100%;
	}
/* Centers the grid of products inside allGrids */
	.centerGrids {
		 margin-left: auto;
		 margin-right: auto;
	}
	.error {
		border:1px solid;
		padding:18px;
		margin-bottom:23px;
	}
/* The currently selected sort method */
	.selectedSort, .selectedSort a {
		text-decoration:none;
	}
/* The pagination links */
	.count {
		float:right;
		margin-left:-2px;
		margin-bottom:7px;
		text-align:right;
		position:relative;
	}
/* Powered by Zazzle logo */
	.pbimg {
		position:absolute;
		top:-5px;
		left:0px;
	}
	.pbimg img {
		border:0px;
	}
/* Empty classes in case you want to change the look of the pagination and sort */
	.count a, .sortLinks a {
		
	}
	.sortLinks {
		
	}
/* Used to stop product grids from floating to the left (at the end of the grid) */
	.clearMe {
		clear:both;
		margin:0px;
		padding:0px;
	}
/* Height of clearMe DIV */
	.short {
		height:10px;
	}
/* Fix for Mozilla browsers for floating elements...best not touch this! */
	.clearfix:after {
	    content: ".";
	    display: block;
	    height: 0;
	    clear: both;
	    visibility: hidden;
	}
	.clearfix {display: inline-block;}

	/* Hides from IE-mac \*/
	* html .clearfix {height: 1%;}
	.clearfix {display: block;}
	/* End hide from IE-mac */

/* Empty class in case you want to style the currently selected page number */
	.current {

	}
/* The product description text. To show more than one line of the description, increase the height. */	
	.productDescription {		
		cursor: default;
		text-decoration: none;
		position:relative;
		overflow:hidden;
		height:15px;
	}
/* The product title text */
	.productTitle {
		display:block;
		/*height:15px;*/
		height:40px;
		overflow:hidden;
		/*font-weight:bold; */
	}
/* Product price text */
	.productPrice {
		cursor: default;
		text-decoration: none;
		font-size: 8pt;	
	}
/* The pagination arrows (previous/next)*/
	.paginationArrows {
		text-decoration: none;	
	}

/* ------------------------------------------------------*/

body{
/*font-family: Arial,Helvetica,Sans-serif;*/
}
#menu{
border-bottom:1px solid #ccc;
font:12px Arial,Helvetica,Sans-serif;
}
#menu a,a:visited{
	text-decoration: none;	
	margin:3px 3px;
	color:#999;
}
#menu a:hover{
background-color:#FFB90F;
}

#menu-left, #menu-control {
text-align:center;

}
/* google fonts */
.logoFont {
background:url('../logo_zazzleaffiliatehelper.png') no-repeat center top;
font-family: 'Oswald', sans-serif;
text-align:center;
font-size: 400%; 
text-decoration: none;	
padding-top:120px;
}	

.logoFont a,a:visited {
text-decoration: none;	
color:#000;
}


h2.subHeader {
	text-align: center;      /* 文字置中對齊 */   
    color: #666;             /* 使用質感灰，不搶主標題風采 */
    font-weight: normal;     /* 稍微細字體看起來更有現代感 */
    margin-top: -8px !important; /* 向上微調拉近 */
    margin-bottom: 20px;
}

.subHeader img {
  vertical-align: middle;
}

.searchForm{
text-align:center;
margin:20px 0;
}

#search {
    background: url(https://dl.dropbox.com/u/939570/images/search-white.png) no-repeat 10px 6px #fcfcfc;
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 400px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search:focus {
    width: 450px;
    }
    
.searchInput{    
    border: 1px solid #d1d1d1;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bebebe;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }    
    
    
#advsetting {
display:none;
width:700px;
text-align:left;
/*padding-left:20%;*/
margin-left:auto;
margin-right:auto;
font-size:small;
border:dashed 1px #ccc;
} 

#advsetting li{
margin:10px;
list-style-type: none;	
}  



.styled-button {
	-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
	color:#333;
	background-color:#FA2;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border:none;
	font-family:'Helvetica Neue',Arial,sans-serif;
	font-size:16px;
	font-weight:700;
	height:32px;
	padding:4px 16px;
	text-shadow:#FE6 0 1px 0
} 

.styled-button a,a:visited{
text-decoration: none;	
color:#333;
}

.styled-button a:hover{
text-decoration: none;	
color:red;
}

/* add style to checkbox while checked*/
:checked + span {
  font-weight: bold;
}

.warning, .warning a, .warning a:visited {
color:red;
text-align:center;
}

.selfpromotion {
float:left;
width:500px;
border:1px solid #ccc;
margin:10px;
padding:5px;
}

.selfpromotion a, .selfpromotion a:visited {
color:white;
}

.zSearch {
width:500px;
text-align:left;
padding:5px;
margin-left:auto;
margin-right:auto;
font-size:small;
border:dashed 1px #ccc;
background-color:#F9EBCE;
} 

/* ========================================== */
/* 核心容器：改用 Flexbox 自動對齊與自動等高 */
/* ========================================== */
.centerGrids {
    display: flex !important;
    flex-wrap: wrap !important; /* 自動換行 */
    justify-content: flex-start !important; /* 從左至右排列 */
    align-items: stretch !important; /* 強制同一排所有卡片等高！ */
    margin-left: auto;
    margin-right: auto;
}

/* ========================================== */
/* 卡片基礎設定 */
/* ========================================== */
.gridCell {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    /* 清除原本舊有的 float 屬性 */
    float: none !important;
    
    /* 讓卡片內部元素（圖片、標題、日期）垂直平均分佈 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* 懸停效果 */
.gridCell:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

/* ========================================== */
/* 自己的產品 (.gridCell-me) 專屬深綠色質感卡片 */
/* ========================================== */
.gridCell.gridCell-me {
    background-color: #0f5132 !important; /* 深綠色底色 */
    border: 2px solid #198754 !important; /* 亮綠色外框 */
    box-shadow: 0 6px 16px rgba(15, 81, 50, 0.4);
}

/* 自己的作者標籤 */
.creator_me {
    display: block;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 8px;
    margin-bottom: 6px;
    background-color: #198754;
    color: #ffffff;
    border-radius: 4px;
    text-align: center;
}

/* 一般作者標籤 */
.creator {
    display: block;
    font-size: 12px;
    padding: 3px 6px;
    margin-bottom: 6px;
    color: #666;
    text-align: center;
}

/* 標題設定 */
.productTitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 36px;
    font-size: 13px;
    line-height: 1.3;
    margin-top: 6px;
}

/* 一般卡片的日期樣式 */
.productDate {
    font-size: 12px;
    text-align: center;
    margin-top: 4px;
    color: #555;
}

/* 深綠色卡片內部所有文字強制改為白色 */
.gridCell.gridCell-me .productTitle,
.gridCell.gridCell-me .productTitle a,
.gridCell.gridCell-me .productDate {
    color: #ffffff !important;
}


.myworkcounts {
		float:left;
		display:block;
		font-size: 32px;	
		padding:2px;
		background-color:#00ff00;
		
}