@import "grid.less";



/* new clearfix -- */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
	}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */


/************************************************************************/
/* GRID */
/************************************************************************/

@columns: 12;
@column-width: 60;
@gutter-width: 20;

.center
{
	width: 960px;
	margin: 0 auto;
	overflow: hidden;
}

/************************************************************************/
/* COLORS, FONTS and MIXINS */
/************************************************************************/

@dark_blue: #003d98;
@lighten_blue: #0074c5;
@light_blue: #65bfee;
@gray: #dddddd;
@light_gray: #f0f0f0;
@yellow: #ffae00;
@black: #000000;
@lighter_black: #222222;
@text_black: #313131;

@base_url: "wp-content/themes/smartfreight";
@base_url2: "wp-content/themes/smartfreight";

@font-face {
	font-family: lubalin;
	src: url("@{base_url2}/fonts/LubalinGraphStd_Demi.otf");
}


.italic_georgia
{
	font-family: Georgia, Times, "times new roman", serif;
	font-style: italic;
}


.radial_gradient(@colorA, @colorB)
{
	background-color:@colorA;
	background-image: -moz-radial-gradient(50% 50%, ellipse closest-side, @colorA, @colorB 100%);
	background-image: -webkit-radial-gradient(50% 50%, ellipse closest-side, @colorA, @colorB 100%);
	background-image: -o-radial-gradient(50% 50%, ellipse closest-side, @colorA, @colorB 100%);
	background-image: -ms-radial-gradient(50% 50%, ellipse closest-side, @colorA, @colorB 100%);
	background-image: radial-gradient(50% 50%, ellipse closest-side, @colorA, @colorB 100%)
}

.linear_gradient(@c1: #fff, @c2: #000)
{
	background-color: @c1; /* fallback color */
	background-image: -moz-linear-gradient(100% 100% 90deg, @c1, @c2);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(@c1), to(@c2));

}

.rounded(@b:10)
{
	-moz-border-radius: @b;
	-webkit-border-radius: @b;
	border-radius: @b;
}

.transition (@property:opacity, @time:.5s, @ease:ease)
{	
	-webkit-transition: @property @time @ease;
	-moz-transition: @property @time @ease;
	-o-transition: @property @time @ease;
	transition: @property @time @ease;
}





/************************************************************************/
/* GENERAL */
/************************************************************************/


body
{
	font-family: Arial, "helvetica neue", Helvetica, sans-serif;
	background: @light_gray;
	
	&.home
	{
		background: @light_blue;
	}
}

a
{
	&:link, &:visited
	{
		text-decoration: none;
		color: @lighten_blue;
	}
	
	&:hover
	{
		text-decoration: underline;
	}
	
	&:visited
	{
		color: darken(@gray, 35%);
	}
}

input[type="text"], input[type="email"]
{
	border: 1px solid @gray;
	height: 24px;
	.rounded(4px);
}

textarea
{
	border: 1px solid @gray;
	.rounded(4px);
}

input[type="submit"], 
.button
{
	border: 1px solid darken(@yellow, 5%);
	.linear_gradient(lighten(@yellow, 10%), @yellow);
	.rounded(4px);
	color: white;
	text-shadow: 0 1px 2px darken(@yellow, 30%);
	cursor: pointer;
	
	.transition(all, .5s, ease);
	
	&:hover
	{
		.linear_gradient(lighten(@yellow, 20%), lighten(@yellow, 1%));
		text-decoration: none;
		background-image: url("/@{base_url}/images/button-divide.png");
		background-position: center right;
		background-repeat: no-repeat;
		padding-right: 40px;
	}
}

.button
{
	padding: 7px 20px;
	display: inline-block;
	background-image: url("/@{base_url}/images/button-divide.png");
	background-position: center right;
	background-repeat: no-repeat;
	padding-right: 40px;
}

#respond #submit
{
	font-size: 16px;
	padding: 8px 20px;
}


/************************************************************************/
/* HEADER REGION */
/************************************************************************/

#main_header_wrapper
{
	position: relative;
	z-index: 50;
	background: white;
	
	ul
	{
		list-style: none;
		
	    li
	    {
	    	display:inline;
	    	float: left;
	    	
	    	a
	    	{
	    		float: left;
	    		display: block;
	    	}
	    }
	}
	
	.social, #second_nav
	{
		clear: both;
		overflow: hidden;
		float: right;
		padding: 2px 0;
	}
	
	
	
	.top
	{
		height: 113px;
	}
	
	#logo
	{
		.column(4);
		
		position: relative;
		top:29px;
	}
	
	.search
	{
		.column(8);
		
		position: relative;
		top: 27px;
		
		form
		{
			position: relative;
			
			input[type="text"]
			{
				width: 220px;
				height: 22px;
			}
			
			input[type="submit"]
			{
				position: absolute;
				top:1px;
				right: 2px;
			}
		} /* form */
		
		
		
		.social
		{
			margin: 20px 0 0 0;
			width: 350px;
			
			ul
			{
				overflow: hidden;
				float: left;
				
				li
				{
					margin: 0 5px 0 0;
				}
			}
			
			form
			{
				float: left;
			}
		}
	}
	
	#second_nav
	{
		ul
		{
			li
			{
				font-size: 13px;
				color: @dark_blue;
				padding: 0 0 0 27px;
				
				a
				{
					&:link, &:visited
					{
						color: @dark_blue;
					}
				}
			}
		}
	}
	
	/* -- Main Navigation -- */
	
	.blue
	{
		.radial_gradient(@lighten_blue, @dark_blue);
		box-shadow: 0 2px 5px lighten(@black, 0%);
		border-top: 2px solid @light_blue;
		height: 40px;
		position: relative;
		
		.center
		{
			overflow:visible;
		}
	}

	#main_nav
	{
		height: 40px;
		.column(12);
		position: relative;
		z-index: 50;
		
		ul
		{
			li
			{
				float: left;
				margin: 0 61px 0 0;
				position: relative;
				
				&:last-child
				{
					margin: 0;
				}
				
				
				
				a
				{
					&:link, &:visited
					{
						float: left;
						display: block;
						line-height: 40px;
						text-transform: uppercase;
						.transition(all, .2s, ease);
						color: white;
						font-weight: 100;
						text-shadow: 0 1px 2px darken(@dark_blue, 10%);
						border-bottom: 7px solid fadeout(@light_blue,100%);
						height: 33px;
					}
					
					&:hover
					{
						border-bottom: 7px solid @light_blue;
						text-decoration: none;
					}
				} /* a */
				
				&.current-menu-item, 
				&.current-page-ancestor,
				&.current-menu-ancestor,
				&.current-menu-parent,
				&.current-page-parent
				{
					a
					{
						border-bottom: 7px solid @light_blue;
						text-decoration: none;
					}
				}
				
				ul
				{
					display: none;
					.transition(all, .3s, ease);

				}
				
				/* -- SUBMENU -- */
				
				&:hover
				{
					ul:before
					{
						content:"";
						position: absolute;
						top: 0px;
						left: 0px;
						width: 100%;
						display: block;
						height: 8px;
						.linear_gradient(darken(@dark_blue, 12%), @dark_blue);
					}
					
					ul:after
					{
						content: "";
						position: absolute;
						bottom: 1px;
						left: 1px;
						height: 7px;
						width: 218px;
						background: @light_blue;
						display: block;
					}
					
					ul
					{
						display: block;
						position: absolute;
						top: 40px;
						left: 0;
						background: @dark_blue;
						padding: 10px 10px 20px 10px;
						
						li
						{
							width: 200px;
							margin: 0;

							a
							{
								&:link, &:visited
								{
									line-height: 15px;
									height: auto;
									font-size: 16px;
									text-transform: capitalize;
									width: 190px;
									padding: 5px;
									.transition(all, .3s, ease);
									border-bottom: none;
								}
								
								&:hover
								{
									border-bottom: none;
									height: auto;
									background: @lighten_blue;	
								}
							}
						}
					}
				}
			}
		} /* UL */
	}	
}



/************************************************************************/
/* SLIDESHOW */
/************************************************************************/

#slideshow-nav { display:block; position:absolute; right:0; top:-35px; }
	
#slideshow-nav li { display:inline; float:left; }
	
#slideshow section { width:100%; height:420px; display:none; }
		


#slideshow
{
	width: 100% !important;
	position: relative;
	z-index: 40;
	height: 420px !important;
	overflow: hidden;
	
	.image
	{
	}
	
	.center
	{
		height: 420px;
	}
	
	.slide
	{
		height: 420px;
		display: block;
		width: 100%;
		
		.content
		{			
			padding: 20px;
			.rounded(15px);
			
			&.Yes
			{
			
				background: rgba(255,255,255,.65);
				
			}
		}
		
		.title
		{
			position: relative;
			
			h1
			{
				font-family: lubalin, helvetica, "helvetica neue", Arial, sans-serif;
				font-size: 36px;
				position: relative;
				z-index: 0;
				color: @dark_blue;
			}
		}
		
		.text
		{
			margin-top: 10px;
			font-weight: bold; 
			line-height: 19px;
		}
	}
	
	.button
	{
		margin: 20px 0 0 0;
		.italic_georgia;
		color: @lighter_black;
		font-weight: bold;
		text-shadow: 0 1px 0 lighten(@yellow, 20%);
		
	}
	
	.content
	{
		.column(5);
		float: right;
		position: relative;
		top: 30px;
	}
}



/************************************************************************/
/* BOTTOM HALF */
/************************************************************************/

.bottom_half
{
	background-image: url("/@{base_url}/images/grid-bg.png");
	background-color: @light_blue;
	display: block;
	height: 280px;
	
	.center
	{
		overflow: visible;
		height: 100%;
	}
	
	.panels
	{
		a
		{
			&:link, &:visited
			{
				color: white;
			}
		}
	}
	
	/* PANELS ONE */
	.panels.one
	{
		.column(12);
		height: 290px;
		position: relative;
		
		
		.rounded(5px);
		background-color: @dark_blue;
		background-image: url("/@{base_url}/images/bg-home-panels.jpg");
		background-repeat: no-repeat;
		box-shadow: 0 -1px 0 lighten(@lighten_blue, 40%);
		
		z-index: 60;
		top: -23px;
		
		.panel
		{
			width: 242px;
			display: block;
			float: left;
			padding: 30px 35px 0 35px;
			border-right: 1px solid rgba(255,255,255, .4);
			height: 260px;
			
			color: white;
			color: rgba(255,255,255,.90);
			
			&:last-child
			{
				border-right:0;
			}
			
			.title
			{
				.italic_georgia;
				font-size: 22px;
				padding: 0 0 20px 0;
				font-weight: normal;
			}
			
			.content
			{
				font-size: 13px;
				line-height: 20px;
				
				.button
				{
					position: absolute;
					bottom: 20px;
					
					.italic_georgia;
					color: black;
					font-weight: bold;
					text-shadow: 0 1px 0 lighten(@yellow, 20%);
				}
			}
			
			ul, ol
			{
				margin: 0 0 0 18px;
			}
		} /* Panel */
	} /* Panels one */
}







/************************************************************************/
/* INNER PAGE */
/************************************************************************/

img.alignright {float:right; margin:0 0 10px 10px;}
img.alignleft {float:left; margin:0 10px 10px 0;}
img.aligncenter {display: block; margin-left: auto; margin-right:auto;}
a img.alignright {float:right; margin:0 0 10px 10px;}
a img.alignleft {float:left; margin:0 10px 10px 0;}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto;}


#main_section
{
	position: relative;
	margin-bottom: 20px;
	
	.bg
	{
		background: url("/@{base_url}/images/grid-bg.png") @light_blue repeat-x top center;
		height: 300px;
		display: block;
		position: absolute;
		left:0; right:0;
		z-index: 1;
	}
	
	.center
	{
		position: relative;
		z-index: 10;
		min-height: 300px;
		padding-top: 33px;
	}
	
	&.inner
	{
		#main_content
		{
			.column(8);
			
			font-size: 14px;
			color: @text_black;
			background: url("/@{base_url}/images/Content-BG-Shadow.png") bottom right no-repeat;
			padding-bottom: 42px;
			line-height: 19px;
				
			.padding
			{
				padding: 20px;
				background: white;
				border: 1px solid @gray;
			}	
			
		
			p
			{
				padding: 8px 0;
			}
			
			h1, h2, h3, h4, h5
			{
				.italic_georgia;
				margin: 15px 0 5px 0;
				line-height: 30px;
			}
			
			h1
			{
				font-size: 30px;
			}
			
			h2
			{
				font-size: 27px;
			}
			
			h3
			{
				font-size: 23px;
			}
			
			h4
			{
				font-size: 20px;
				color: #0074c5;
				line-height: 24px;
			}
			
			h5
			{
				font-size: 14px;
				cursor:pointer;
				line-height:20px;
			}
			
			ul,ol
			{
				padding: 5px 0 5px 20px;
			}
		}
		
		.post
		{
			a
			{
				&:link, &:visited
				{
					
				}
			}
		}
		&.blog
		{
			.post
			{
				border-bottom: 1px solid @light_blue;
				padding: 0 0 20px 0;
				
				&:last-child
				{
					border-bottom: none;
				}
				
				header
				{
					
					.meta
					{
						font-style: italic;
						color: gray;
					}
					
					h1
					{
						a
						{
							color: @yellow;
						}
					}
				}
			}
		}
		
		&.testimonials
		{
			.author
			{
				text-align: right;
				font-size: 18px;
				.italic_georgia;
			}
			
			.post
			{
				border-bottom: 1px solid @light_blue;
				padding: 20px 0;
				
				&:last-child
				{
					border-bottom: none;
				}
			}
		}
	}
	
}

.blog_nav
{
	text-align: center;
	padding: 10px 0 0 0;
	
	span
	{
		padding: 0 10px;
	}
	
	a
	{
		font-size: 16px;
		color: @dark_blue;
	}
}


/************************************************************************/
/* SIDEBAR */
/************************************************************************/

#sidebar
{
	.column(4);
	width: 272px;
	padding: 25px 13px 13px 13px;
	min-height: 300px;
	.rounded(4px);
	border: 1px solid @lighten_blue;
	color: white;
	background: url("/@{base_url}/images/sidebar-bottom-bg.png") center bottom no-repeat, url("/@{base_url}/images/sidebar-top-bg.png") center top no-repeat @lighten_blue;
	
	
	a
	{
		&:link, &:visited
		{
			color: white;
		}
	}
	
	.pages
	{
		
		
		
		a, a.page_title
		{
			&:link, &:visited
			{
				.italic_georgia;
				font-size: 19px;
				font-weight: bold;
				color: white;
				text-shadow: 0px 3px 2px darken(@lighten_blue, 15%);
			}
		}
		
		a.page_title
		{
			margin: 0 0 15px 0;
			text-align: right;
			display: block;
			font-size: 22px !important;
			position: relative;
			top:-15px;
		}
		
		ul
		{
			li
			{
				margin: 0 0 20px 0;
				text-align: right;
			}
		}
		
		.current_page_item, h1.page_title
		{
			height: 52px;
			margin: 0;
			display: block;
			width: 331px;
			left: -22px;
			position: relative;
			background: url("/@{base_url}/images/sidebar-highlight-menu.png") no-repeat;
			
			a
			{
				height: auto;
				display: block;
				font-size: 22px;
				position: absolute;
				text-shadow: 0px 3px 2px darken(@yellow, 15%); 
				top:5px;
				right: 36px;
			}
			
			&.subpage
			{
				a
				{
					font-size: 19px;
				}
			}
		}	
	}
	
	.box
	{
		border-bottom: 3px solid @light_blue;
		padding: 10px 0;		
		
			font-size: 13px;
			line-height: 18px;	
			
		.title
		{
			.italic_georgia;
			font-size: 22px;
			color: lighten(@light_blue, 20%);
			padding: 5px 0 10px 0;
			
			a
			{
				color: lighten(@light_blue, 20%);
			}
		}
		
		
			
		
		
		ul
		{
			margin: 0 0 0 20px;
			
			li
			{
				margin: 5px 0;
				line-height: 15px;
			}
		}
	}
	
	.demo
	{
		display: block;
		height: 70px;
		
		&.line
		{
			border-top: 3px solid @light_blue;
		}
		
		a
		{
			&:link, &:visited
			{
				display: block;
				height: 70px;
				line-height: 70px;
				background: url("/@{base_url}/images/sidebar-video-icon.png") no-repeat left center;
				padding: 0 0 0 80px;
				.italic_georgia;
				font-size: 22px;
			}
		}
	}
	
	.testimonials
	{
		.title
		{
			padding-bottom: 5px;
		}
		.content
		{
			background: url("/@{base_url}/images/sidebar-testimonial-bg.png") no-repeat top left;
			padding-top: 10px;
		}
	}
	
	.subscribe
	{
		input[type="email"]
		{
			width: 100%;
		}
	}
	
}


/************************************************************************/
/* FORMS */
/************************************************************************/

.wpcf7
{
	.wpcf7-text, textarea
	{
		width: 300px;
	}
	
	.wpcf7-submit
	{
		font-size: 15px;
		padding: 5px 15px;
	}
}

/************************************************************************/
/* FOOTER */
/************************************************************************/

.home 
{
	.panels.footer.two
	{
		background-color: @light_blue;
	}
}

	.panels.footer.two
	{
		
		display: block;
		clear: both;
		
		.center
		{
			padding: 20px 0;
		}		
		.panel
		{
			.column(4);
			
			.title
			{
				margin-bottom: 10px;
				.italic_georgia;
				font-weight: normal;
				font-size: 18px;
				color: @dark_blue;
			}
			
			&.one
			{
				
				form
				{
					position: relative;
				}
				
				input[type="email"]
				{
					width: 99%;
					
				}
				
				input[type="submit"]
				{
					position: absolute;
					top: 2px;
					right: 1px;
				}
			}
			
			
			
			&.two
			{
				text-align: center;
				
				img
				{
					box-shadow: 0 3px 20px desaturate(@dark_blue, 30%);
				}
			}
			
			&.three
			{
				line-height: 20px;
				.col
				{
					.column(2);
					margin: 0;
					font-size: 12px;
					color: @lighter_black;
				}
			}
		}	
	}
	
	

#main_footer
{
	position: relative;
	height: 170px;
	background: @lighter_black;
	
	:before
	{
		content: "";
		display: block;
		position: absolute;
		top:0;
		left: 0;
		height: 10px;
		width: 100%;
		.linear_gradient(@black, @lighter_black);
		
	}
	
	.center
	{
		padding: 20px 0 0 0;
	}
	
	.col1
	{
		.column(4);
		font-size: 11px;
		color: lighten(@lighter_black, 20%);
	}
	
	.col2
	{
		.column(8);
		
		ul
		{
			list-style: none;
			overflow: hidden;
			float: right;
			
			li
			{
				border-left: 1px solid lighten(@lighter_black, 20%);
				color: lighten(@lighter_black, 50%);
				padding: 0px 0 2px 10px;
				margin: 0 0 0 10px;
				font-size: 12px;
				overflow: hidden;
				float: left;
				
				&:first-child
				{
					border-left: none;
				}
				
				a
				{
					&:link, &:visited
					{
						display: block;
						float: left;
						color: lighten(@lighter_black, 50%);
						font-size: 12px;
						text-transform: uppercase;
					}
				}
			}
		}/* ul */
		
		ul.social
		{
			margin-top: 10px;
			
			li
			{
				padding: 0 0 0 17px;
				height: 17px;
				line-height: 17px;
				
				a
				{
					font-size: 12px;
					text-transform: capitalize;
				}
			}
			
			.twitter
			{
				background: url("/@{base_url}/images/icon-twitter-15x15.png") no-repeat left center;
			}
			.facebook
			{
				background: url("/@{base_url}/images/icon-facebook-15x15.png") no-repeat left center;
			}
			.linkedin
			{
				background: url("/@{base_url}/images/icon-linkedin-15x15.png") no-repeat left center;
			}
			.rss
			{
				background: url("/@{base_url}/images/icon-rss-15x15.png") no-repeat left center;
			}
		}
	}
}

.more-link {font-family: Georgia, Times, serif;font-style: italic;color:#000 !important;font-weight: bold;text-shadow: 0 1px 0 #FFCE66;border: 1px solid #E69D00;border-radius:4px;padding: 7px 20px;display: inline-block;background: #FFBE33;text-decoration:none;}
.more-link:visited { color:#000 !important; }