/***********************************************
Example use only - Delete when done..!
***********************************************/
html,body	{margin:0; padding:0; height:100%;}

/***********************************************
Screen 1200px+
***********************************************/


.mb100			 { margin-bottom:100px;}
.header			 { position:relative; margin: 0; padding: 0; width: 100%; height: 80px;  display: inline-block; background: #fff;}
.logout 		 { width:75px; height:21px; position:absolute; right:20px; top:81px; background: url(../img/logout.png); cursor:pointer; z-index:100;}
.one-edge-shadow { -webkit-box-shadow: 0 8px 6px -6px #999; -moz-box-shadow: 0 8px 6px -6px #999; box-shadow: 0 8px 6px -6px #999; }

.logo				{ display:block; width:400px; margin:0 auto; margin-top:18px;}
.wrapper			{ position:absolute; clear:all; top:0px; width:100%; margin:0; padding:0; background: url(../img/bg.jpg) no-repeat center center fixed;   -webkit-background-size: cover;   -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;  height:auto; min-height: 100%;}
.title				{ width:auto; margin-top: 15px;}
.space				{ margin-top:10px;}
footer				{ margin-top:190px; height:auto; background:#333; width:100%; cursor:default;}
.copyright,.warning	{ display:block;margin:10px 0 10px 5px; font-size:11px; letter-spacing:1px; color:#ddd;}
.warning			{ margin-top:15px;}
.warning a			{ color:#ddd;}


ul.menu-top			{ width:auto; float:right; z-index:100;}
ul.menu-top li		{ display:inline-block; float:left; width:auto; margin:0 0 0 25px; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s;}  
ul.menu-top li:hover{ opacity:0.6;}
#mini-menu 			{ display:none;}

/*** head ***/
.head-news  { position:absolute; width:259px;height:170px; top:0; left:0; background:url(../img/news-head.png) no-repeat top; z-index:100;}
.head-blog  { position:absolute; width:259px;height:170px; top:0; left:0; background:url(../img/blog-head.png) no-repeat top; z-index:100;}
.head-charity  { position:absolute; width:333px;height:169px; top:0; left:0; background:url(../img/charity-head.png) no-repeat top; z-index:100;}
.head-gallery { position:absolute; width:333px;height:169px; top:0; left:0; background:url(../img/gallery-head.png) no-repeat top; z-index:100;}

/*** Jacky ***/
.jacky-news { position:absolute; width:333px;height:546px; top:20px; right:10px; background:url(../img/news.png) no-repeat top;}
.jacky-blog { position:absolute; width:333px;height:546px; top:20px; right:10px; background:url(../img/blog.png) no-repeat top;}
.jacky-charity { position:absolute; width:333px;height:664px; top:20px; left:0px; background:url(../img/charity.png) no-repeat top;}
.jacky-gallery { position:absolute; width:333px;height:664px; top:20px; left:0px; background:url(../img/gallery.png) no-repeat top;}

/*** Login ***/
.jacky-login{ position:absolute; width:400px;height:664px; top:20px; left:0px; background:url(../img/jc_login.png) no-repeat top;}
.login-content	{ position:relative; display:block; margin:0 auto; width:980px; min-height:600px; margin-top:100px;}
.login-box	{margin-left:400px; width:500px; height:600px; padding:0px 0; font-size:12px;}
#lBox 		{ margin-top:0px; float: left; width: 100%; min-height:300px; height:auto; background:#fff; padding:30px 15px 15px 15px; cursor:default; -moz-border-radius: 10px; border-radius: 10px; margin-top:10px}
#lBox h4 { display: block; -webkit-margin-before: 1.33em;  -webkit-margin-after: 1.33em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; font-weight: bold; color:#000;}
.lDiv	{display:block; width:100%; height:40px; }
#lEnter {diplay:block;float:left; width:100%;margin-top:20px;}
#submit{ cursor:pointer;}

#lErrMsg {float: left; width: 280px; background: #FCC8BE; font-size: 9pt; color: #d32626; border: 2px solid #d32626; -moz-border-radius: 10px; border-radius: 10px; margin-top:10px;}
#lErrMsg ul {margin:0; padding:5px; cursor:default;}
#lErrMsg ul li { padding: 1px 0 2px 8px; list-style-type: none;}

li {
display: list-item;
text-align: -webkit-match-parent;
}


.lLabel {float: left; padding: 2pt 5pt 0 0; text-align: right; font-weight: bold; width:140px;} 
.fGreen { font-weight: bold; color: #006666; font-family: "Arial"; padding: 0 0px 0 0; }
.lInput { float: left; padding: 0 5pt 0 0;  text-align: left;}
.forgot { display: block; float: right; width: 150px; letter-spacing: 1px; color: #006666; text-align: right; text-decoration: none; }




/*** News ***/
.content { position:relative; display:block; margin:0 auto; width:980px; min-height:600px;}
.c-content{ position:absolute; top:50px; left:50px; width:580px; height:340px; padding:70px 0 0 70px;  background:rgba(209,211,212,0.7); border:1px solid #888; overflow-y:scroll;}
.c-content h4{font-size:18px; font-weight:bold; letter-spacing:1px; color:#333;}
.c-content p{font-size:14px; width:95%; letter-spacing:1px; cursor:default; line-height:20px;}
.c-content p a{color:#0C6161;}
.c-loading {position:absolute; top:50px; left:50px; width:580px; height:340px; padding:70px 0 0 70px;  background:rgba(255,255,255,1)  url(../img/loader.gif) center center no-repeat; border:1px solid #888; display:none;}
.c-thumb {display:block; width:580px; height:150px; position:absolute; top:400px; left:50px; overflow:hidden;}
.c-slider {position:relative; dispaly:block; margin:0; padding:0; height:auto; width:10000px;}
.c-thumb ul{margin:0; padding:0;}
.c-thumb ul li	{width:186.7px; height:120px; background:rgba(12,97,97,0.8); float:left; display:block; margin:0 10px 0 0; cursor:pointer;
				 transition: opacity 1.35s, transform 0.35s;}
.c-thumb ul li:hover{ background:rgba(12,97,97,1); }
.c-thumb ul li h4 { margin:10px 0 0 6px; font-weight:bolder; font-size:18px;}
.c-thumb ul li p  { margin:5px 6px; font-size:14px;color:#fff;}
.c-control{ width:580px; position:absolute; top:530px; left:50px;}
.c-btn {width:120px; background:#0C6161; display:inline-block; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:13px; cursor:pointer;}
.c-btn:hover{ color: #888;}
#prev {float:left; cursor:pointer; text-align:left; padding:3px; padding-left:8px;}
#next {float:right; cursor:pointer;text-align:right; padding:3px; padding-right:8px;}

.c-content ul, .m-content ul{ margin:0; padding:0;}
.c-content ul li, .m-content ul li{ margin-top:10px; dispaly:block; margin-left:10px;}
.c-content ul li a, .m-content ul li a{ padding:2px 15px 2px 15px; background: #0c6161; text-decoration:none; width:auto; font-size:12px; letter-spacing:1px;}
.c-content ul li a:hover, .m-content ul li a:hover{background:#3b7f7f;}


/*** News (mobile) ***/
.mini 		{ width:95%; min-height:300px; height:auto; margin:0px auto;}
.topbanner  { display:block; width:100%; margin:0 0 20px 0;}
.toptitle	{ display:block; width:35%; margin:0 0 20px 0;}
.m-content	{ width:100%; min-height:300px; height:auto; margin:0px auto; background:rgba(209,211,212,0.7); border:1px solid #888;}
.m-content h4{font-size:15px; font-weight:bold; letter-spacing:1px; color:#333; padding:10px;}
.m-content p{font-size:14px; width:95%; letter-spacing:1px; padding:0 0 0 10px;}
.m-content p a {color:#0C6161;}
.m-control{ width:100%; margin:20px 0 0 0;}
.m-btn {width:33%; background:#0C6161; display:inline-block; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:14px; cursor:pointer;}
.m-btn:hover{color: #888;}
#m-prev {float:left;  text-align:left; padding:10px; padding-left:8px;}
#m-next {float:right; text-align:right; padding:10px; padding-right:8px;}


/*** Blog ***/
.blog-content { position:relative; display:block; margin:0 auto; width:980px; min-height:600px;}
.b-mobile { width:95%; min-height:300px; height:auto; margin:0px auto;}
.b-topbanner { display:block; width:100%; margin:0 0 20px 0;}

.b-loading {position:absolute; top:50px; left:50px; width:633px; height:360px; padding:70px 0 0 70px;  background:rgba(255,255,255,1)  url(../img/loader.gif) center center no-repeat; border:1px solid #888;}
.blog-title {position:absolute; top:50px; left:90px; display:block; padding:10px; padding-right:15px; padding-left:100px; background:#0C6161; cursor:default;}
.blog-title h4{margin:0; padding:0; font-size:15px; letter-spacing:1px;}
.b-main {position:absolute; top:105px; left:50px; width:100%; min-height:360px; height:auto;}
.b-photo {float:left; display:inline-block; width:272px; height:300px; overflow:hidden;}
.b-photo img{width:272px;}
.b-content {display:inline-block; width:350px; height:300px; margin:0 0 0 10px; background:rgba(209,211,212,0.7); border:1px solid #888;cursor:default; overflow-y:scroll;}
.b-content h4{font-size:15px; font-weight:bold; letter-spacing:1px; color:#333; padding:10px;}
.b-content p{font-size:14px; width:95%; letter-spacing:1px; padding:0 0 0 10px;}
.b-control{position:absolute; top:420px; left:50px; width:632px;}
.b-content p a{color:#0C6161;}
a.lnk-btn{background:#0C6161; color:#fff; display:inline-block; text-decoration:none; letter-spacing:2px; margin:3px;  padding:3px;}
a.lnk-btn:hover{background:#333;cursor:pointer;}
#b-prev {float:left;  text-align:left; padding:5px; padding-left:8px;}
#b-next {float:right; text-align:right; padding:5px; padding-right:8px;}

.b-content ul, .m-content ul{ margin:0; padding:0;}
.b-content ul li, .m-content ul li{ margin-top:10px; dispaly:block; margin-left:10px;}
.b-content ul li a, .m-content ul li a{ padding:2px 15px 2px 15px; background: #0c6161; text-decoration:none; width:auto; font-size:12px; letter-spacing:1px; }
.b-content ul li a:hover, .m-content ul li a:hover{background:#3b7f7f;}


/*** Blog (mobile) ***/
.bm-photo {display:block; margin:10px 0 0 10px; width:272px;}



/*** Gallery ***/
.g-content {position:absolute; top:30px; left:50px; width:580px; height:600px; padding:20px 0; }
.g-slider {position:relative; dispaly:block; margin:0; padding:0; height:10000px; width:100%;}
.g-thumb {width:580px; height: 430px; overflow:hidden;}
.g-thumb ul{display:block; width:100%; padding:0; margin:0;}
.g-thumb ul li{float:left; display:inline-block; margin:10px 0 0 10px; width:180px; height:200px; overflow:hidden; cursor:pointer; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s;}
.g-thumb ul li:hover {opacity:0.7;}
.g-thumb ul li .thumb{display:block; width:180px; height:125px; border:5px solid #0C6161; overflow:hidden;}
.g-thumb ul li .thumb img{width:100%;}
.g-thumb ul li span{display:block; width:100%; padding:3px; font-size:13px;}
.g-btn {margin:10px 0; width:160px; background:#0C6161; display:inline-block; color:#fff; font-family:Arial, Helvetica, sans-serif; font-size:13px; cursor:pointer;}
.g-btn:hover{ color: #888;}
#g-prev {float:left; cursor:pointer; text-align:left; padding:3px; padding-left:8px;}
#g-next {float:right; cursor:pointer;text-align:right; padding:3px; padding-right:8px;}
.ch-align {left: 360px;} /* use in Charity &  Gallery */
.text-align{padding: 70px 0 0 30px;}

.gm-content {float:left;position:relative; display:block; width:100%; min-height:300px; margin-bottom:50px;}
ul.gm-thumb {padding:0; margin:0;}
ul.gm-thumb li{background:#0C6161; float:left; display:block; margin:20px 0 0 10px; width:100%; height: auto; cursor:pointer; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s;}
ul.g-thumb li:hover {opacity:0.7;}
ul.gm-thumb li span{float:left; display:inline-block; width:60%; padding:5px; font-size:13px; color:#fff;}
ul.gm-thumb li .thumb{float:left; display:inline-block; width:30%; border:0px solid #0C6161; overflow:hidden;}
ul.gm-thumb li .thumb img{width:100%;}


  
/*** ACTIVIATE ***/
#aSuccess {font-size:12px; letter-spacing:1px;}
#aSuccess a{color:#006666; text-decoration:underline; }


.sj-bg{ position:absolute; 	top:0; display:block; width:100%; height:100%; background:rgba(255,255,255, 0.6); }
.popup{ background:#eee;  height:300px; margin-top:30%;}

.bio p{font-size:14px; line-height:26px; margin-bottom:30px; letter-spacing:4px; }







/*** Light Box ***/
.news-popup { position: relative; background: #FFF; padding: 10px; 	width: auto; max-width: 500px; 	margin: 20px auto;}
.news-popup img{width:100%;}
.news-popup p{ font-size:13px; color:#000;}

table.film tr{background:transparent;}
table.film td{color:#fff; border-top:1px solid #777;}
.relative{ position:relative;}




/***********************************************
Screen Smaller than 1199px
***********************************************/
@media only screen and (min-width:960px) and (max-width: 1199px) {


/*** FILM ***/
.fS {font-size: 20pt;}




}
/***********************************************
Tablet (Smaller than 959px)
***********************************************/

@media only screen and (min-width: 768px) and (max-width: 959px) {

.logo			{ width:350px; margin-top:25px;}
ul.menu-top		{position:absolute; right:0; top:5px;}
ul.menu-top li	{ display:inline-block; position:relative;  margin:0 0 0 5px;}
ul.menu-top li	img{width:80%; display:block; margin:0 auto;}
#mini-menu 		{display:none;}
.logout			{top:80px;}
.content		{margin-left: 30px; margin-top:20px; width:100%;}
.ch-align		{left:30px;}

footer			{margin-top:80px;}

/*** Login ***/
.login-box	{ margin-left:0px; width:auto; height:600px; padding:0px 0; font-size:12px;}
.login-content {margin-top:0px; width:100%;}
#lBox 		{ margin-top:0px; -moz-border-radius:0px; border-radius:0px; margin-top:0px}

/*** BLOG ***/
.blog-content {width:100%; margin:20px 0 0 0;}
 


/*** GALLERY ***/
.g-content {padding-top: 110px; }


}





/***********************************************
Mobile (portrait 300px)
***********************************************/
@media only screen and (max-width:767px) {

.content		{display:none;}
.logo			{width:300px; margin:0 auto; margin-top:25px;}
.menu-top 		{ position:absolute; left:0; top:0; margin-top:85px; float:left;}
ul.menu-top li	{width:auto;}
ul.menu-top li	img{width:60%; display:block; margin:0 auto;}
#mini-menu 		{display:inherit;}
.logout			{top:0;right:5px;}
.content		{margin-left: 0; width:100%;}
.logout			{top:0px;}
.title			{height:60px;}
footer			{margin-top:20px;}
.copyright,.warning{font-size:9px;}

/**** NEWS ****/
.toptitle	{ width:45%;}

/*** BLOG ***/
.blog-content {width:100%; margin:20px 0 0 0;}
.b-control{position:relative; top:0; left:0; width:100%; background:#000;}
a.lnk-btn{background:#0C6161; color:#fff; display:inline-block; text-decoration:none; letter-spacing:2px; margin:3px;  padding:3px;}
a.lnk-btn:hover{background:#333;cursor:pointer}
.b-loading{width:1px; height:1px; position:relative; margin:0; padding:0;}
#mb-content img{width:80%; display:block; margin:5px auto;}


.c-btn{width:80px;}

/*** Login ***/
.login-box	{margin-left:0px; width:auto; height:600px; padding:0px 0; font-size:12px;}
.login-content {margin-top:10px; width:100%;}
.slogo {width:100%;}
#lBox 		{ margin-top:0px; -moz-border-radius:0px; border-radius:0px; margin-top:0px}
}






/***********************************************
Mobile (landscape 420px)
***********************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.logo			{width:400px; margin:0 auto; margin-top:25px;}	
.logout			{top:0px;}
.toptitle	{ width:30%;}

/*** BLOG ***/

.blog-content {margin: 20px 0 0 0;}
.b-control{position:relative; top:0; left:0; width:100%; background:#000;}
a.lnk-btn{background:#0C6161; color:#fff; display:inline-block; text-decoration:none; letter-spacing:2px; margin:3px;  padding:3px;}
a.lnk-btn:hover{background:#333;cursor:pointer}
.c-btn{width:80px;}
.b-loading{width:1px; height:1px; position:relative; margin:0; padding:0;}
#mb-content img{width:auto;}



/*** Login ***/
.login-content {margin-top:10px; width:100%;}
.slogo {width:380px;}
	
	
}