/******************************************
* StyleSheet by Alexis Creuzot - All right reserved
* 2011
*
* Using LESSCSS (http://lesscss.org)
*
******************************************/

@import "elements.less";

/*** COLORS ***/
@bg_gray	: #353535;
@text_gray	: #AAA;
@a_gray : #EEE;
@base_white: #FFE;
@base_blue	: #31C5E5;

/*** Font sizes ***/
@text_general : 19px;
@h1_general : 32px;
@h2_general : 22px;
@h1_title : 28px;
@h2_title : 18px;
@text_footer : 16px;

/******************************************/
/*
/* Base
/*
/******************************************/

body {
	margin:0;
	padding:0;
  background: @bg_gray url("../images/crissXcross.png") repeat;
  color: @text_gray;	
  font-family:'Josefin Sans','Helvetica Neue', Tahoma, Arial, sans-serif;
  text-shadow: 0 -1px 0 #000;
  font-size: @text_general;
  text-align:center;
}

h1 {
	font-weight: normal;
	margin:30px 0 0 0;
  font-size:@h1_general;
  text-shadow: 0 -2px 0 #000;
  color:@base_white;
}


h2 {
	font-weight: normal;
	margin:20px 0 0 0;
  font-size:@h2_general;
  text-shadow: 0 -2px 0 #000;
  color:@base_white;
}

a {
	color:@a_gray;
	text-decoration:none;
	&:hover{
		color:@base_blue;
	}
}

p {
	padding:0px;
	margin:10px 0 0 0;
	text-align:left;
}

/******************************************/
/*
/* Layout
/*
/******************************************/

/*----------------------------
	Allow gradient CSS effect
----------------------------*/

#page{
	margin:auto;
	width:100%;
	height:100%;
}

/*----------------------------
	CONTENT CONTAINER
----------------------------*/

#container{
	padding-top:50px;
  margin: 0 auto;
  width:68%;
  min-width: 700px;
  max-width: 1000px;
}

/*----------------------------
	TITLE
----------------------------*/

#Title {
	text-align:center;
	text-transform:uppercase;

	h1 {
	    font-size:@h1_title;
	    text-align:center;
	    color:@base_white;
	    text-shadow: 0 -2px 0 #000;
	    letter-spacing:8px
	}

	h2 {
	    font-size:@h2_title;
	    text-align:center;
	    color:@base_blue;
	    text-shadow: 0 -2px 0 #000;
	    letter-spacing:5px
	}
}

/*----------------------------
	TABS
----------------------------*/

#tabs{
	margin-top:40px;
	text-align:center;	

	ul.idTabs li{
		display:inline;
		margin:10px;

		&.active a{
			color:@base_blue;
		}
	}
}

/* Work tab */

#tab-work{ 
	img{
		margin-top:15px;
		width:100%;
		.box-shadow(0 1px 12px #000);
		.border-radius(5px, 5px, 5px, 5px);
	}

	.work_case{
		margin-bottom:100px;
	}
}

/* Design tab */

#tab-design  ul{
	margin-top:25px;
	list-style-type:none;

	li{
		display:inline;
	}

	img{
		margin:12px;
		border:3px solid transparent;
		.box-shadow(0 1px 12px #222);
		.border-radius(4px, 4px, 4px, 4px);
		&:hover{
			.box-shadow(0 1px 12px #000);
		}
	}
}

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

#footer {
	padding:50px 50px 20px 50px;
	font-size:@text_footer;
}