/*------------------------------------------------------------------
	[Stylesheet]
	Project:		Thermal Systems
	Version:		1.0
	Last change:	2.7.13
	Assigned to:	Titan Web (Daren Ong)					
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
	[Table of Contents]
	1. 	Global
	2.	Header
	3.	Top Menu
	4.	Banner
	5.	Content
	6.	Footer
	7.  Gallery
	

	[Color codes]
	Background:	#262626 (Dark Grey)
	Content:	#3b3b3b (Light Black)
	Header h1:	#a70d00 (Dark Red)
	a (standard):	#0046e4 (Bright Blue)
	a (visited):	#009ce4 (Lighter Blue)

	[Typography]
	Body copy:	12px/1.3 Verdana, Arial, Helvetica, sans-serif;

-------------------------------------------------------------------*/
/*------------------------------------------------------------------
	[ 1 Global ]
-------------------------------------------------------------------*/
body { 
	background: #000; 
	color: #cbcdce; 
	font-family: 'luxi sans', Arial, sans-serif; 
	font-size: 14px;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Roboto Bold', Arial, sans-serif; color: #fff; }
h1 {} h2 {} h3 {} h4 {} h5 {} h6 {}
a {}
a:hover, a:focus { text-decoration:none; }
input, button, textarea, select {}
p{ color: #cbcdce; }
ul li{ list-style-image: url('../images/list.png'); }
/*------------------------------------------------------------------
	[ 2 Header ]
-------------------------------------------------------------------*/
.header {}

.phnum, .header_email{ font-family: 'luxi sans', Arial, sans-serif; }
#phone_label{ font-size: 14px; color: #ff0000; }
#phone_header{ font-size: 24px; }
.header_email{ font-size: 14px; }
#header_info{ margin-bottom: 35px; }

#logo{ width: 395px; }

.header-pad .menu-wrapper{ height: 42px; }

/*------------------------------------------------------------------
	[ 3 Top Menu ]
-------------------------------------------------------------------*/
/* Structure and General Styling */
.menu-wrapper { height:51px; position:relative; z-index:100; }
#menu-top-menu,
#menu-top-menu li,
#menu-top-menu a {
  display: block;
}
#menu-top-menu li,
#menu-top-menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
#menu-top-menu ul {
  display: none;
  position: absolute;
  z-index: 100;
}
#menu-top-menu li {
  float: left;
  position: relative;
  z-index: 100;
}
#menu-top-menu li:hover > ul {
  display: block;
}
#menu-top-menu > li:hover > ul {
  left: 0;
}
#menu-top-menu a {
  color: #FFFFFF;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba( 0, 0, 0, 0.75 );
}
#menu-top-menu a:hover,
#menu-top-menu a:active,
#menu-top-menu a:focus {
  color: #FFFFFF;
  text-decoration: none;
}
 
/* Top-level Styling */
#top-menu {
  background: #ed1c24;
  bottom: 0;
  /*height: 25px;
  position: absolute;
  width: 100%;*/
}
#menu-top-menu {
  height: 25px;
  /*margin: 0 auto;*/
  position: relative;
  /*width: 960px;*/
}
#menu-top-menu > li {
  height: 25px;
}
#menu-top-menu > li > a {
  border: 1px solid #9e0b0f;
  font-size: 14px;
  padding: 5px 14px 1px;
  font-family: 'Roboto', Arial, sans-serif;
  text-transform: uppercase;
}
#menu-top-menu > li:first-child > a {
  /*border-left: none;*/
}
#menu-top-menu > li:hover > a,
#menu-top-menu > .current-menu-item > a,
#menu-top-menu > .current-menu-item:hover > a,
#menu-top-menu > .current-menu-ancestor > a {
  color: #fff;
  background: #000;
}
 
/* Sub-menu Styling and Positioning. Accounts for infinite levels of dropdowns. */
 
#menu-top-menu ul {
  background: transparent;
  width: 146px;
  border: 1px solid #9e0b0f;
  background: #000;
}
#menu-top-menu ul > li {
  width: 146px;
  padding: 5px 0;
}
#menu-top-menu ul > li > a {
  background: #000;
  font-size: 14px;
  padding: 5px 10px 2px;
}
#menu-top-menu ul > li:hover > a,
#menu-top-menu ul > .current-menu-item > a,
#menu-top-menu ul > .current-menu-item:hover > a,
#menu-top-menu ul > .current-menu-ancestor > a {
  background: #ff0000;
  color: #fff;
}
#menu-top-menu li > ul li:hover > ul {
  left: 146px;
  top: 0;
}

#header, .header-pad.section-pad-wrapper{ overflow: visible; }

/*------------------------------------------------------------------
	[ 4 Banner ]
-------------------------------------------------------------------*/
.banner {}

#banner{ height: 390px; position: relative; }

#banner_nav{ float: left; position: absolute; left: 30px; bottom: 25px; z-index: 10;}

#banner_nav div{ 
	background: url('../images/nav.jpg') no-repeat;
	float: left; 
	margin-right: 10px;
}

#banner_nav .activeSlide, #banner_nav div:hover{ 
	background: url('../images/nav-active.jpg') no-repeat;
}

#banner_nav div a {
	width: 19px;
	height: 19px;
	display: block;
}

/*------------------------------------------------------------------
	[ 5 Content ]
-------------------------------------------------------------------*/
.content {}
.entry-meta { display:none; }
.entry-utility { display:none; }

#front-page, #fp_products, #fp_service, #content h1:first-child{ 
	margin-top: 20px; 
	border-top: 1px solid #ff0000;
	padding-top: 5px;
}

.fp-heading{ 
	font-size: 30px; 
	font-family: 'Roboto Bold', Arial, sans-serif;
	text-transform: uppercase;
	color: #fff;
}
.fp-heading a{ color: #fff; }

.fp-content{ width: 480px; }

#fp_home, #fp_products, #fp_product_title, #fp_service{ overflow: hidden; }

#fp_product_content{ text-align: right; }

#fp_product_content li, #fp_service #fp_service_content li{ 
	list-style-image: none; /* for IE7 */
	list-style: none; 
	text-align: left; 
	margin: 0; 
}

#fp_product_content li a, #fp_service li a{ color: #ff0000; }

.readmore-image{ 
	background: url('../images/readmore.png') no-repeat; 
	float: left;
	width: 6px;
	height: 12px;
	margin-top: 3px;
	margin-left: 5px;
}

.fp_service_list {
	width: 215px;
	float: left;
	margin-bottom: 10px;
}

/*------------------------------------------------------------------
	[ 6 Footer ]
-------------------------------------------------------------------*/
.footer-pad { padding:20px 0 35px 0; }
.footer { font-family:Arial, Helvetica, sans-serif; font-size:12px; }
/* copyright */
.footer .copyright { width:550px; float:left; padding:0 0 5px 0; color: #fff; }
/* footer-menu */
.footer .footer-menu { width:550px; float:left; padding:0 0 10px 0; }
.footer .footer-menu ul { margin:0; padding:0; }
.footer .footer-menu ul li { list-style:none; float:left; display:block; margin:0; padding:0 10px; border-left:1px solid #888888; }
.footer .footer-menu ul li:first-child { padding-left:0px; border-left:none; }
.footer .footer-menu ul li a { color:#fff; }
.footer .footer-menu ul li a:hover { color:#fff; }
/* titan badge */
.titan-badge { width:230px; height:30px; float:right; padding:0 0 10px 20px; }
.titan-badge .titan-title { float:left; display:block; padding:10px 5px 0 0; }
.titan-badge a.titan-logo { float:right; display:block; }


/*------------------------------------------------------------------
	[ 7 Gallery ]
-------------------------------------------------------------------*/
html > body .ngg-album { border:none; float:left; display:block; margin-right:20px; }
.ngg-album .ngg-thumbnail { margin-right:5px; }
.ngg-album .ngg-thumbnail img { border:none; background-color:#FFFFFF; }
.ngg-album .ngg-thumbnail img:hover { border:none; background-color:#929292; }
.ngg-album .ngg-description { clear:both; }

.ngg-gallery-thumbnail img { border:none; background-color:#929292; margin:15px 7px 4px 7px; padding: 2px; }
.ngg-gallery-thumbnail img:hover { border:none; background-color:#ff0000; } /* iamge color on hover */
.ngg-navigation { height:20px; }
.ngg-navigation a.page-numbers:hover, .ngg-navigation a.prev:hover, .ngg-navigation a.next:hover { background-color:#333333; }

.ngg-navigation span { color: #ff0000; font-weight: normal; } /* nav color */

.ngg-navigation{ text-align: left; }

.ngg-navigation a.page-numbers,
.ngg-navigation a.next,
.ngg-navigation a.prev,
.ngg-navigation span.page-numbers,
.ngg-navigation span.next,
.ngg-navigation span.prev {
	border: none;
	margin-right:3px;
	padding:0;
    text-decoration: none;
    color: #929292;
}

.ngg-navigation a.page-numbers:hover,
.ngg-navigation a.next:hover,
.ngg-navigation a.prev:hover,
.ngg-navigation span.page-numbers:hover,
.ngg-navigation span.next:hover,
.ngg-navigation span.prev:hover {
	background: none;
	color: #ff0000 !important; /* nav color on hover */
	text-decoration: none !important;
}

/*------------------------------------------------------------------
	CONTACT FORM
-------------------------------------------------------------------*/
/* Label */
.gfield_label, .details .left h4, .details .right h4{ 
	color: #fff; 
	font-family: 'luxi bold', Arial, sans-serif;
	font-weight: bold; 
	font-size: 16px; 
}

.gfield_label:hover{ color: #ff0000; }

/* field borders (override form.css)*/
.gform_wrapper .gform_body input, .gform_wrapper .gform_body select, .gform_wrapper .gform_body textarea {
	border: 1px solid #eee !important;
	background: #fff !important;
}

/* field borders on focus (override form.css)*/
.gform_wrapper .gform_body input:focus, .gform_wrapper .gform_body select:focus, .gform_wrapper .gform_body textarea:focus {
	border: 1px solid #ff0000 !important;
	background: #f3f3f3 !important;
	outline: none; /* removes the default glow on focus*/
}

/* Field */
#field_1_1, #field_1_2, #field_1_3, #field_1_6{ width: 220px; float: left; }

/* Textarea (override form.css) */
.gform_wrapper .gform_body textarea { width: 420px !important; }

/* submit button*/
.gform_wrapper .gform_footer input{
	width: 68px;
	height: 24px;
	background: url("../images/submit.jpg") no-repeat !important;
	font-size: 14px !important;
	font-family: 'Roboto Bold', Arial, sans-serif;
	color: #fff !important;
	padding: 5px 8px !important;
	text-transform: uppercase;
	border: 0 !important;
	-webkit-border-radius: 0 !important;
	-moz-border-radius: 0 !important;
	border-radius: 0 !important;
}

*+html .contact-wrapper .gform_body ul li{
	list-style-image: none; /* IE7 list fix */
}

/*------------------------------------------------------------------
	CONTACT DETAILS
-------------------------------------------------------------------*/
.details li a{ color: #ff0000; }

/*------------------------------------------------------------------
	[ FONTS ]
-------------------------------------------------------------------*/
@font-face {
    font-family: 'luxi sans';
    src: url('../fonts/luxisr-webfont.eot');
    src: url('../fonts/luxisr-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/luxisr-webfont.woff') format('woff'),
         url('../fonts/luxisr-webfont.ttf') format('truetype'),
         url('../fonts/luxisr-webfont.svg#luxisr') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'luxi bold';
    src: url('../fonts/luxisb-webfont.eot');
    src: url('../fonts/luxisb-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/luxisb-webfont.woff') format('woff'),
         url('../fonts/luxisb-webfont.ttf') format('truetype'),
         url('../fonts/luxisb-webfont.svg#luxisb') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto Bold';
    src: url('../fonts/Roboto-Bold-webfont.eot');
    src: url('../fonts/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Bold-webfont.woff') format('woff'),
         url('../fonts/Roboto-Bold-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Bold-webfont.svg#RobotoBold') format('svg');
    font-weight: normal;
    font-style: normal;
}