/* --------------------------------------------------------
	IMPORTS
   -------------------------------------------------------- */

	@import 'header.css';
	@import 'nav.css';
	@import 'footer.css';


/* --------------------------------------------------------
	RESETS
   -------------------------------------------------------- */

	html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, img, strong, b, u, i, ol, ul, li, form, label, table, caption, 

article, aside, canvas, footer, header, hgroup, menu, nav, output, section, time, audio, video {
		margin: 0;
		padding: 0;
		border: none;
	}
	
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block;
	}
	
	a {
		text-decoration: none;
		color: #006FB8;
		color: #107FC9;
		color: #1093c9;
		color: #007FC9;
		color: #107FC9;
		cursor:pointer;
	}
	
	a:visited {
		/*color: #75A8C5; /* updated by stella 26082014 */
	}
	
	a:hover {
		text-decoration: underline;
	}
	
	/* Added on 20130430 */
	a img {
	    cursor: pointer;
	}
	
	ul, ul li {
		list-style: none;
		margin: 0;
		padding: 0;
	}

/* --------------------------------------------------------
	FONT RESETS
   -------------------------------------------------------- */

	body {
		color: #333;
		/*font-family: 'Open Sans', Arial, Tahoma, Helvetica, sans-serif; added by syazwin 20140731*/ /*updated by stella 

26082014 */
		font-family:'Roboto', Arial, Helvetiva, Tahoma, sans-serif;
	}
	
	h1 {
		/*font-family: Arial, Tahoma, Helvetica, sans-serif;*/
		font-family:'Roboto', Arial, Helvetiva, Tahoma, sans-serif;
		font-weight: normal;
	}	
	
	h2, h3, h4, h5, h6 {
		font-family: "Droid Serif", Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
		font-weight: normal;
	}
	
	p, ul, li {
		/*font-family:'Open Sans',  Arial, Tahoma, Helvetica, sans-serif; updated by stella 26082014 */
		font-family:'Roboto', Arial, Helvetiva, Tahoma, sans-serif;
		color: #333;
		color: #666;
	}
	
	h1 a:hover {
		text-decoration: none;
	}


/*	--------------------------------------------------
    :: THE GRID
	-------------------------------------------------- */
	
	

	.container {
		overflow: hidden;
	}
		
	.row {
		width: 100%;
		max-width: 960px;
		margin: 0 auto;
		overflow: hidden;
		padding: 0 21px;
		background: #FFF;
	}
	
	
	.column,
	.columns {
		margin: 0 10px; float: left; min-height: 1px; position: relative;
	}
	 
	.row .one.columns 		{ width: 60px 	/* 6.25%   */;}
	.row .two.columns 		{ width: 140px	/* 14.583% */;}
	.row .three.columns 	{ width: 220px	/* 22.916% */;}
	.row .four.columns 		{ width: 300px	/* 31.25%  */;}
	.row .five.columns 		{ width: 380px	/* 39.583% */;} 
	.row .six.columns 		{ width: 460px	/* 47.916% */;}
	.row .seven.columns 	{ width: 540px	/* 56.25%  */;}
	.row .eight.columns 	{ width: 620px	/* 64.583% */;}
	.row .nine.columns 		{ width: 700px	/* 72.916% */;}
	.row .ten.columns 		{ width: 780px	/* 81.25%  */;}
	.row .eleven.columns 	{ width: 860px	/* 89.583% */;}
	.row .twelve.columns 	{ width: 940px	/* 97.916% */;}
	
	.row .offset-by-one 	{ margin-left: 80px  /* 9.375%  */; }
	.row .offset-by-two 	{ margin-left: 160px /* 17.708% */; }
	.row .offset-by-three 	{ margin-left: 240px /* 26.041% */; }
	.row .offset-by-four 	{ margin-left: 320px /* 34.375% */; }
	.row .offset-by-five 	{ margin-left: 400px /* 42.708% */; }
	.row .offset-by-six 	{ margin-left: 480px /* 51.041% */; }
	.row .offset-by-seven 	{ margin-left: 560px /* 59.375% */; }
	.row .offset-by-eight 	{ margin-left: 640px /* 67.708% */; }
	.row .offset-by-nine 	{ margin-left: 720px /* 76.041% */; }
	.row .offset-by-ten 	{ margin-left: 800px /* 84.375% */; }
	.row .offset-by-eleven 	{ margin-left: 880px /* 92.708% */; }

/* --------------------------------------------------------
	STYLE RESETS
   -------------------------------------------------------- */

	body {
		/*background: #77776E;
		background: url('/Themes/TSOL/img/page_bg.png');*/
        background: #f2f2f2;

	}
	
	.content {
		margin-bottom: 40px;
		overflow: hidden;
	}
	
	.left {
		margin-left: 0;
	}
	
	
	.right {
		margin-right: 0;
	}
	
	.clear {
		clear: both;
	}
	
	.clearfix:after { clear:both; height:0; line-height:0; content:'.'; display:block; visibility:hidden; }
	
	.relative {
		position: relative;
	}
	
	.overflow {
		overflow: hidden;
	}
	
	.float-left { float:left; }
	.float-right { float:right; }

/* --------------------------------------------------------
	GLOBAL BAR
   -------------------------------------------------------- */
	
	
	.global-bar-overlay {
		position:fixed;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background: url("../img/overlay.png");
		display:none;
        z-index: 99990;  /*Slightly less than .global-bar-container*/
	}
	
	.global-bar-container {
		position:absolute;
		top:0;
		left:0;
		right:0;
		/*font:12px Arial, Tahoma, Helvetica, sans-serif;*/
		font:12px 'Roboto', Arial, Helvetiva, Tahoma, sans-serif;
		z-index:99999;
	}
	
	.global-bar-color {
		position:absolute;
		top:0;
		left:0;
		right:0;
		height:34px;
		background-color:#2d2d2d;
		background: -moz-linear-gradient(top, #2b2b2b, #161616);/* FF */
		background: -webkit-gradient(linear, left top, left bottom, from(#2b2b2b), to(#161616));/* WK */
		box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.3);
		-moz-box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.3);
		-webkit-box-shadow:  0px 1px 3px 1px rgba(0, 0, 0, 0.3);
		z-index:99998;
	}
	
	.global-bar-container a {
		display:block;
		float:left;
		margin-top:5px;
		padding:5px 10px;
		text-decoration:none;
		color:#bbbbbb;
	}
	
	.global-bar-container a:hover {
		color:#fff;
	}
	
	.global-bar-container .float-left { margin-left:4px; }
	.global-bar-container .float-left .float-left { margin-right:18px; }
	.global-bar-container .float-left .float-left:last-child { margin-right:0; }
	
	.global-bar-container .right { margin-right:6px; }
	
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		GLOBAL BAR BUTTONS
	   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	
		.global-bar-container a.btn-network-sites {
			color:#fff;
			background-color:#cd2e2e;
			background-color:#B00;
			border-radius:2px;
			-webkit-border-radius:2px;
			-moz-border-radius:2px;
		}
		
		.global-bar-container a.btn-network-sites:hover {
			color:#333;
			background-color:#F2F2F2;
		}
		
		.global-bar-container a:hover span {
			background:transparent url("../img/toggle_down_dark.png") 100% 50% no-repeat;
		}
		
		.global-bar-container a span, .global-bar-container a.btn-more:hover span {
			padding:4px 0 6px 13px;
			margin:0 0 0 5px;
			background:transparent url("../img/toggle_down_light.png") 100% 50% no-repeat;
		}
		
		.global-bar-container a.btn-selected {
			color:#333;
			background:#F3F3F1;
			border-bottom:4px solid #F3F3F1;
			border-radius:2px 2px 0 0;
			-webkit-border-radius:2px 2px 0 0;
			-moz-border-radius:2px 2px 0 0;
		}
		
		.global-bar-container a.btn-selected span, .global-bar-container a.btn-selected:hover span {
			color:#789;
			background:transparent url("../img/toggle_up_dark.png") 100% 50% no-repeat;
		}
	
	
	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		GLOBAL BAR DROPDOWN
	   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	
		.global-bar-container .float-left .float-left .globalbar-dropdown {
			position:absolute;
			top:32px;
			z-index:1;
			width:168px;
			padding:8px 0;
			color:#789;
			background:#F3F3F1;
			box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
			-moz-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
			-webkit-box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
			display:none;
		}
		
		.global-bar-container .float-left .float-left .globalbar-dropdown a {
			display:block;
			padding:0;
			margin:0;
			width:100%;
			color:#2b2a29;
			color:#333;
		}
		
		.global-bar-container .float-left .float-left .globalbar-dropdown a span {
			display:block;
			padding:10px 0 10px 10px;
			margin:0;
			background:none;
			border-left:5px solid #e30504;
			border-left:5px solid #B00;
		}
		
		.global-bar-container .float-left .float-left .globalbar-dropdown a:hover span {
			color:#e30504;
			background-color:#fff;
			border-left:5px solid #ff5f07;
			border-left:5px solid #D00;
		}

	/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		GLOBAL BAR TSOL TOGGLE FOR NEW/OLD LOOK
	   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

		.tsol-toggle {
			xposition: absolute;
			xtop: 0;
			xleft: 48.5%;
			float: right;
			margin-right: 10px;
		}
		
		.global-bar-container .tsol-toggle a.btn-network-sites {
			background-color: #666;
		}
		
		.global-bar-container .tsol-toggle a.btn-network-sites:hover {
			color:#333;
			background-color:#F2F2F2;
		}

    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
		FOR Updated Every 5 Minutes
	   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

        p.updated {
            border-radius: 3px;
            padding: 1px 10px;
            margin-bottom: 0;
            margin-top: 4px;
            font-size: 12px;
            text-transform: uppercase;
            color: #FFC200;
        }
        
		p.updated span {
			font-size: 15px;
		}

	
/* --------------------------------------------------------
	BUTTONS
   -------------------------------------------------------- */

    /* Added on 20130430 */
    input[type=submit],
	input[type=reset] {
	    cursor: pointer;
	}
	
	input[type=submit].button,
	input[type=reset].button,
	input[type=button].button {
		padding: 6px 25px;
		border: none;
		margin-top: 10px;
		/*font: bold 14px/18px Arial, Tahoma, Helvetica, sans-serif;*/
		font: bold 14px/18px 'Roboto', Arial, Helvetiva, Tahoma, sans-serif;
		color: #FFF;
		
		border-radius: 5px;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-ms-border-radius: 5px;
		-o-border-radius: 5px;
		
		background: #0080CC;
		background: gradient(linear, left top, left bottom, from(#0080CC), to(#146198));
		background: -webkit-gradient(linear, left top, left bottom, from(#0080CC), to(#146198)); /* Safari 4+, Chrome 1-9 

*/
		background: -webkit-linear-gradient(top, #0080CC, #146198);  /* Safari 5.1+, Mobile Safari, Chrome 10+ */
		background: -moz-linear-gradient(top, #0080CC, #146198); /* Firefox 3.6+ */
		background: -ms-linear-gradient(top, #0080CC, #146198); /* IE 10+ */
		background: -o-linear-gradient(top, #0080CC, #146198); /* Opera 11.10+ */
		
		/* Added on 20130430 */
		cursor: pointer;
	}
	
	input[type=submit].button:hover,
	input[type=reset].button:hover {
		background: gradient(linear, left top, left bottom, from(#0090DD), to(#0065B0));
		background: -webkit-gradient(linear, left top, left bottom, from(#0090DD), to(#0065B0));
	}

	input[type=text] {
		border: solid 1px #999;
		height: 25px;
		color: #666;
		xmargin-top: 10px;
	}
	
	select {
		border: solid 1px #999;
		height: 25px;
		color: #666;
	}

    /* --------------------------------------------------------------------------------------------
	Image Holder that contains both Photo Image and Video Image sharing the same web control
   -------------------------------------------------------------------------------------------- */
    .divImage {
        position:relative;
    }
    
    
/* --------------------------------------------------------
	FOR SKINNER
   -------------------------------------------------------- */


    .skinner {
        width: 1px;
        height: 1024px;
        z-index: 1;
        position: fixed;/*absolute;*/
        left: 50%;
        top: 32px;
    }

    .skinner-left {
        position: absolute;
        /*left: -651px;*/
        right: 502px
    }

    .skinner-right {
        position: absolute;
        left: 500px;
    }
	
	/* added by stella 24032015 */
	.addon-slider{
		display:none;
	}
	
	.customNavigation{
	    display:block;
    }
	
    .mobile-carousel{
	    display:none
    }

    .mobile-carousel2{
	    display:none;
        background-color: #E5E5E2;
        margin-bottom: 20px;
        padding-top: 15px;
    }
    
	#owl-example{
		margin-bottom:20px;
		clear:both;
		width:80%;
		margin:0 auto 20px;
		float:none;
	    display: none;
	}
	
	#owl-example .item{
		margin:0 auto;
		width:140px;
	}
	
	#owl-example .item a{
		display:block;
	}
	
	#owl-example .item img{
		position:relative;
	}
	#owl-example2{
		margin-bottom:20px;
		clear:both;
		width:80%;
		margin:0 auto 20px;
		float:none;
	    display: none;
	}
	
	#owl-example2 .item{
		margin:0 auto;
		width:140px;
	}
	
	#owl-example2 .item a{
		display:block;
	}
	
	#owl-example2 .item img{
		position:relative;
	}
	
	.customNavigation a{
	  	-webkit-user-select: none;
	  	-khtml-user-select: none;
	  	-moz-user-select: none;
	  	-ms-user-select: none;
	  	user-select: none;
	  	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		width:30px;
		height:30px;
		position:absolute;
		margin-top:39px;
	}
	
	.customNavigation{
	  	text-align: center;
		width:100%;
		margin:0;
	}
	
	.btn-next{
		background: url(../img/arrow-right-border.gif) no-repeat center center;
		right:0;
	}
	
	.btn-prev{
		background: url(../img/arrow-left-2.gif) no-repeat center center;
		margin-right:-1px;
		left:0;
	}
	
	.carousel-tag{
		opacity: 0.8;
		background-color: #666;
		position: absolute;
		bottom: 4px; /* 5px */
		width: 140px;
		text-align: center;
		margin: 0 auto;
		padding: 3px 5px;
		color: #ffffff;
		/*font: 12px/15px Arial, Tahoma, Helvetica, sans-serif;*/
		font: 12px/15px 'Roboto', Arial, Helvetiva, Tahoma, sans-serif;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}

	.carousel-tag2{
        opacity: 0.8;
        background-color: #666;
        position: absolute;
        bottom: 4px;
        width: 140px;
        margin: 0px auto;
        padding: 3px 5px;
        color: #FFF;
        font: 12px/15px "Roboto",Arial,Helvetiva,Tahoma,sans-serif;
        box-sizing: border-box;
        text-align: left;
	}
	/* added by stella 24032015 */
	
	/*.customNavigation, .mobile-carousel{
		display:none;
	}*/

    /*  Structure is:
      <body>
        <TSOLGlobalBar />
        <div class="skinner">
          <div class="skinner-left">AD_CODE_FOR_150x1024_BANNER</div>
          <div class="skinner-right">AD_CODE_FOR_150x1024_BANNER</div>
        </div>
        <TSOLHeader />
        <TSOLContent />
        <TSOLFooter />
      </body>
     */


/* --------------------------------------------------------
	MEDIA QUERY
   -------------------------------------------------------- */

	@media screen and (max-device-width: 1024px) {
	  
	  .container {
		background: #FFF;
	  }
	  
	  .row {
		padding: 0 11px;
	  }
	  
	}
	
    
/* --------------------------------------------------------
	DATE
   -------------------------------------------------------- */
   	
   	.date  {
        /*font: 11px/24px Arial, Tahoma, sans-serif;*/
		font: 11px/24px 'Roboto', Arial, Helvetiva, Tahoma, sans-serif;
        color: #666;
	}

/* ------------------------------------------------------------------
	HEADER WELCOME PAGE /// FESTIVE HEADER BACKGROUND INSERT HERE
   ------------------------------------------------------------------ */

   .row-header{
	    height: 120px;
	    background: no-repeat bottom left #FFF !important;
    }

/* --------------------------------------------------------------------------------
	(TEMP) BUSINESS/MY-PORTFOLIO /// WORDING FOR PRE-PORTFOLIO SWITCHING ADDED ON 20140724
----------------------------------------------------------------------------------- */
    .upgrade_note {
    overflow:hidden;
    display:block;
    margin-bottom: 30px;
    background: #f0f0e6;
    }

    .upgrade_note p {
    color: #205A98;
    margin-bottom:0;
    padding: 10px;
    }
    
	
/* --------------------------------------------------------
	VIDEO ICON - 20150417 by Shaqirah
   -------------------------------------------------------- */
  
    .video-icon {
        width: 16px;
        height: auto;
        float: none;
        text-align: right;
        margin: 0;
        padding:0;
        vertical-align: middle;
    }


    
/* --------------------------------------------------------
	AFTER LEAD MEDIA ADS SLOT - added by stella 17042015
   -------------------------------------------------------- */
	.after-lead-media{
		margin-bottom:30px;
	}
	
	.after-lead-media-responsive-ads{
		display:none;
	}


/* Added on 10062015 by stella */
/* --------------------------------------------------------
	SHARE AND WIN CONTEST PROMO - TSOL 20 ANNIVERSARY (23JUNE TO 12 JULY 2015)
   -------------------------------------------------------- */
	div.share-and-win-promo{
		background:#fff;
		border:1px solid #a6a6a6;
		padding:10px;
		margin:5px 0;
		clear:both;
		position:relative;
		font-family: 'Oswald', sans-serif;
	}
	
	div.share-and-win-image{
		width:35%;
		float:left;
		margin-right:10%;
		margin-left:20px;
	}
	
	div.share-and-win-image img{
		width:200px;
		height:auto;
	}
	
	div.share-and-win-content{
		width:58%;
		color:#c62026;
		right:0;
		font-size:18px;
		line-height:25px;
		position:absolute;
		top:50%;
		margin-top:-24px;
		font-weight:bold;
	}

/* ---------------------------------------------
    CNY 2016
   ---------------------------------------------*/

h1.cny-title {
    border: 0px none;
    color: #B00;
    line-height: 36px;
    margin: 10px;
    font-size: 20px;
    font-family: "Roboto Condensed",Arial,Helvetica,Tahoma,sans-serif;
    font-weight: bold;
    margin: 0px 0px 10px;
    padding-left: 100px;
}

h3.carousel-tag img {
    width: 21px;
    height: auto;
    float: none;
    text-align: right;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
    padding-left:5px;
}

.cny-btn-prev {
    background: transparent url("../img/cny-arrow-left-border.gif") no-repeat scroll center center;
    margin-right: -1px;
    left: 0px;
}

.cny-btn-next {
    right: 0px;
    background: transparent url("../img/cny-arrow-right-border.gif") no-repeat scroll center center;
}