/* CSS Document */

body {	
	background:#F2F2F2;
	background:url(../assets/shattered1.png) repeat;
	font-family: "微軟正黑體", "Microsoft JhengHei",  Tahoma , Verdana , Arial , sans-serif;
}

a {
	text-decoration:none;
}

div.hr {
	height:4px;
	width:700px;
	background:url(../assets/hr.png);
}

div.content {
	width:1100px;
	margin:30px auto 0 auto;
	background:#FFFFFF;
	padding : 0px 0px 15px 0px;
	
	-moz-box-shadow: 0 1px 10px #7E7E7E;
	-webkit-box-shadow: 0 1px 10px #7E7E7E;
	box-shadow: 0 1px 10px #7E7E7E;
	
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
}

div.pageContent {
	margin: 15px 30px 0px 30px;
	min-height:450px;
}

div.header {
	width:900px;
	margin:0 auto 0 auto;
}

img#logo {
	position:relative;
	left:-100px;
	
	-moz-border-radius:10px 10px 0px 0px;
	-webkit-border-radius:10px 10px 0px 0px;
	border-radius:10px 10px 0px 0px;
}

div#mainContent {
	display:inline-block;
	width:75%;
	min-height:463px;
	margin:0 auto 0 10px;
	padding:0 0px 0 0px;
	backgro/und:url(../assets/mainContent3.png) no-repeat;
	background:#fae7bc;
	border: solid 3px #eeaa18;
	border-left-width:10px;
	color:#563d0a;
	font-weight: bold;
	font-size: 1.1em;
}

div#mainContent h1{
	margin:0;
	padding:5px 0 10px 15px;
	b/ackground:#eeaa18;
	color:#FFFFFF;
	
	background: -moz-linear-gradient(-45deg,  rgba(238,170,24,1) 0%, rgba(250,231,188,0.26) 74%, rgba(250,231,188,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(238,170,24,1)), color-stop(74%,rgba(250,231,188,0.26)), color-stop(100%,rgba(250,231,188,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(238,170,24,1) 0%,rgba(250,231,188,0.26) 74%,rgba(250,231,188,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(238,170,24,1) 0%,rgba(250,231,188,0.26) 74%,rgba(250,231,188,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(238,170,24,1) 0%,rgba(250,231,188,0.26) 74%,rgba(250,231,188,0) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(238,170,24,1) 0%,rgba(250,231,188,0.26) 74%,rgba(250,231,188,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeaa18', endColorstr='#00fae7bc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

div#mainSubContent {
	margin: 0 30px 0 50px;
}

div#mainSubContent h2 {
	color:#7F6091;
}

div#mainSubContent h3 span.caption {
	font-size : 0.7em;
}

div#mainSubContent h3 span.caption:before {
	content:" - "
}
div#mainSubContent h3 span.caption:after {
	content:" "
}

div#mainSubContent form {
	width: 400px;
	display:block;
	margin : 5px auto 0px auto;
	padding : 10px 10px 15px 10px;
}

div#mainSubContent fieldset {
	border : 2px solid #EEAC1D;
}

div#mainSubContent fieldset legend {
	color : inherit;
}
div#mainSubContent input[type=text] {
	height:2em;
	
	padding-left:5px;
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	
	background: #fdf4e1;
	
	border:2px solid #f6d68d;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

div#mainSubContent input[type=text]:focus {
	-moz-box-shadow: 0 1px 10px #EEAA18;
	-webkit-box-shadow: 0 1px 10px #EEAA18;
	box-shadow: 0 1px 10px #EEAA18;
	
	
	border-color:transparent;
}

div#mainSubContent textarea {
	display:block;
	width:300px;
	margin : 5px auto 5px auto;
	padding:5px;	
	background: #fdf4e1;
	border:2px solid #f6d68d;
	
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

div#mainSubContent textarea:focus {
	-moz-box-shadow: 0 1px 10px #EEAA18;
	-webkit-box-shadow: 0 1px 10px #EEAA18;
	box-shadow: 0 1px 10px #EEAA18;
	
	border-color:transparent;
}

div#mainSubContent input[type=submit] {
	width:150px;
	display:block;
	margin:10px auto 15px auto;
	height:70px;
	background: #fdf4e1;
	color : inherit;
	
	-moz-border-radius:8px;
	-webkit-border-radius:8px;
	border-radius:8px;
	
	border:2px solid #f6d68d;
	
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
}

div#mainSubContent input[type=submit]:hover {
	color : #c48a0e;
	background: #F3C662;		
	border:2px solid #f5ce75;
	cursor:pointer;
}

div#mainSubContent div.formRow {
	width:220px;
	margin : 10px auto 5px auto;
	display:block;
}

span.special {
	color : #7351ff;
	font-weight: bolder;
}

a.albumThumb {
	width: 300px;
	height: 300px;
	background-size: cover;   
	background-position: center; 
	border: 5px solid #FBB319;
	display: inline-block;
	margin: 10px 10px 0px 0px;
	border-radius: 5px;
	text-align:center;
	vertical-align: text-bottom;

}

a.albumThumb span.albumDescription{
	display: inline-block;
	text-align:center;
	vertical-align: text-bottom;
	margin-top: 40%;
	font-weight: 900;
	color:#FFFFFF;
	width:100%;
	background: rgba(238, 170, 24, 1);
}


a.albumThumb span.albumDescription{
	display: inline-block;
	text-align:center;
	vertical-align: text-bottom;
	margin-top: 40%;
	font-weight: 900;
	color:#FFFFFF;
	width:100%;
	background: rgba(238, 170, 24, 1);

	-webkit-transition: opacity 0.3s ease-in-out;
       -moz-transition: opacity 0.3s ease-in-out;
        -ms-transition: opacity 0.3s ease-in-out;
         -o-transition: opacity 0.3s ease-in-out;
            transition: opacity 0.3s ease-in-out;
}

a.albumThumb div.alpha {
	display: inline-block;
	height: 100%;
	width: 100%;
	background: rgba(256, 256, 256, 0.6);

	-webkit-transition: background 0.3s ease-in-out;
       -moz-transition: background 0.3s ease-in-out;
        -ms-transition: background 0.3s ease-in-out;
         -o-transition: background 0.3s ease-in-out;
            transition: background 0.3s ease-in-out;
}

a.albumThumb:hover span.albumDescription {
	opacity:0;
}

a.albumThumb:hover div.alpha {
	background: rgba(256, 256, 256, 0);
}