/*===========================
 * Default
===========================*/
body {
	color: #444;
	line-height: 1.7;
	font-size: 15px;
	
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	line-height: 1.7;
	font-size: 16px;
	font-weight: normal;
}
a:hover {
	text-decoration: none;
}
img {
	max-width: 100%;
}
a img:hover {
	opacity:0.8;
	filter:alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*===========================
 * General style
===========================*/
.Container {
	position: relative;
	box-sizing: border-box;
	width: 960px;
	margin: 0 auto;
	padding: 0 10px;
	
}
h3 {
	margin-bottom: 5px;
	padding: 3px 10px;
	background: #333;
	font-size: 14px;
	line-height: 24px;
	color: #fff;
	
}

.text-small { font-size: 13px; }
.text-middle { font-size: 16px; }
.text-large { font-size: 20px; }
.text-muted { color: #888; }
.text-bold { font-weight: bold; }
.text-normal { font-weight: normal; }

.margin-bottom { margin-bottom: 15px; }
.margin-top { margin-top: 15px; }

.auto { width: auto; max-width: 100%; }
.fit { width: 100%; }
.half { width: 50%; }

.inline { display: inline; }
.block { display: block; }


/*===========================
 * Bootstrap Ext
===========================*/
.label.block {
	padding-top: 0.3em;
}

.btn-inverse {
	background: #444;
	color: #fff;
		
}
.btn-inverse:hover {
	background: #222;
	color: #fff;
}
.btn-inverse:active {

}
.btn-grad {
	border-top: 1px solid #dedede;
	border-right: 1px solid #cecece;
	border-bottom: 1px solid #cecece;
	border-left: 1px solid #dedede;
	text-shadow: 1px 1px 0 #fcfcfc;
	background: rgb(249,249,249);
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlZGVkZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background: -moz-linear-gradient(top,  rgba(249,249,249,1) 0%, rgba(237,237,237,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(237,237,237,1)));
	background: -webkit-linear-gradient(top,  rgba(249,249,249,1) 0%,rgba(237,237,237,1) 100%);
	background: -o-linear-gradient(top,  rgba(249,249,249,1) 0%,rgba(237,237,237,1) 100%);
	background: -ms-linear-gradient(top,  rgba(249,249,249,1) 0%,rgba(237,237,237,1) 100%);
	background: linear-gradient(to bottom,  rgba(249,249,249,1) 0%,rgba(237,237,237,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ededed',GradientType=0 );
	color: #555;

}
.btn-grad:hover {
	background: #efefef;
	border: 1px solid #ddd;
}

.label {
	padding-top: 0.3em;
}
.label-default {
	background: #999;
}
.label.label-lg {
	padding: 4px 10px;
	font-size: 13px;
	font-weight: normal;
}
.nav.nav-tabs {
	margin-bottom: 15px;
}
.nav.nav-tabs > li a {
	font-size: 13px;
	cursor: pointer;
}
.nav.nav-tabs > li.active a {
	font-weight: bold;
}
.pager li a, .pager li span {
	border-radius: 3px;
}
.pager li.active a {
	background: #3294d5;
	color: #fff;
}
/*===========================
 * Fontawesome Ext
===========================*/
.fa-orange { color: orange; }
.fa-skyblue { color: #00aced }
.fa-blue { color: #5e84d1;}
.fa-red { color: red; }
/*===========================
 * Header
===========================*/
#Header {
	position: relative;
	border-top: 4px solid #333;
	margin-bottom: 35px;
	padding-top: 15px;
	
}
#catchcopy {
	font-size: 12px;
	color: #999;
}
#catchcopy:before {
	content: '- ';
}
#catchcopy:after {
	content: ' -';
}
#Logo {
	float: left;

	margin: 0;
	padding: 0;
	font-size: 32px;
	font-weight: normal;
}
#Logo a {
	color: #333;
}
#Logo a:hover {
	color: #999;
}
#Logo img {
	max-height: 50px;
}

/*============================
 socialNav
============================*/
#TopSocialButton.socialButton {
	float: right;
}
#FooterSocialButton.socialButton {
	margin-bottom: 15px;
}
.socialButton {
	text-align: center;

}
.socialButton .btn {
	margin-bottom: 3px;
	padding: 1px 8px 1px 4px;
	line-height: 20px;

}
.socialButton .fa {
	font-size: 16px;
	line-height: 20px;
	vertical-align: bottom;
}
/*===========================
 * globalNav
===========================*/
#globalNav {
	float: right;
	margin-top: 5px;
	
}
#globalNav ul {
	
}
#globalNav ul li {
	float: left;
	margin-left: 2px;
	
}
#globalNav ul li a {
	display: block;
	padding: 5px 15px;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	font-size: 15px;

	color: #333;
}
#globalNav ul li a:hover {
	background: #f5f5f5;
}
#globalNav ul li.active a {
	color: #fff;
	background: #c6312b;
}


/*===========================
 * Main
===========================*/
#Main {
	width: 640px;
	float: left;
}
#Main.centering {
	float: none;
	margin: 0 auto;
}
/*===========================
 * Side
===========================*/
#Side {
	box-sizing: border-box;
	width: 280px;
	float: left;
	margin-left: 20px;
}
/*===========================
 * parts
===========================*/
.parts {
	margin-bottom: 30px;	
}
.partsHeading {
	margin: 0 0 20px 0;
	padding: 2px 0;
	background: #333;

}
.partsHeading h2 {
	padding: 5px 10px;
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	font-size: 16px;

	font-weight: normal;
	color: #fff;

}
.partsHeading h2 .fa {
	margin-right: 7px;
}

#Side .parts {
	margin-bottom: 15px;
}
/*===========================
 * Facebook
===========================*/

/*===========================
 * partsInfo
===========================*/
.partsInfo {
	padding: 15px 20px;
	margin: 10px 0 20px;
	background: #F4F4DE;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	color: #554;

}
/*===========================
 * noItem
===========================*/
.noItem {
	padding: 10px 20px;
	font-size: smaller;
	color: #777;
}
/*============================
 content
============================*/
.contentTitle {
	font-size: 20px;
	margin-bottom: 15px;
	color: #222;
}
.contentImage {
	margin-bottom: 20px;
}
.contentBody {
	margin-bottom: 20px;
	
	
}
.contentNotes {
	margin-bottom: 20px;
	font-size: 13px;
	color: #aaa;
	
}

/*============================
 itemList
============================*/
ul.itemList {
	margin: 0 0 15px 0;
	list-style: none;
}
.itemList > li {
	padding: 10px;
	border-bottom: 1px solid #ddd;
	position: relative;
}

.itemRight {
	padding-left: 60px;
}

.itemRight.narrow {
	padding-left: 140px;
}
.itemRight.micro {
	padding-left: 200px;
}
.itemRight.middle {
	padding-left: 90px;
}

.itemIcon {
	float: left;
}
.itemTitle {
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 23px;
	font-weight: bold;
}
.itemName {
	font-weight: bold;
}
.itemInfo span {
	margin-right: 10px;
}
.itemImage {
	max-width: 300px;
}
.itemBody {
	font-size: 14px;
	line-height: 1.5;
	margin: 10px 0;
}
.itemInfo {
	margin-bottom: 5px;
	color: gray;
	font-size: smaller;
	
}

/*===========================
 * Top
===========================*/
.topImage {
	margin-bottom: 10px;
}
.topImage img {
	width: 100%;
}
.itemList.topInfoList {
	margin-bottom: 5px;
}
.itemList.topInfoList li {
	padding: 5px;
	border-bottom: 1px dotted #ddd;
	font-size: 13px;
}
/*===========================
 * Info
===========================*/
.infoTitle {
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #ccc;
	
}
/*===========================
 * Disco
===========================*/
ul.discoList {

}
.discoList li {
	box-sizing: border-box;
	float: left;
	width: 33.333333%;
	height: 260px;
	
}
.discoList li a {
	display: block;
	margin: 0 auto 8px;
	width: 180px;
	height: 180px;
	box-shadow: 2px 2px 10px #bbb;
}

.discoList li .discoTitle {
	margin-bottom: 4px;
	font-size: 13px;
	font-weight: bold;
	line-height: 16px;
	height: 16px;
	overflow: hidden;
	text-align: center;
}
.discoList li .discoInfo {
	font-size: 13px;
	color: #888;
	line-height: 16px;
	height: 16px;
	overflow: hidden;
	text-align: center;
}
.discoTable td.discoImage {
	width: 210px;
	padding: 10px;
}
.listTable.discoTable th {
	font-size: 12px;
	color: #777;
	width: 80px;
}

h1.discoTitle {
	font-size: 18px;
	font-weight: bold;
}
ul.discoContentsList {
	margin: -5px 0 20px;
}
.discoContentsList li {
	padding: 6px 10px;
	border-bottom: 1px dotted #ccc;
	font-size: 13px;
}
/*===========================
 * Media
===========================*/
.mediaTitle {
	margin-bottom: 0;
}
/*===========================
 * Blog
===========================*/
#feedList li i {
	margin-right: 5px;
}

/*===========================
 * Profile
===========================*/


ul.memberInfo {
	margin-bottom: 10px;
	font-size: 13px;
	color: #888;
}
.memberInfo li {
	display: inline;
	padding-right: 10px;
}

/*===========================
 * menuList
===========================*/
ul.menuList {
	border: 1px solid #ddd;
	border-radius: 6px;
}
.menuList li {
	border-bottom: 1px solid #ddd;
}
.menuList li:last-child {
	border-bottom: none;
}
.menuList li a {
	display: block;
	padding: 8px 12px;
	font-size: 14px;
	color: #666;
}
.menuList li:first-child a {
	border-radius: 5px 5px 0 0;
}
.menuList li:last-child a {
	border-radius: 0 0 5px 5px;
}
.menuList li:hover a {
	background: #f5f5f5;
}
.menuList li.active a {
	background: #eee;
	color: #222;
}
/*===========================
 * formTable
===========================*/
table.formTable {
	width: 100%;
	margin-bottom: 15px;
	border-top: 4px solid #ccc;
	border-bottom: 3px solid #ddd;
}
.formTable tr {
	border-bottom: 1px dotted #ddb;
}
.formTable th {
	width: 110px;
	padding: 8px;
	
	background: #f4f4f4;
	color: #666;
	font-size: 12px;
}
.formTable.th-wide th {
	width: 150px;
}
.formTable td {
	padding: 8px;
	
}

/*===========================
 * listTable
===========================*/
table.listTable {
	width: 100%;
	margin-bottom: 20px;
	border-top: 4px solid #ccc;
	border-bottom: 4px solid #ccc;
}
.listTable tr {
	border-bottom: 1px solid #ddd;
}
.listTable th {
	width: 130px;
	padding: 8px;
	vertical-align: top;
	font-size: 13px;
}
.listTable td {
	padding: 8px;
	vertical-align: top;
	font-size: 14px;
	
}

/*============================
 bannerList
============================*/
ul.bannerList {
	margin-bottom: 10px;
}
ul.bannerList li {
	margin-bottom: 10px;
}
.bannerList li img {
	width: 100%;
}
.bannerList li a.text {
	display: block;
	padding: 8px;
	border: 1px solid #aaa;
	background: #fff;
	line-height: 1.6;
	text-align: center;
	font-weight: bold;
	color: #222;
}
.bannerList li a.text:hover {
	color: #444;
	background: #f3f3f3;
}
/*===========================
 * iframeBox
===========================*/
.iframeBox {
	position: relative;
	width: 100%;
	padding-top: 75%;
}

.iframeBox iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}


/*============================
 imageList
============================*/
ul.imageList {
	margin: 0;
	list-style: none;
}
ul.imageList li {
	float: left;
	width: 120px;
	height: 160px;
	overflow: hidden;
	text-align: center;
	border: 1px solid #ccc;
	padding: 10px;
	margin: 0 10px 10px 0;
	border-radius: 8px;
}
.imageBox {
	background-position: center center;
	background-repeat: no-repeat;
	margin-bottom: 10px;
}
ul.imageList li a.image {
	display: block;
	height: 90px;
}

ul.imageList li a img {
	display: none;
}



/*===========================
 * Contact
===========================*/
dl.contactForm dt {
	font-weight: normal;
	margin-bottom: 5px;
}
dl.contactForm dd {
	margin-bottom: 15px;
}

/*===========================
 * shareArea
===========================*/
.shareArea {
	margin-bottom: 15px;

}
.shareArea a.btn {
	margin-bottom: 4px;
	padding: 2px 8px;
}
.shareArea .fa {

	vertical-align: middle;
}

/*================================
 * jQuery NotifyBar
=================================*/
.jquery-notify-bar {
  width:100%;
  position:fixed;
  top:0;
  left:0;
  z-index:32768;
  background-color:#fcf8e3;
  font-size:18px;
  color:#000;
  text-align:center;
  font-family: Arial, Verdana, sans-serif;
  padding:20px 0px;
  border-bottom:1px solid #bbb;
  cursor: pointer;
}
.jquery-notify-bar.error {
  color:#f00;
  background-color:#fdd;
}
.jquery-notify-bar.success {
  color:#060;
  background-color:#BBFFB6;
}
.notify-bar-close {
  position:absolute;
  left:95%;
  font-size:11px;
}

/*===========================
 * Footer
===========================*/
#Footer {
	clear: both;
	margin: 30px 0 0;
	padding: 40px 0;
	border-top: 1px solid #ccc;
	background: #f3f3f3;
	box-shadow: inset 0 1px 5px #aaa;
	text-shadow: 1px 1px 0 #fafafa;
	font-size: 14px;
	color: #666;
}
#Footer .btn {
	text-shadow: none;
}


/*=============================================
 ---------------------------------------------
 * Responsive
 ---------------------------------------------
=============================================*/

@media screen and (max-width : 640px){
	.Container {

		width: 100%;
	}
	#Header {
		margin-bottom: 15px;
		padding-top: 10px;
	}
	#TopSocialButton.socialButton {
		float: none;
		margin-bottom: 5px;
	}
	#Logo {
		display: block;
		margin-bottom: 5px;
	}
	#globalNav {

		width: 100%;
	}
	#globalNav ul li {
		box-sizing: border-box;
		width: 24.0%;
		margin: 2px;
	}
	#globalNav ul li a {
		box-sizing: border-box;
		height: 25px;
		padding: 0 2px;
		font-size: 12px;
		line-height: 25px;
		overflow: hidden;
		background: #f5f5f5;
		text-align: center;
		
	}
	#Main {
		float: none;
		width: 100%;
		padding-bottom: 20px;
	}
	#Side {
		float: none;
		width: 480px;
		margin: 0 auto;
	}
	
	.discoList li {
		width: 50%;
	}

}
@media screen and (max-width : 480px){
	.half {
		width: 100%;
	}
	#globalNav ul li {
		box-sizing: border-box;
		width: 32.0%;
		margin: 2px;
	}
	#Side {
		width: 100%;
	}
	table.listTable th,
	table.listTable td,
	table.formTable th,
	table.formTable td {
	    display: block;
	    
	}
	table.formTable th,
	table.formTable.th-wide th {
		width: 100%;
		background: #fff;
	}
	.discoTable td.discoImage {
		width: 100%;
	}
	.itemIcon {
		float: none;
		margin-bottom: 10px;
	}
	.itemRight,
	.itemRight.middle,
	.itemRight.narrow {
		padding-left: 0;
	}
}
@media screen and (max-width : 380px){
	.discoList li {
		float: none;
		width: 100%;
	}
}