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

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('League_Gothic-webfont.eot');
    src: url('League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('League_Gothic-webfont.woff') format('woff'),
         url('League_Gothic-webfont.ttf') format('truetype'),
         url('League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* Regular */
@font-face {
    font-family: 'League Gothic';
    src: url('leaguegothic-italic-webfont.eot');
    src: url('leaguegothic-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-italic-webfont.woff') format('woff'),
         url('leaguegothic-italic-webfont.ttf') format('truetype'),
         url('leaguegothic-italic-webfont.svg#league_gothic_italicregular') format('svg');
    font-weight: normal;
    font-style: italic;

}

/* Italic */
@font-face {
    font-family: 'League Gothic';
    src: url('leaguegothic-regular-webfont.eot');
    src: url('leaguegothic-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-regular-webfont.woff') format('woff'),
         url('leaguegothic-regular-webfont.ttf') format('truetype'),
         url('leaguegothic-regular-webfont.svg#league_gothicregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Condensed */
@font-face {
    font-family: 'League Gothic Condensed';
    src: url('leaguegothic-condensed-regular-webfont.eot');
    src: url('leaguegothic-condensed-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-condensed-regular-webfont.woff') format('woff'),
         url('leaguegothic-condensed-regular-webfont.ttf') format('truetype'),
         url('leaguegothic-condensed-regular-webfont.svg#league_gothic_condensed-Rg') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* Condensed Italic */
@font-face {
    font-family: 'League Gothic Condensed';
    src: url('leaguegothic-condensed-italic-webfont.eot');
    src: url('leaguegothic-condensed-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('leaguegothic-condensed-italic-webfont.woff') format('woff'),
         url('leaguegothic-condensed-italic-webfont.ttf') format('truetype'),
         url('leaguegothic-condensed-italic-webfont.svg#league_gothic_condensed_itaRg') format('svg');
    font-weight: normal;
    font-style: italic;
}

section {
	width:960px;
	margin:0px auto;
}

div.col p {
	text-align:justify;
	margin-right:25px;
}

.col_1_3 div {
	padding:10px;
	padding-top:15px;
}

/*
	Course description
*/
#courseDescriptionArea {
	background-color:lightgray;  
	background-image:url('../images/bg/diagonal_bg.png');
	width:100%;
	padding:20px 0px;
	background-color: #FFF;
}
#courseSeriesArea {   
    font-family: HattoriHanzoLight,Calibri,sans-serif;
	width:100%;
	padding:20px 0px;
	background-color: #FFF;
	background-image: linear-gradient(to bottom, #F4F4F4 0px, #FFF 500px); 
}
.section-gradient {
    background-color: #FFF;
    background-image: linear-gradient(to bottom, #F4F4F4 0px, #FFF 500px);
}
.courseDescription {

}

/*
	Course content
*/
#courseContentArea {
	background-color:#DDFFDD;
	background-image:url('../images/bg-noise.png');
	background-image:url('../images/bg/paper_3_bg.jpg');
	width:100%;
	padding:20px 0px;
}
.col h3 {
   color:#B00;
   font-weight:bold;
	/*
	background-image: url('../images/bullet.png');
	padding-top: 3px;  
	padding-bottom: 4px;
	background-repeat: no-repeat;
	padding-left: 30px;
	background-position: 0px -2px;
	font-size: 22px;
	*/
   }
#courseDescriptionArea h1,.courseTitle  {
	padding-bottom: 10px;
    font-size:30px;
	letter-spacing:1px;
	font: 52px/51px 'League Gothic',Arial,sans-serif;
	text-transform: uppercase;
	margin-bottom: 6px;
	/*text-shadow: 4px 6px 5px rgba(187, 0, 0, 0.75); */
	color:#0066cc;
}
.willlearn {
	font-family: "League Gothic",Arial,sans-serif;
	font-weight:bolder;
	padding-bottom: 5px;

}
.courseTopicTitle {
	/*font-family:Arial;*/
	font-family: helvetica neue,helvetica,arial,"Heiti TC",microsoft jhenghei,sans-serif;
	font-weight:bolder;
	padding-bottom: 25px;
}
.courseTopic_1 {
	
	color: rgba(22, 108, 221, 1);
	font-size:18px !important;
	/* font-weight:600;  
		color:#222222;*/
	/*  letter-spacing: 2px;  */
	background: url(../images/topic_underline.png) repeat-x left bottom;
	padding-bottom: 5px;
}
.courseTopic_2 {
	color: rgba(22, 108, 221, 1);
	/* color:#222222; */
	font-size:15px !important;
	padding-left:23px;
	margin-top: -5px;
}

.courseTopicDetail_1 {
	color:#888888;
}
ul.courseTopicDetail_1 li {
	color:#444444;
}

.courseTopicDetail_2 {
	color:#444444;
	padding-left:30px;
}
ul.courseTopicDetail_2 li {
}
.slider_image {
	padding-top:10px;
	width:460px;
}



/****======================================================
           Responsive Desgin (Start)
======================================================****/

    /**********************************
	       Style before RWD (Start)
	***********************************/
	
	.courseContentImgRWD { /* For the image in course content*/
		display: none;	}

	.contentTable {
	float: right!important;
	width: 300px;}
	 
	/**********************************
	       Style before RWD (End)
	***********************************/



/*@media screen and (min-width: 1200px) {
    The width of screen >=1200px, loading the below CSS 
}

@media screen and (min-width: 768px) and (max-width: 979px) {
    The width of screen bewteen 768px and 979px, loading the below CSS 
}*/

@media screen and (max-width: 767px) {
	/* The width of screen <=767px, loading the below CSS */
	
	/**********************************
	          General Style (Start)
	***********************************/
	
	.container_12 .col_1_2,
	.container_12 .col_5_8,
	.container_12 .col_1_3,
	.container_12 .col_2_3,
	.container_12 .col_1,
	 div.col p,
	.container_12,
	.container_12 .col_1,
	.text h2{
		width: 100% !important;
		margin-left: 0px !important;
		margin-right: 0px !important;}
		
	
	body .static_content_ch,
	body .static_content_en,
	.wrapper{
		width: 95% ;
		padding-left: 10px;}
	
	.sidebar {
		display: none;}
	
	.divider {
		padding-top: 1px;}
	
	div.col p{
		text-align: left;
		width:90% !important;}
	
	
	/**********************************
	          General Style (End)
	***********************************/
	
	/**********************************
	           Breadcrumbs (Start)
	***********************************/
	.breadcrumbs{
		width: 98%;
	}
	
	/**********************************
	           Breadcrumbs (End)
	***********************************/
	
	/**********************************
	           Footer (Start)
	***********************************/
	.footer .container_12 {
		padding: 0px 0px 20px;}
	
	.footerMenuSmall {
		display: none;}
	
	.footerMenuBig .col {
		width: 85%;
		border-bottom: 1px solid white;
		margin-left: 5%;
		padding-top: 11px;
		height: 30px;}
		
	.footerMenuBig .col:last-child {
		border-bottom: 0px;}
		
	.footer_bg {
    background: url(../images/footer_top_rwd.png)top repeat-x;}
    
    
    .footer .col_1_3 {
		text-align: left;
		/* font-size: large;  eric */
		padding: 10px 0px;
		margin-left: auto;
		margin-right: auto;}
	
	.footer .responsiveStuff { /** Adobe Logo in footer*/
		display: none;}
		/* eric */
		.box {
		margin-left:10px;
		margin-right:10px;}
	
	.footer {
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;}
	
	/*	div.inner p{
		text-align:center; }   eric */
	
	/**********************************
	           Footer(End)
	***********************************/
	
	/**********************************
	     Course Content(Start)
	***********************************/
	.courseContentImgRWD {
		display: block;
		padding-bottom: 10px;}
	
	.courseContentImgDesk {
		display: none;}
	
	 body #courseDescriptionArea h1 {
		font-size: 30px;
		width:98%!important;
		padding-left: 10px;}
	
	body #courseDescriptionArea div{
		width: 100% !important;
	}
	

	.courseResponsive,
	.slider_image,
	.courseDescription  {
		width:90%!important;
		padding-left: 10px;}
	
	.contentTable{
		display: none;
		
	}

	/**********************************
	     Course Content(End)
	***********************************/	
	
	

	
	
	
	
	
	
	
	
	

    
	
		
    
	 
}

/*@media screen and (max-device-width: 480px) {
	The width of screen <=480px, loading the below CSS
 
}*/

/****======================================================
           Responsive Desgin (End)
======================================================****/