* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

html, body {
height:100%;
width:100%;
}

body {
font:14px/1.2em 'Droid Sans', "微軟正黑體", "Microsoft JhengHei", sans-serif;
}

a, a:visited {
text-decoration:none;
color:#252122;
}

input[type="button"], input[type="submit"] {
background-color:#fcfcfc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding:5px;
}

input[type="text"], input[type="password"] {
background: -moz-linear-gradient(center top , #FFFFFF,  #EEEEEE 1px, #FFFFFF 20px);
background: -webkit-gradient(linear, left top, left 20, from(#FFFFFF), color-stop(5%, #EEEEEE) to(#FFFFFF));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBFBFB', endColorstr='#FFFFFF');
-moz-box-shadow: 0 0 2px #DDDDDD;
-webkit-box-shadow: 0 0 2px #DDDDDD;
box-shadow: 0 0 2px #DDDDDD;
border-radius:0.4em;
-webkit-appearance:none;
border:solid 1px #ddd;
padding:0.5em;
}

input[type="text"]:hover {
border:1px solid #cccccc;
}

input[type="text"]:focus, input[type="password"]:focus {
box-shadow: 0px 0px 2px 2px #c94663;
}

#wrapper {
height:100%;
position:relative;
}

#sidebar {
background-color:#364050;
background-image:url('images/bg1.png');
color:#929da4;
text-shadow:-1px -1px 0px rgba(0,0,0,0.5);
width:224px;
position:fixed;
left:0;
top:0;
height:100%;
padding:50px 20px 0 20px;
}

#title h2 {
font-size:2em;
font-weight:bold;
text-align:center;
color:#fff;
padding:0 0 12px 0;
margin:0;
}

#title h3 {
font-size:1.8em;
font-weight:bold;
text-align:center;
color:#fff;
padding:0 0 20px 0;
margin:0 0 10px 0;
border-bottom:solid 1px rgba(0,0,0,0.25);
box-shadow:inset 0px -1px 0px 0px rgba(255,255,255,0.075);
}

#searchform input[type='text'], #searchform input[type='submit'] {
width:100%;
}

.topbottomborder {
padding:15px 0;
margin:10px 0;
border-top:solid 1px rgba(0,0,0,0.25);
border-bottom:solid 1px rgba(0,0,0,0.25);
box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,0.075), inset 0px -1px 0px 0px rgba(255,255,255,0.075);
}

.underline {
text-decoration:underline;
}

.redtext {
color:#ff0000;
}

.hidden,
.hide {
display:none;
}

#sidebar h3 {
font-size:1.2em;
font-weight:bold;
color:#fff;
margin-bottom:10px;
}

#main {
margin-left:224px;
background: #f7f7f7 url('images/bg2.png');
min-height:100%;
padding:40px 0px 20px 40px;
/*
-moz-box-sizing:content-box;
-webkit-box-sizing:content-box;
-o-box-sizing:content-box;
-ms-box-sizing:content-box;
box-sizing:content-box;
*/
}

#main  .page {
background-color:#e53359;
color:#fff;
font-size:1.4em;
text-align:center;
padding:20px;
}

#main .poll {
height:300px;
}

#main .image {
width:251px;
margin:0 20px 20px 0;
text-align:center;
float:left;
}

#main .image a {
color:#252122;
}

#main .image img {
width:100%;
display:block;
margin:0;
padding:0;
}

#main .image div {
background-color:#fff;
}

#main .image p {
text-align:center;
padding:20px;
background-color:#fff;
font-size:1.1em;
font-weight:bold;
}

#main .image span {
text-align:right;
display:block;
font-size:0.9em;
margin: 0 5px 5px 0;
}

#main .image span a {
color:#555;
}

.title {
border-top:solid 1px #ccc;
position: relative;
text-align:center;
margin:0 20px 20px 0;
}

.title h1 {
font-size:2em;
color:#252122;
font-weight:700;
margin-bottom:40px;
top:-0.35em;
position: relative;
background: #f7f7f7 url('images/bg2.png');
display: inline;
padding: 0 1em 0 1em;
}

.title h2 {
font-size:1.6em;
color:#666;
font-weight:300;
margin:20px 0 40px 0;
}

.clear {
clear:both;
}

.textleft {
text-align:left!important;
}
/*
#announcement {
margin-bottom:40px;
}

#announcement span {
display:inline-block;
}

#announcement .date {
width:100px;
}
*/
.longbox {
width:522px!important;
}

.fullbox {
width:99%!important;
margin-right:40px!important;
}

#menu {
list-style:none;
}

#menu li a {
font-weight: 700;
color: #fff;
-moz-transition: background-color .25s ease-in-out, color .25s ease-in-out;
-webkit-transition: background-color .25s ease-in-out, color .25s ease-in-out;
-o-transition: background-color .25s ease-in-out, color .25s ease-in-out;
-ms-transition: background-color .25s ease-in-out, color .25s ease-in-out;
transition: background-color .25s ease-in-out, color .25s ease-in-out;
display: block;
padding: 0.4em 1em 0.4em 1em;
text-decoration: none;
border-radius: 0.4em;
outline: 0;
}

#menu li a:hover {
background-color: rgba(0,0,0,0.15);
box-shadow: 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 0.25em 0 rgba(0,0,0,0.25);
}

#loading {
text-align:center;
padding:20px 0;
width:90%;
}

#fullscreenloading {
padding-top:25%;
text-align:center;
}

#hottag {
list-style:none;
}

#hottag li {
float:left;
margin-right:5px;
}

#hottag li a {
color:#ddd;
}

#viewimage {
display:none;
text-align:center;
padding-top:2%;
margin-left:224px;
min-height:100%;
background: #f7f7f7 url('images/bg2.png');
}

#viewimage .loading {

}

#viewimage .notready {
display:none;
background-color:#fff;
padding:20px;
font-size:1.2em;
margin:20px;
}

#viewimage .info {
display:none;
background-color:#fff;
display:inline-block;
margin:0 auto;
position:relative;
max-width:800px;
}

#viewimage .info .general {
padding:20px;
}

#viewimage .info .extra {
padding:20px;
display:none;
text-align:left;
border-top:1px solid #000;
}

#viewimage .info .extra h2 {
font-size:1.2em;
font-weight:600;
margin-bottom:10px;
}

#viewimage h1 {
font-size:1.6em;
font-weight:bold;
margin-bottom:20px;
}

#viewimage p > input[type="text"] {
width:100%;
}

.moreinfo {
margin:10px 0;
}

#imagetag a {
font-size:0.9em;
color:#555;
}

#imageuploader {
cursor:pointer;
}

#closeviewimage {
font-family:'Comic Sans MS';
font-weight:900;
font-size:2em;
position:absolute;
display:block;
top:10px;
right:10px;
color:#fff;
text-shadow:#000000 1px 1px 1px;
}

.whiteboard {
background-color:#fff;
padding:5% 0;
margin-right:20px;
text-align:center;
font-size:1.8em;
}

#backtohome {
float:left;
margin-top:-80px;
}

#middlemsg {
margin-top:10%;
}

#fbbox {
height:300px;
overflow:hidden;
}

#fbbox iframe {
position:relative;
}

#edittag {
vertical-align:middle;
padding-bottom:5px;
}

#extrainfo {
position:absolute;
width:5.5em;
/*overflow:hidden;*/
background-color:#fff;
right:0;
top:20%;
padding:1.5em 1em 1.5em 1em;
text-align:center;
border-top-left-radius:0.4em;
border-bottom-left-radius:0.4em;
box-shadow:0.25em 0 0 0 #fbfbfb, 0 0 0.25em 0em rgba(0,0,0,0.25);
}

#tagmanager {
margin-bottom:20px;
}

#tagmanager li {
display:inline-block;
margin-right:20px;
vertical-align:middle;
}

#tagmanager li a {
vertical-align:middle;
}

#tagmanager input {
padding:0;
margin:0;
}

#tagmanager input[type='text'] {
width:100px;
border:0;
border-bottom:1px solid #555;
}

#taglog li {
margin-bottom:10px;
}

#fbcomment {
text-align:center;
max-height:50%;
}

#otherenquiry {
text-align:center;
}

#otherenquiry input, #otherenquiry textarea {
width:90%;
max-width:500px;
}

#otherenquiry textarea {
height:100px;
}

#uploadDiv {
border:1px solid #555;
padding:20px;
margin-right:20px;
text-align:center;
float:left;
width:60%;
height:143px;
box-shadow: inset 1px 1px 0px 0px rgba(0,0,0,0.1), inset -1px -1px 0px 0px rgba(0,0,0,0.1);
}

#uploadDiv input {
display:inline-block;
width:50%;
}

.iamabox {
	border:1px solid #555;
	box-shadow: inset 1px 1px 0px 0px rgba(0,0,0,0.1), inset -1px -1px 0px 0px rgba(0,0,0,0.1);
	padding:1em;
	width:90%;
}

#defaultSettings {
border:1px solid #555;
margin-right:20px;
float:left;
width:34%;
height:143px;
padding:20px;
text-align:center;
box-shadow: inset 1px 1px 0px 0px rgba(0,0,0,0.1), inset -1px -1px 0px 0px rgba(0,0,0,0.1);
}

#defaultSettings input[type='text'] {
width:90%;
}

#uploadDiv h3, #defaultSettings h3 {
text-align:center;
font-size:1.2em;
padding-bottom:10px;
}

#captcha {
text-align:center;
overflow:hidden;
width:100%;
}

#captcha > div {
display:inline-block;
}

#msg2oldbrowsers {
display:none;
text-align:right;
}

#extrainfo > div {
margin-bottom:10px;
}

#taglist li {
margin:0 20px 20px 0;
float:left;
}

#fb-like {
height:64px;
}

#login {
display:none;
text-align:center;
padding:5% 0 0 20px;
margin-left:224px;
min-height:100%;
background: #f7f7f7 url('images/bg2.png');
}

#loginform, #registerform {
background-color:#fff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
width:500px;
padding:80px 20px;
margin:0 auto 40px auto;
/*box-shadow:inset 0px 3px 3px rgba(0,0,0,0.3), inset 0px 3px 3px rgba(0,0,0,0.3);*/
-moz-box-shadow:inset 0 0 3px #000000;
-webkit-box-shadow:inset 0 0 3px #000000;
box-shadow:inset 0 0 3px #000000;
}

#loginform form, #registerform form {
line-height:2.5em;
}

#loginform input, #registerform input {
width:200px;
}

#resultDiv {
padding:20px 0;
}

#resultDiv .left {
float:left;
width:50%;
}

#resultDiv .right {
float:right;
width:50%;
}

#resultDiv .center {
margin:0 auto;
width:50%;
}

#resultDiv input[type='text'] {
width:80%;
}

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

.uploadbox img {
max-width:100%;
}

.uploadbox div {
padding:20px;
background-color:#ffffff;
}

#newimageform {
text-align:center;
}

#newimageform input[type='submit'] {
width:80%;
font-size:1.2em;
display:none;
}

.cpsubmit {
width:95%;
font-size:1.2em;
}

#errorDiv, #notsupport {
display:none;
border:1px solid #D66F7F;
border-left:20px solid #D66F7F;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
text-align:center;
font-size:1.1em;
margin:20px 20px 20px 0;
padding:20px;
}

.shorttext {
width:30px;
}

.taggroupmember {
display:inline-block;
width:200px;
margin:0 10px 10px 0;
}

#taggroupmenu {
position:fixed;
bottom:0;
right:0;
background-color:#fff;
padding:10px;
}

.mobile {
display:none;
}

#mobileheader {
width:100%;
background:#364050 url('images/bg1.png');
color:#929da4;
padding:15px 10px 0 10px;
text-align:center;
}

#mobileheader img {
float:right;
width:32px;
}

#mobileheader h2 {
font-size:1.2em;
font-weight:bold;
color:#fff;
padding:5px 0 20px 0;
display:inline-block;
}

#mobilesearch {
display:none;
background: #f7f7f7 url('images/bg2.png');
padding:10px 10px 20px 10px;
line-height:40px;
}

#mobilesearch input[type='text'], #mobilesearch input[type='submit'] {
width:100%;
}

#mobilesearch label {
font-size:1.3em;
margin-right:20px;
}

#mobilemenu {
padding:10px;
background: #f7f7f7 url('images/bg2.png');
}

#mobilemenu select {
width:100%;
}

#back2up {
position:fixed;
width:50px;
height:50px;
left:0;
bottom:50px;
background:rgba(255,255,255,0.5) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////AAAAVcLTfgAAAAJ0Uk5T/wDltzBKAAAARUlEQVR42mJgJAAYBqECBgbKFDCAAfkKGOCAPAUMKIB0BQwYgDQFMCF0mngFsCBGSGBxAwEF1ImLwaGA8jQ5SLMeQIABAJ2qAz3xXIkuAAAAAElFTkSuQmCC') no-repeat center center;
}

#loadingnextbtn input {
width:100%;
}

/********************** width = 1280px ***********************/
@media (max-width: 1280px) {
	#main .image {
	width:221px;
	}
	.longbox {
	width:462px!important;
	}
}


@media (min-width: 320px) and (max-width: 360px) {
	.desktop {
	display:none;
	}
	#main, #viewimage, #login {
	margin-left:0;
	padding:20px;
	}
	#main .image, .longbox {
	width:100%!important;
	}
	.mobile {
	display:block;
	}
	#viewimage .info {
	width:100%;
	}
	#viewimagelink {
	max-width:100%;
	}
	#fbbox, #fbbox iframe {
	display:none;
	}
	#extrainfo {
	display:none;
	}
	#loginform, #registerform {
	background-color:#fff;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;
	width:100%;
	padding:10px;
	-moz-box-shadow:inset 0 0 3px #000000;
	-webkit-box-shadow:inset 0 0 3px #000000;
	box-shadow:inset 0 0 3px #000000;
	}
	#defaultSettings, #uploadDiv {
	width:100%;
	}

	 #resultDiv .left {
float:none;
width:100%;
}

#resultDiv .right {
float:none;
width:100%;
}

}
