@charset "utf-8";
/* CSS Document */

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

/* z-index */
#MainDiv .TLCols2 .CreateTC{ z-index:1; }

body { 
	overflow-y:auto; overflow-x:auto; color:#333333; background-color: #666666;
	font:13px/1.231 'Open Sans', sans-serif, Arial,helvetica,sans-serif,微軟正黑體; *font-size:small; /* for IE */ *font:x-small; /* for IE in quirks mode */ 
}

a { outline:none; }
a:link    { text-decoration:none; color:#333333; }
a:visited { text-decoration:none; color:#333333; }
a:hover   { text-decoration:none; color:#333333; }

select {
    border: 1px solid #222222;
    padding: 3px;
    border-radius: 3px;
    outline: none;
}

textarea { resize:vertical; }

input[type=checkbox].css-checkbox {
	display:none;
}

input[type=checkbox].css-checkbox + label.css-label {
	padding-left:25px;
	height:20px; 
	display:inline-block;
	line-height:20px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:20px;
	vertical-align:middle;
	cursor:pointer;

}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -20px;
}
						
label.css-label {
	background-image:url(../images/csscheckbox.png);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.clearFix { height:0px; line-height:0px; clear:both; overflow:hidden; }
.BdrRadius{ -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }

#MainBdr{ background-color:#333333; padding:0px 35px; margin:-10px auto; max-width:1020px; }

#MainDiv{ background-color:#f3f3f3; position:relative; padding:20px 45px; }
#MainDiv .AiiwyLogo{ background-image:url(../images/logo_vmyme.png) ; width:182px; height:121px; float:left; }
#MainDiv .TopMenu{ margin-top:65px; float:right; font-weight:600; }
#MainDiv .TopMenu a{ margin:0px 10px; }
#MainDiv .TopMenu a:hover{ text-decoration:underline; }

#MainDiv #CopyRight{ text-align:right; font-size:93%; margin-top:50px; color:#999999; }

.Btn01 { color:#ffffff; background-color:#0b7ad0; height:35px; line-height:35px; text-align:center; font-weight:600; }
.Btn01:hover { background-color:#43bfed; cursor:pointer; }

.Btn02 { color:#ffffff; background-color:#aaa; height:35px; line-height:35px; text-align:center; font-weight:600; }
.Btn02:hover { background-color:#666; cursor:pointer }

.Btn01.CreateTC, .Btn01.loadmore{ position:relative; top:10px; width:130px; overflow: hidden; margin: 0px auto;}

.TcIcon01 { background:url(../images/icon.png) -8px -198px; width:36px; height:80px; }
.TcIcon02 { background:url(../images/icon.png) -61px -229px; width:23px; height:48px; }

.LftDiv{ float:left; }
.RgtDiv{ float:right; width:60px; }

#sLang { border: 0px; background-color: #f3f3f3; }

#sLang option{ background-color: #fff; }

#timeline .HrLine{ border-bottom:1px solid #d8d8d8; margin:5px 0px 5px 0px; }

#timeline .NewUserDiv{ margin:30px 0px 0px 17px;}
#timeline .NewUserDiv .TcIcon01{ float:left; }
#timeline .NewUserDiv .Btn01{ float:left; width:260px;  margin:20px 0 0 15px; }

#progressbar, #progressDesc { margin-top: 5px; }

#progressbar .ui-progressbar-value { background-color: #ccc; }

#progressbar .ui-progressbar {
  position: relative;
  height:2em;
}

#progressbar[aria-valuenow="0"] #pbarCaption {margin-top:0px;}

#progressbar #pbarCaption {
  position:static;
  margin-top:-2em;
  text-align:center;
  display:block;
  line-height:2em;
  padding-left:10px;
  padding-right:10px;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

#config {
    margin-bottom: 20px;
}
#timeline.demo5 {
    width: 600px;
    margin: 0px auto;
}
#yrmenu {
    position:absolute;
    top: 150px;
	right: 30px;
/*	background-color:#f3f3f3;*/
}
#yrmenu.scrolling {
    position:fixed;
    top:0px;
}

#loadmore.loading {
    cursor: default;
    color:  #AAAAAA;
    text-shadow: 0px 1px 1px #FFFFFF;
    box-shadow: none;
    background-size: 40px 40px;
    background-color: #DEDEDE;
    background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
    -webkit-animation: loading 1s linear infinite;
       -moz-animation: loading 1s linear infinite;
        -ms-animation: loading 1s linear infinite;
         -o-animation: loading 1s linear infinite;
            animation: loading 1s linear infinite;
}
.TLCols2 {
	width: 850px;
	margin: 0px auto;
}

#createTCPart2, #createTCPart2 #deliver {
	width: 100%;
}

#createTCPart2 #deliver tr .left {
	vertical-align: middle;
	text-align: left;
	padding: 0px 0px 0px -20px;
}

#createTCPart2 #deliver tr .right {
	vertical-align: middle;
	text-align: left;
	
}

.title {
	text-align: center;	
}

#timelineDualTop {
	margin-bottom: -10px;
}

#fb-friend-container {
	width: 375px;
	margin-left: 30px;
}

.fb-friend-an {    
	width:425px; 
	height:31px; 
	position:relative; 
	top:14px;	
	left: 30px;
	float: right;
}

#fb-login-button span {
	vertical-align: middle;
	width: 200px;
	height: 56px;
	margin-top: -25px;
	margin-left: 10px;
	margin-bottom: 10px;
}

#fb-friend {	
	background: #ffffff;
	width: 375px;
	border: 1px solid #999999;	
}

.fb-facepile {
	top: -25px;
	left: 15px;
}

.fb-like {
	margin-top: 10px;
	#position: fixed !important;
	z-index: 999;
}

#createTCForm {
	border:1px solid #aaaaaa; 
	width:521px; 
	background-color:#ffffff; 
	padding: 25px 35px 35px 35px;
	margin-left:auto;
	margin-right:auto;	
	margin-top: 40px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#createTCForm #create_tc_form .row{ margin-right:0px; margin-left:0px; }

#frmHeader{text-align: center; padding-bottom: 10px; line-height: 25px; font-weight: 600; font-size: 131%; color: #82c423; border-bottom: 1px solid #82c423; margin-bottom: 20px; }
#createTCForm .row{ margin-bottom:15px; }
#createTCForm .row.image .Cols1, #createTCForm .row.image .Cols2,
#createTCForm .row.channel .Cols1, #createTCForm .row.channel .Cols2{ line-height:35px; }
#createTCForm .row.channel input{ position:relative; top:-10px; margin-right:10px;}
#createTCForm .row.channel img{ margin-right:20px; }
#createTCForm .row.date span{ margin:0px 5px; font-size:116%; font-weight:600; }
#createTCForm .row.date .Cols3{float: auto;}
#createTCForm .row.time .Cols3{ margin-left:24px; }
#createTCForm .row.time .Cols3 .select{ margin-right:10px; }

#createTCForm .row.seal { margin-top:10px;}
#createTCForm .row.seal .Cols1, #createTCForm .row.seal .Cols2{ color:#0b7ad0; line-height:48px; }
#createTCForm .row.seal .Cols3 div{ display: table-cell; vertical-align:middle; }
#createTCForm .row.seal .Cols3 input{ margin-right:10px;}
#createTCForm .row.seal .Cols3 .text{ width:340px; padding-left:10px; height:48px; color:#0b7ad0; }

#createTCForm .Cols1, #createTCForm .Cols2{ float:left; line-height:25px; font-weight:600; font-size:108%; }
#createTCForm .Cols1{ width:90px; }
#createTCForm .Cols2{ width:20px; }
#createTCForm .Cols3{ float:left; position:relative; }

#createTCForm .Cols3 .subject{ width:398px; border:#bbbbbb 1px solid; height:23px; line-height:23px; padding:0px 5px; }
#createTCForm .Cols3 .message{ width:398px; height:77px; border:#bbbbbb 1px solid; line-height:15px; padding:0px 5px; resize:none; }
#createTCForm .Cols3 .InputDate{ width:90px; border:#bbbbbb 1px solid; height:23px; line-height:23px; padding:0px 5px; text-align:center; }
#createTCForm .Cols3 .radio{ position:relative; top:-2px; margin-right:8px;}
#createTCForm .Cols3 .select{ height:25px; line-height:25px; width:105px; padding-left:5px; border:1px solid #bbbbbb; }
#createTCForm .ImageBr{ border:1px solid #bbbbbb; padding:3px; float:left; margin-right:10px; }
#createTCForm .ImageBr img { max-height:92px; max-width:115px; float:left; }



#albumsListDialog { padding: 10px; }

#albumsList #albumsListDialog #albumTitle { font-weight: 600; font-size: 108%; line-height: 35px; padding-left: 0px; padding: 5px 0px 10px 0px; }

.Btn02.loadAlbum, .Btn02.upload, .Btn02.deleted, .Btn02.replace , .Btn02.back{  width: 100px; margin-right: 10px; }
.Btn02.back { position: absolute; left: 15px; top: 10px; z-index:9999; }
.Btn02.loadAlbum { margin-bottom:10px; }
.Btn02.cancel, .Btn02.submit { width:125px; }

#createTCForm .Btn02.cancel{ float:left; margin: 10px 0 0 125px; }
#createTCForm .Btn02.submit{ float:right; margin: 10px 125px 0 0; }

.fltLft   { float:left; }
.fltRgt   { float:right; }

.BIcon img{ background-image:url(../images/icon.png); width:35px; height:35px; }
.BIcon .IC01{ background-position:-10px -133px;}
.BIcon .IC02{ background-position:-60px -133px;}
.BIcon .IC03{ background-position:-110px -133px;}






.tags {
  zoom: 1;
  margin-left: -50px;
  margin-top: -7px;
  height: 10px;
}
.tags:before, .tags:after {
  content: '';
  display: table;
}
.tags:after {
  clear: both;
}
.tags li {
  position: relative;
  float: left;
  margin: 0 0 0px 12px;
  list-style-type: none;
}
.tags li:active {
  margin-top: 1px;
  margin-bottom: 7px;
}
.tags li:after {
  content: '';
  z-index: 2;
  position: absolute;
  top: 10px;
  right: 8px;
  width: 6px;
  height: 6px;
  opacity: .95;
  background: #eb6b22;
  border-radius: 3px;
  -webkit-box-shadow: inset 1px 0 #99400e;
  box-shadow: inset 1px 0 #99400e;
}
.tags a, .tags span {
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.tags a {
  height: 26px;
  line-height: 23px;
  padding: 0 18px 0 8px;
  font-size: 12px;
  color: #555;
  text-decoration: none;
  text-shadow: 0 1px white;
  background: #fafafa;
  border-width: 1px;
  border-style: solid;
  border-color: #dadada #d2d2d2 #c5c5c5;
  border-radius: 3px;
  background-image: -webkit-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -moz-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: -o-linear-gradient(top, #fcfcfc, #f0f0f0);
  background-image: linear-gradient(to bottom, #fcfcfc, #f0f0f0);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tags a:hover span {
  padding: 0 7px 0 6px;
  max-width: 40px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.tags span {
  position: absolute;
  top: 1px;
  left: 100%;
  z-index: 2;
  overflow: hidden;
  max-width: 0;
  height: 24px;
  line-height: 21px;
  padding: 0 0 0 2px;
  color: white;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
  background: #eb6b22;
  border: 1px solid;
  border-color: #d15813 #c85412 #bf5011;
  border-radius: 0 2px 2px 0;
  opacity: .95;
  background-image: -webkit-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -moz-linear-gradient(top, #ed7b39, #df5e14);
  background-image: -o-linear-gradient(top, #ed7b39, #df5e14);
  background-image: linear-gradient(to bottom, #ed7b39, #df5e14);
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  -webkit-transition-property: padding, max-width;
  -moz-transition-property: padding, max-width;
  -o-transition-property: padding, max-width;
  transition-property: padding, max-width;
}

.green li:after {
  background: #65bb34;
  -webkit-box-shadow: inset 1px 0 #3a6b1e;
  box-shadow: inset 1px 0 #3a6b1e;
}
.green span {
  background: #65bb34;
  border-color: #549b2b #4f9329 #4b8b27;
  background-image: -webkit-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -moz-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: -o-linear-gradient(top, #71ca3f, #5aa72e);
  background-image: linear-gradient(to bottom, #71ca3f, #5aa72e);
}

.blue li:after {
  background: #56a3d5;
  -webkit-box-shadow: inset 1px 0 #276f9e;
  box-shadow: inset 1px 0 #276f9e;
}
.blue span {
  background: #56a3d5;
  border-color: #3591cd #318cc7 #2f86be;
  background-image: -webkit-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -moz-linear-gradient(top, #6aaeda, #4298d0);
  background-image: -o-linear-gradient(top, #6aaeda, #4298d0);
  background-image: linear-gradient(to bottom, #6aaeda, #4298d0);
}













#yrmenu ul.fbTimelineScrubber { list-style-type: none; padding:0px; margin:0px; }
#yrmenu ul.fbTimelineScrubber a{ border-left: 5px solid #1c528e; color: #1c528e; font-size:108%; font-weight:600; letter-spacing:2px; display: block; outline: none; padding: 4px 0 4px 10px;}
#yrmenu ul.fbTimelineScrubber a:hover{ border-left: 5px solid #497ab2; color: #497ab2; text-decoration:underline; }
#yrmenu ul.fbTimelineScrubber li { margin-bottom:2px;}
#yrmenu ul.fbTimelineScrubber li.selected a { color:#1c528e; border-left: 5px solid #1c528e; }

.stick {
    position:fixed;
    top:0px;
}


#createTCForm form table tr td {
	vertical-align: top;
	padding: 10px 5px 0px 10px;
	text-align: left;
	font-size: 0.928571429rem;
	line-height: 1.84615;
}

tr.trImgPreview, td.tdImgPreview , tr.trCreateTCPart2, td.tdCreateTCPart2,
tr.trCreateTCBtns, td.tdCreateTCBtns {
	padding: 0px 0px 0px 10px !important;	
}

div.imgPreviewContainer {    
	overflow:hidden;
	max-height: 120px;
	max-width: 372px;
}

div.albImgContainer {    
	overflow: hidden; 
	max-height: 200px; 
	max-width: 200px; 
	float: left;
	border:2px solid #ffffff;
	padding:2px 2px;	
	border-radius:5px;
}

#deliver {
	margin-left: -10px;
}

#tcFormImageOverlay {
    background-image: url('../images/img_delete.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;    
	width: 20px;
    height: 20px;    
    border-radius: 15px;
    z-index: 1;    
    position: absolute;
    top: 3em;
	left: 90%;
    display: none;
}

#tcDeleteOverlay {
    background-image: url('../images/remove.png');
    background-repeat: no-repeat;
    background-position: 50% 50%;    
	width: 20px;
    height: 20px;    
    border-radius: 15px;
    z-index: 400;    
    position: relative;
    top: -565px;
    right: -535px;
    display: none;
}

#albumsList{
	display: none; 
	cursor: default;
	height: 400px;
	overflow: auto;
}

#albumsList #albumsListDialog #albumTitle{ font-weight: 600; font-size: 108%; line-height:35px; padding-left:0px; }

#ReadMoreDiv{
	display: none;
	height: 100%;
	overflow: auto;
}

#ReadMoreDiv #readSeperator{ margin:13px 17px;}

#ReadMoreDiv #readTitle { font-weight: 600; font-size: 108%; line-height:16px; padding-left:0px; }

#ReadMoreDiv #readCreateTS{ font-weight: 600; font-size: 108%; line-height:16px; padding-top:0px; padding-right:0px; }
#ReadMoreDiv #readimg{ margin-top:0px; margin-bottom:15px; }
#ReadMoreDiv #readimg img{ max-width:760px; }
#ReadMoreDiv #readmsg{ text-align: left; padding:0px 15px 5px 15px; }

.CloseBtnDiv{ position:absolute; right:5px; top:2px; z-index:10;}
.CloseBtn{ background:url(../images/icon.png) -150px -11px; width:29px; height:29px; }
.CloseBtn:hover{ background-position:-184px -11px; }

.Globalpage{ padding:40px 60px; margin:60px 70px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size:108%; line-height:18px; color:#ffffff; }
.Globalpage .PageTitle{ font-size:153.9%; padding-bottom:20px; }

#AboutUs{ background-color:#5eb8cb; }
#AboutUs.Globalpage .Btn02.BackBtn { background-color:#ffffff; width:145px; color:#5eb8cb; margin:30px auto 0px auto; font-size:93%; }
#AboutUs.Globalpage .Btn02.BackBtn:hover{ background-color:#e4faff; }


@-webkit-keyframes loading {
    from {background-position: 0px 0px;}
    to {background-position: 40px 0px;}
}
@-moz-keyframes loading {
    from {background-position: 0px 0px;}
    to {background-position: 40px 0px;}
}
@-ms-keyframes loading {
    from {background-position: 0px 0px;}
    to {background-position: 40px 0px;}
}
@-o-keyframes loading {
    from {background-position: 0px 0px;}
    to {background-position: 40px 0px;}
}
@keyframes loading {
    from {background-position: 0px 0px;}
    to {background-position: 40px 0px;}
}
@media screen and (max-width: 600px) {
    #timeline.demo5 {
        width: 100%;
    }
}
@media screen and (orientation:portrait) {
    #timeline.demo5 {
        width: 100%;
    }
}


/* #### Desktops #### */
@media screen and (min-width: 1024px){
  #ReadMoreDiv #readMsgDialog { max-height: 400px; }
    
  Btn01.loadmore {
    top: -10px;
  }
    
    
}