/*******************************************************************************

	CSS on Sails Framework
	Title: Transfreight
	Author: XHTMLized (http://www.xhtmlized.com/)
	Date: November 2010

********************************************************************************

	1. BASE
		1.1 Reset
		1.1.2 HTML5 Elements
		1.2 Accessibility Navigation & Hide
		1.3 Clearfix
		1.4 Default Styles

	2. COMMON
		2.1 Container
		2.2 Header
		2.3 Navigation
		2.4 Content
		2.5 Sidebar
		2.6 Footer

	3. PAGES
		3.1 Home page
		3.2 What We Offer
		3.3 How We Do It.page-contact .primary .statement
		3.4 Contact Us
		3.5 Contact Us After Filling
		3.6 Privacy Policy
		3.7 Error 404

*******************************************************************************/


/* 1. BASE
--------------------------------------------------------------------------------
==============================================================================*/


/* 1.1 Reset
------------------------------------------------------------------------------*/

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, samp, small, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
q { quotes: none; }
q:before, q:after { content: ""; content: none; }
a, ins, del { text-decoration: none; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { vertical-align: top; }
th { text-align: left; }


/* 1.1.2 HTML5 Elements
------------------------------------------------------------------------------*/

article, aside, figcaption, figure, footer, header, hgroup, nav, section { display: block; }


/* 1.2 Accessibility Navigation & Hide
------------------------------------------------------------------------------*/

#accessibility-nav, .hide { position: absolute; top: -999em; left: -999em; height: 1px; width: 1px; }


/* 1.3 Clearfix
------------------------------------------------------------------------------*/

.clearfix:after,
#content:after,
#footer > section:after,
#footer .copyright:after,
.main-content:after,
.content-section:after,
.columns:after,
.carousel .carousel-nav ul:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }


/* 1.4 Default Styles
------------------------------------------------------------------------------*/

html { background: #eae4e4; }
body { font: 62.5%/1.5 Arial, Helvetica, sans-serif; color: #565454; background: #fff url(../images/common/bg-body.png) 0 0 repeat-x; }
hr { display: none; }
strong { font-weight: bold; }
em { font-style: italic; }
del { text-decoration: line-through; }
th { font-weight: normal; }
address, cite, dfn { font-style: normal; }
li { list-style: none; }
abbr, acronym { border-bottom: 1px dotted #999; cursor: help; }
input, textarea, select { font: 1em Arial, Helvetica, sans-serif; color: #565454; }
button { overflow: visible; padding: 0; cursor: pointer; }
button::-moz-focus-inner { padding: 0; border: none; }
a, a:visited { color: #df001c; text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
p, ul, ol, dl, table { margin-bottom: 18px; }
h1, h2, h3, h4, h5, h6 { font-family: NeoSans-Medium, Helvetica, Arial, sans-serif; line-height: 1.2; font-weight: normal; text-transform: uppercase; color: #000; }

h2,
.main-content .primary h1 { position: relative; z-index: 5; margin-bottom: 25px; font-size: 2.8em; }
h3 { margin: 40px 0 15px; font-size: 2.5em; }
hgroup h2 + h3 { margin: 0 0 5px; font-size: 1.6em; color: #797979; }

.company-name { font-style: normal; text-transform: uppercase; }

.outline { position: absolute; left: -1000em; }

@font-face { font-family: 'NeoSans-Medium'; src: url('fonts/neosans-medium-webfont.eot'); src: local('☺'), url('fonts/neosans-medium-webfont.woff') format('woff'), url('fonts/neosans-medium-webfont.ttf') format('truetype'), url('fonts/neosans-medium-webfont.svg#webfontAr35KSjE') format('svg'); font-weight: normal; font-style: normal; }


/* 2. COMMON
--------------------------------------------------------------------------------
==============================================================================*/


/* 2.1 Container
------------------------------------------------------------------------------*/

.container { width: 960px; margin: 0 auto; padding-right: 4px; font-size: 1.2em; background: transparent url(../images/common/bg-container-right.png) 100% 159px no-repeat; }
.content-section { clear: both; }


/* 2.2 Header
------------------------------------------------------------------------------*/

#header { position: relative; height: 159px; }
#header .site-name,
#header .site-name span { display: block; overflow: hidden; width: 257px; height: 59px; }
#header .site-name { position: absolute; top: 50px; left: 30px; }
#header .site-name span { background: url(../images/common/logo.png) no-repeat; position: absolute; top: 0; left: 0; z-index: 10; }
#header a.site-name span { cursor: pointer; }

.page-header,
.page-header-bg { height: 228px; background: #e10e2a url(../images/common/bg-page-header.png) 0 0 repeat-x; }
.page-header { /* position: relative; */ height: 163px; padding: 65px 0 0 30px; }
.page-header h1 { font-size: 2.55em; line-height: 1; color: #fff; }
.page-header h1,
.page-header h2,
.page-header h3,
.page-header a { position: relative; z-index: 5; }
.page-header-bg { position: absolute; top: 159px; left: 0; z-index: 1; width: 50%; }
.page-header .header-image { position: absolute; top: -50px; right: 0; z-index: 1; pointer-events: none; }


/* 2.3 Navigation
------------------------------------------------------------------------------*/

#navigation { position: absolute; top: 42px; right: 32px; }
#navigation ul { margin: 0;list-style: none; }
#navigation li { display: inline-block; margin-left: 39px; font: normal 1.1em/1 NeoSans-Medium; text-transform: uppercase; }
#navigation li a { display: inline-block; padding-top: 33px; text-decoration: none; color: #232020; }
#navigation li a:hover,
#navigationav li a:focus,
#navigation li a:active,
#navigation li a.active { color: #df001c; background: transparent url(../images/common/bullet-nav-active.png) 50% 0 no-repeat; }


/* 2.4 Content
------------------------------------------------------------------------------*/

#content { position: relative; z-index: 5; }

.primary { float: left; width: 640px; }

.main-content { width: 100%; margin-top: -80px; }
.main-content .primary { position: relative; padding-right: 5px; background: transparent url(../images/common/bg-main-content-right.png) 100% 0 no-repeat; }
.main-content .primary .inner { padding: 46px 30px 10px; background: #ede8e8 url(../images/common/bg-main-content-bottom.png) 0 100% no-repeat; }

.main-content .primary article hgroup h2 { margin: 2px 0 5px; font-size: 2em; }
.main-content .primary article hgroup h2 + h3 { margin-top: 0; font-size: 2.8em; color: #000; }
.main-content .primary article hgroup + h3 { margin: 27px 0 10px; font-size: 1.6em; color: #565454; }

/* Columns */
.double-a .first,
.double-a .second { float: left; width: 260px; }
.double-a .first { clear: left; }
.double-a .second { margin-left: 10px; }

.double-b { width: 580px; }
.double-b .first,
.double-b .second { width: 275px; margin-bottom: 15px; }
.double-b .first { float: left; clear: left; }
.double-b .second { float: right; }
.double-b h3, .double-b h4 { position: relative; margin: 0 0 -13px; font: bold 1.25em/1.1 Arial, Helvetica, sans-serif; color: #df001c; }
.double-b img { display: block; margin-bottom: 17px; }

/* Lists  */
.list-a { list-style: none; }
.list-a li { margin-bottom: 12px; padding-left: 31px; line-height: 1.5; font-weight: bold; color: #fff; background: transparent url(../images/common/bullet-a.png) 0 0 no-repeat; }
.list-a li a,
.list-a li a:visited { color: #fff; }

.list-b { list-style: none; }
.list-b li { margin-bottom: 13px; padding-left: 31px; line-height: 1.5; font-weight: bold; background: transparent url(../images/common/bullet-b.png) 0 0 no-repeat; }
.main-content .list-b li { color: #df001c; }

/* Paragraphs */
.statement { font-weight: bold; text-transform: uppercase; }

/* Buttons and links */

.button,
.button span,
button,
button span { display: inline-block; border-width: 0; line-height: 31px; cursor: pointer; color: #fff; background: url(../images/common/sprite-buttons.png) 0 0 no-repeat; }
.button,
button { padding-right: 22px; }
.button:hover,
.button:focus,
.button:active,
button:hover,
button:focus,
button:active { text-decoration: none; }
.button span,
button span { padding: 0 8px 0 15px; }

.button-a { font-weight: bold; background-position: 100% 0; }
.button-a span { text-align: center; background-position: 0 0; }

.button-b, .button-b:visited { font-weight: bold; color: #565454; background-position: 100% -36px; }
.button-b span { color: #565454; background-position: 0 -36px; }

.button-c,
.button-c span { line-height: 47px; }
.button-c { font-family: NeoSans-Medium; font-size: 1.5em; text-transform: uppercase; background-position: 100% -72px; }
.button-c span { background-position: 0 -72px; }

.button-d { background-position: 100% -124px; }
.button-d span { padding-left: 17px; background-position: 0 -124px; }

.go { margin-top: -6px;  }
.go a { padding-right: 13px; font-weight: bold; background: url(../images/common/bullet-c.png) 100% 50% no-repeat; }

.buttons-preview { clear: both; margin-bottom: 28px; list-style: none; }
.buttons-preview li { display: inline-block; margin-left: 5px; }

/* Forms */
.error { color: #f00; }


/* 2.5 Sidebar
------------------------------------------------------------------------------*/

.secondary { float: right; width: 260px; padding: 25px 30px 0 30px; }
.main-content .secondary { padding-bottom: 25px; }
.secondary h2 { margin-bottom: 30px; font-size: 2em; color: #000; }
hgroup h2,
.secondary hgroup h2 { margin-bottom: 20px; }
.secondary hgroup h2 + h3 { margin-bottom: 10px; }
.secondary .list-a { margin-bottom: 25px; }

.main-content .secondary { margin: 85px 0 0 -5px; color: #fff; background: #e10e2a url(../images/common/sidebar-bg-bottom.png) 0 100% no-repeat;}
.main-content .secondary h2 { position: relative; z-index: 5; margin-bottom: 19px; color: #fff; }

.secondary p + .button { float: right; }


/* 2.6 Footer
------------------------------------------------------------------------------*/

#footer { clear: both; margin-top: 45px; padding: 50px 0; font-size: 1.2em; background: #eae4e4 url(../images/common/footer-bg.png) 0 0 repeat-x; }
#footer > section { width: 904px; margin: 0 auto; padding: 0 30px; }
#footer h2 { margin-bottom: 21px; font-size: 2em;  color: #df001c; }
#footer h2 span { font-style: normal; color: #000; }
#footer .vcard { float: left; width: 226px; padding-bottom: 30px; color: #565454; }
#footer .vcard h3 { margin: 0 0 9px; font: bold 1.05em Arial, Helvetica, sans-serif; color: #000; }
#footer .vcard .organization-name { position: absolute; left: -1000em; }
#footer .vcard em.tel { font-style: normal; font-weight: bold; }
#footer #transfreight-main em.tel { display: inline-block; margin: -3px 0 -1px; font-size: 1.3em; color: #df001c; }
#footer .vcard abbr { border: none; }
#footer .copyright { clear: both; position: relative; width: 100%; }
#footer small { float: left; clear: both; width: 785px; padding-top: 3px; color: #797979; }
#footer small span { margin-right: 8px; }
#footer small a { margin-left: 8px; }
#footer .x-team { float: right; position: relative; width: 88px; height: 30px; margin: 2px 4px 0 0; text-align: center; }
#footer .x-team span { position: absolute; top: 0; left: 0; width: 88px; height: 30px; cursor: pointer; background: url(../images/common/logo-xteam.png) 0 0 no-repeat; }


/* 3. PAGES
--------------------------------------------------------------------------------
==============================================================================*/


/* 3.1 Home page
------------------------------------------------------------------------------*/

.homepage .page-header,
.homepage .page-header-bg { background-image: url(../images/home/bg-page-header-home.png); }
.homepage .page-header { height: 285px; }
.homepage .page-header-bg { height: 350px; }
.homepage .page-header hgroup h2 { margin: -7px 0 6px; font-size: 2.55em; line-height: 1; color: #fff; }
.homepage .page-header hgroup h3 { margin: 0 0 14px; font-size: 2em; color: #f4a3af; }
.homepage .main-content { margin: -112px 0 45px; }
.homepage .main-content .secondary { margin-top: 33px; padding-top: 15px; padding-bottom: 20px; }
.homepage .content-section .secondary p { width: 280px; margin-bottom: 8px; }
.homepage .content-section .secondary p + .button { float: right; margin: 16px -30px 10px 0; }
.homepage .main-content .secondary .list-a { position: relative; z-index: 5; margin-bottom: 5px; }

.carousel .carousel-nav { padding: 17px 34px 12px; background: url(../images/home/bg-carousel-nav.png) 0 0 repeat-x; }
.carousel .carousel-nav ul { width: 100%; margin: 0; list-style: none; }
.carousel .carousel-nav li { float: left; margin: 0 9px 0 0;}
.carousel .carousel-nav li a { float: left; width: 21px; height: 21px; overflow: hidden; outline: none; text-indent: -1000em; background: url(../images/home/nav-carousel.png) -30px 0 no-repeat; }
.carousel .carousel-nav li a:hover,
.carousel .carousel-nav li a:focus,
.carousel .carousel-nav li a:active,
.carousel .carousel-nav li a.active { background-position: 0 0; }

.carousel .carousel-content { padding-bottom: 5px; background: url(../images/common/bg-main-content-bottom.png) 0 100% no-repeat; }
.carousel .carousel-content ul { overflow: hidden; margin: 0; list-style: none; }
.carousel .carousel-content ul li { background-color: #eae4e4; width: 640px; }
.carousel .carousel-content li hgroup { width: 580px; min-height: 72px; padding: 48px 30px 40px; background-color: #030303; }
.carousel .carousel-content li h3 { margin: 0 0 7px; font-size: 2em; color: #df001c; }
.carousel .carousel-content li h4 { margin: 0; font-size: 2.5em; color: #fff; }
.carousel .carousel-content li .description { position: relative; min-height: 144px; padding: 35px 280px 18px 30px; }
.carousel .carousel-content li .description p { margin: 0; }
.carousel .carousel-content li img { position: absolute; right: 0; top: 0; }

.carousel .carousel-content li.consolidate img { top: -85px; } 

.carousel .carousel-content li.simplicity .description { padding-right: 320px; }
.carousel .carousel-content li.simplicity img { top: -70px; right: 32px; }

.carousel .carousel-content li.anyfreight hgroup { padding-top: 36px; padding-bottom: 28px; }
.carousel .carousel-content li.anyfreight h4 { width: 430px; font-size: 2.1em; }
.carousel .carousel-content li.anyfreight img { top: -32px; }

.carousel .carousel-content li.security h4 { font-size: 2em; }
.carousel .carousel-content li.security img { top: -38px; right: -2px; }

.carousel .carousel-content li.outcome h4 { margin-top: -2px; font-size: 2.1em; }
.carousel .carousel-content li.outcome img { top: -53px; }

.carousel .carousel-content li.solutions img { top: -28px; }


/* 3.2 What We Offer
------------------------------------------------------------------------------*/

.page-offer .header-image { top: -38px; }
.page-offer .main-content .double-b { position: relative; z-index: 5; padding-top: 15px; }
.page-offer .main-content .secondary { margin-top: 113px; }
.page-offer .main-content .secondary .list-a li { margin-bottom: 25px; padding-left: 26px; }
.page-offer .main-content .secondary .list-a h3 { margin: 0 0 9px; font: bold 1em Arial, Helvetica, sans-serif; text-transform: none; color: #fff; }
.page-offer .main-content .secondary .list-a p { margin-left: -26px; font-weight: normal; }


/* 3.3 How We Do It
------------------------------------------------------------------------------*/

.page-how .header-image { top: -42px; }

.page-how .introduction { position: relative; z-index: 5; }
.page-how .introduction p { margin-bottom: 8px; }

.page-how .steps { position: relative; z-index: 5; min-width: 380px; margin-top: -75px; padding-top: 70px; list-style: none; background: url(../images/how-we-do-it/bg-steps.png) 35px 0 no-repeat; }
.page-how .steps li { float: left; font: 1.8em/1 NeoSans-Medium, Arial, Helvetica, sans-serif; text-transform: uppercase; color: #fff; }
.page-how .steps li.discover { margin-right: 39px; }
.page-how .steps li.deliver { margin-right: 36px; }

.page-how ol.double-b { padding-top: 10px; list-style: none; }
.page-how ol.double-b li { margin-bottom: 7px; }

.page-how .main-content .secondary { margin-top: 115px; }
.page-how .main-content .secondary img { display: block; margin: -2px auto 17px; }
.page-how .main-content .secondary .list-a { margin-bottom: 18px; }
.page-how .main-content .secondary .list-a li { margin-bottom: 6px; padding-left: 26px; font-weight: normal; text-transform: uppercase; }


/* 3.4 Contact Us
------------------------------------------------------------------------------*/

.page-contact .main-content .primary h2,
.page-contact .main-content .primary h3 { color: #df001c; }
.page-contact .primary .statement { position: relative; z-index: 5; font: 1.2em/1.3 NeoSans-Medium, Helvetica, Arial, sans-serif; }

.page-contact .main-content .secondary { margin-top: 112px; }

.page-contact .secondary .list-a { margin-bottom: 15px; }
.page-contact .secondary .list-a .vcard { padding-left: 26px; font-weight: normal; }
.page-contact .secondary .list-a .vcard h3 { margin: 0 0 3px; font: bold 1em Arial, Helvetica, sans-serif; text-transform: none; color: #fff; }
.page-contact .secondary .list-a .vcard h3 .fn { position: absolute; left: -1000em; }
.page-contact .secondary .list-a .vcard .email { color: #fff; }

.page-contact form { padding-top: 15px; }
.page-contact form fieldset { margin-bottom: 17px; }
.page-contact form h3 { margin: 0 0 20px; font-size: 1.4em; }
.page-contact form .double-b h4 { margin-bottom: 1px; font-size: 1em; line-height: 1.5; text-transform: none; color: #565454; }
.page-contact form .double-b h4,
.page-contact form .double-b div { margin-bottom: 0; }
.page-contact form label { display: block; margin-bottom: 5px; font-weight: bold; }
.page-contact form .text { display: block; width: 274px; height: 25px; margin: 0 0 10px -1px; border: 1px solid #cac7c7; }
.page-contact form .text input { display: block; width: 259px; height: 14px; padding: 5px 7px; border: 1px solid #e8e8e8; border-width: 1px 0 0 1px; background: #fff; }
.page-contact form .select { display: block; min-height: 21px; margin-bottom: 12px; }
.page-contact form select { width: 100%; }
.page-contact form .checkboxes { margin-bottom: 13px; padding-top: 6px; }
.page-contact form .checkboxes li { margin-bottom: 11px; }
.page-contact form .checkboxes li input { margin-left: 0; }
.page-contact form .checkboxes li label { display: inline; margin-left: 8px; font-weight: normal; }
.page-contact form .buttons { margin: -7px 0 18px; text-align: right; }
.page-contact form .buttons button { margin-left: 7px; }

.page-contact .content-section { margin-top: 30px; }
.page-contact .content-section .primary { width: 580px; padding: 0 30px; }
.page-contact .content-section .primary h2 { font-size: 2.5em; }
.page-contact .content-section .list-b li { padding-left: 26px; font-weight: normal; }
.page-contact .content-section .list-b li p { margin-bottom: 13px; }
.page-contact .content-section .list-b li h3 { margin: 0 0 9px; font: bold 1em Arial, Helvetica, sans-serif; color: #df001c; }


/* 3.5 Contact Us After Filling
------------------------------------------------------------------------------*/

.page-contact-after-filling .primary .inner { padding: 0; background-color: #eae4e4; }
.page-contact-after-filling .contact-message { padding: 260px 30px 30px; background: url(../images/contact-us-after-filling/bg-contact-message.jpg) 50% 0 no-repeat; }
.page-contact-after-filling .contact-message h2 { margin-bottom: 11px; font-size: 2.55em; color: #df001c; }
.page-contact-after-filling .contact-message p { font: 1.6em NeoSans-Medium, Helvetica, Arial, sans-serif; text-transform: uppercase; }


/* 3.6 Privacy Policy
------------------------------------------------------------------------------*/

.page-privacy .container { background-image: url(../images/privacy-policy/bg-container-right-privacy.png); }
.page-privacy .header-image { top: 0; }

.page-privacy .main-content h3 { font-size: 1.6em; }
.page-privacy .main-content li { list-style: disc outside; margin: 0 0 0.5em 1em; }

/* 3.7 Error 404
------------------------------------------------------------------------------*/

.page-404 .page-header { height: 183px; padding-top: 45px; }
.page-404 .page-header h1 { margin-bottom: 4px; font-size: 3.1em; }
.page-404 .page-header h2 { margin-bottom: 18px; font-size: 2.45em; color: #f4a3af; }
.page-404 .page-header .header-image { top: -28px; }
.page-404 #footer { margin-top: 60px; }