@import 'reset.less';
@import 'grid.less';
@import 'typography.less';

//////////
// GRID //
//////////

// Specify the number of columns and set column and gutter widths
@columns: 12;
@column-width: 80;
@gutter-width: 0;

// Remove the definition below for a pixel-based layout
//@total-width: 100%;


/* $1 - Common Stuff /////////////////////////////////////////////////////////*/
body{
	background:#dbe9f4 url(../images/bg_body.jpg) no-repeat top center;
	overflow-y:scroll;
}

.center{
	margin:0 auto;
	max-width:960px;
}

.clear {
    clear: both;
    display: block;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    width: 0;
}

/* $2 - Layout ///////////////////////////////////////////////////////////////*/
#banner
{
	position:relative;
}

#header{
	background:#FFF;
	
	.column(7);
	.row(7);
	
	overflow:visible;
	height:180px;
	
	#logo{
		.column(4,7);
		
		overflow:visible;
		
		img{
			margin:3em;
			position:relative;
			left:-66px;
			z-index:1000;
		}
	} 
	#navigation{
		.column(3,7);
		font-size:1.5em;
		line-height:1;
		text-transform:uppercase;
		
		ul{
			padding:1.333em;
			
			li{
				
			}
		}
		
		span.language{
			float:left;
			margin-left:1.333em;
			height:18px;
			width:75px;
			background:url(../images/language.png) no-repeat left 1px;
			text-indent:-9999px;
		}
		
		ul#language{
			float:right;
			padding:0 1.333em 1.333em 0;
			
			li{
				display:block;
				float:left;
			}
			li.last{
				border:0;
			}
			
		}
	}
}

#social{
	.column(5);
	
	ul{
		float:right;
	}
}

#claim{
	.column(12);
	.row(12);
	
	img{
		margin: 88px 0 88px 80px;
	}
}

.articles{
	.column(12);
	.row(12);
		
	#first,#second,#third{		
		.image{
			.column(6,12);
			
			overflow:hidden;
			height:14em;
			
			img{
				max-width:100%;
			}
		}
		
		.content{
			.column(3,12);
			
			background:#FFF;
			height:14em;
			
			.padding{
				padding: 55px 0 0 30px;
			}
			p{
				margin-bottom:0.25em;
				text-transform:uppercase;
			}			
			a{
				background:url(../images/bg_link.png) no-repeat left 3px;
				height:2em;
				display:block;
				padding-left:14px;
				text-transform:uppercase;
				color:#fc0;
				font-weight:bold;
				text-decoration:none;
			}
		}
	}
	#first{
		.content{
			margin-right: 240px; /*REPLACE WITH VARIABLES OR PREFIX FUNCTION*/
		}		
	}
	
	#second{
		margin-left: 240px; /*REPLACE WITH VARIABLES OR PREFIX FUNCTION*/
		
		.image{
			.column (3,12);
			
			margin-right: 240px; /*REPLACE WITH VARIABLES OR PREFIX FUNCTION*/
		}
	}
	
	#third{
		.image{
			.column (3,12);
			
			margin-left: 240px; /*REPLACE WITH VARIABLES OR PREFIX FUNCTION*/
		}
		.content{
			.column (6,12);
		}
	}
}

#footer
{
	clear:both;
	background-color:#1c589b;
	
	#quicklinks{
		.column(6);
	}
	#contact{
		.column(6);
		
		color:#CCC;
	}
	
	a{
		color:#fc0;
	}
	
	.padding{
		padding:30px;
	}
}



body.page{
	background:#dbe9f4 url(../images/bg_body_follow.jpg) no-repeat top center;
		
	#claim{
		margin-left:80px;
		width:880px;
		height:153px;
		
		h1{
			float:left;
			margin:57px 0;
		}
	}
}

/* $3 - Elements /////////////////////////////////////////////////////////////*/
.navlist{
	li{
		display:block;
		float:left;
		margin-right:0.5em;
		padding-right:0.5em;
		height:1em;
		line-height:1em;
		margin:0.5em 0;
		margin-right:0.5em;
	}
	li.last{
		border:0;
		margin-right:0;
		padding-right:0;
	}
} 

#social{
	ul{
		margin-top:20px;
	}
	a{
		display:block;
		float:left;
		height:14px;
		text-indent:-9999px;
	}
	
	.facebook{
		width:78px;
		background:url(../images/sm_facebook.png) no-repeat;
	}
	.twitter{
		width:66px;
		background:url(../images/sm_twitter.png) no-repeat;
	}
	.share{
		width:55px;
		background:url(../images/sm_share.png) no-repeat;
	}
}



/* $4 - Navigation ///////////////////////////////////////////////////////////*/
.replacement{
	display:block;
	background-repeat:no-repeat;
	text-indent:-9999px;
}

#navigation{
	a{
		clear:both;
		display:block;
	}
	a:hover{
		span.replacement{
			background-position:left bottom;
		}
	}
}

#navigation_lv2{
	.column(11);
	
	margin-left:80px; /*replace with function*/
	
	height:49px;
	
	li{
		float:left;
		display:block;
		background:#1c589b;
		width:160px;	/*replace with function*/
		
		a{
			border-left:1px solid #4c7cb1;
			display:block;
			height:50px;
			line-height:50px;
			text-align:center;
			
			span{
				margin:0 auto;
			}
		}
		a:hover{
			span.replacement{
				background-position:left bottom;
			}
		}
	}
	li.first{
		a{
			border-left:0;
		}
	}
	li.current, li.section{
		a{
			background:url(../images/navi_selected.gif) no-repeat center right;
			margin-right:20px;
		}
	}
}

/* $5 - ContentPage //////////////////////////////////////////////////////////*/
#pagecontent{
	.column(6);
	
	background:#fff;
	
	.padding{
		padding:30px;
	}
}

#secondcol{
	.column(3);
	
}

#thirdcol{
	.column(3);
	
}


/* $6 - Referneces ///////////////////////////////////////////////////////////*/
.references{
	.category{
		clear:both;
		
		h2.category{
			.column(3);
			
			background:#FFF;
			height:180px;
			text-align:center;
			
			span{
				margin:0 auto;
				margin-top:80px;
			}				
		}
		.odd{
			h2.category{
				margin-left:240px !important;
			}
		}
		
		.jcarousel-clip{
			.column(6);
			
			height:180px;
			overflow:hidden;
		}
		.odd{
			.jcarousel-clip{
				.column(3);
			}
		}
		
		.item{
			.column(3);
			
			position:relative;
			height:180px;
			
			.hover{
				position:absolute;
				bottom:0;
				display:block;
				background-color: rgba(0, 0, 0, 0.5);
				color:#FFF;
				width:100%;
				
				span{
					font-weight:bold;
					font-size:1.333em;
					display:block;
					padding:1em;
				}
			}
		}
		.double{
			.column(3);
		}
		.single{
			.column(6);
		}
		
		.reference_pager{
			.column(3);
			
			text-indent:-9999px;
			display:block;
			float:left;
			background:#FFF url(../images/reference_pager.gif) no-repeat center center;
			height:180px;
		}
		.reference_pager:hover{
			cursor: pointer;
		}
	}
	a.back{
		display:block;
		height:30px;
		line-height:30px;
		background:#1C589B url("/themes/antec/images/navi_back.gif") no-repeat 10px center;
		width:auto;
		color:#FFF;
		padding:0 20px 0 30px;
		
		img{
			margin-top:5px;
		}
	}
}

/* $7 - Widgets //////////////////////////////////////////////////////////////*/
.WidgetHolder{
	background:#FFF;
	
	.typography{
		padding:30px 10px;
	}
	
	a.button_sidebar{
		padding:0 10px;
		display:block;
		background:#1c589b url(../images/navi_sidebar.gif) no-repeat right center;
		border-right:10px solid #1c589b;
		height:30px;
		overflow:hidden;
		
		span{
			margin-top:7px;
		}
	}	
}

/* $8 - FAQs /////////////////////////////////////////////////////////////////*/
.faqs{
	h2{
		margin-bottom:0.5em !important;
	}
	.question{
		background-position:center right !important;
		padding:0 15px 0 0 !important;
	}
	.answer{
		margin-bottom:2em;
	}
}