/***********************************************************
	Basic Markup
***********************************************************/

html, body, * {
	margin: 0;
	padding: 0;
	line-height: 1.2em;
}

body {
	background: #EFEFF0;
	font: normal 12px Helvetica, Arial, sans-serif;
	color: #333333;
}

h1 {}

h2 {
	font-size: 16px;
	padding: 15px 20px 12px;
	border-bottom: 1px solid #B6B6B7;
}

h3 {
	font-size: 16px;
	font-weight: bold;
}

h4 {
	font-size: 13px;
	margin:  15px 0 10px;
}

p {
	margin: 10px 0 7px;
	line-height: 1.3em;
}

ul {
	margin: 10px 0 7px;
	list-style: square;
}

li {
	padding-left: 1px;
	margin-left: 15px;
	line-height: 1.6em;
}

table {
	margin: 10px 0 7px;
}

table td {
	padding: 5px 0;
}

a {
	color: #3366CC;
}

a img {
	border: none;
}

label {
	cursor: pointer;
}

hr {
	display: none;
}

acronym {
	border-bottom: 1px dotted #FFFFCC;
	cursor: help;
}


/***********************************************************
	Container
***********************************************************/

#container {
	width: 920px;
	margin:  0 auto 20px;
}


/***********************************************************
	Header
***********************************************************/

#header {
	height: 67px;
	position: relative;
	border-bottom: 2px solid #333;
}

#header #logo {
	position: absolute;
	top: 10px;
	left: 10px;	
}

#header #logo a {
	width: 215px;
	height: 27px;
	padding: 10px;
	display: block;
	background: url("/images/logo.gif") no-repeat 10px 10px;
}

#header #logo h1 a span {
	display: none;
}

#header #siteDescription {
	color: #A4A4A5;
	position: absolute;
	top: 20px;
	right: 20px;
	width: 500px;
	text-align: right;
}

#header #siteDescription p {
	margin: 0;
	line-height: 1.4em;
}


/***********************************************************
	Main
***********************************************************/

#main {}

#main .category {
	padding: 0 0 50px;
}

#main .category .inner {
	position: relative;
	padding: 17px 17px 0;
}


/***********************************************************
	Caregories : Portfolio
***********************************************************/

#portfolio .inner {
	height: 306px;
}

#portfolio .item {
	height: 306px;
}

#portfolio .image {
	background: url("/images/bg_portfolio-img.gif") no-repeat;
	width: 564px;
	float: left;
}

#portfolio .image a,
#portfolio .image span {
	display: block;
	padding: 13px;
}

#portfolio .description {
	padding: 13px 0 0 17px;
	width: 302px;
	float: left;
}

#portfolio .job {
	margin-top: 5px;
}

#portfolio .nav {
	position: absolute;
	bottom: 0;
	right: 17px;
}

#portfolio .nav a span {
	display: none;
}

/* button next */

#portfolio .nav a#buttonNext {
	background: url("/images/bg_button-next.gif") no-repeat left top;
	float: left;
	width: 76px;
	height: 30px;
	outline: none;
}

#portfolio .nav a#buttonNext:hover {
	background: url("/images/bg_button-next.gif") no-repeat left -30px;
}

#portfolio .nav a#buttonNext.inactive {
	background-position: left bottom;
}

#portfolio .nav a#buttonNext.inactive:hover {
	background-position: left bottom;
}

/* button previous */

#portfolio .nav a#buttonPrevious {
	background: url("/images/bg_button-prev.gif") no-repeat left top;
	float: left;
	width: 91px;
	height: 30px;
	margin-right: 12px;
	outline: none;
}

#portfolio .nav a#buttonPrevious:hover {
	background: url("/images/bg_button-prev.gif") no-repeat left -30px;
}

#portfolio .nav a#buttonPrevious.inactive {
	background-position: left bottom;
}

#portfolio .nav a#buttonPrevious.inactive:hover {
	background-position: left bottom;
}



/***********************************************************
	Caregories : Services Web
***********************************************************/

#servicesWeb .inner {
	background: url("/images/bg_services.jpg") no-repeat 17px 17px;
}

#servicesWeb .inner .wrapper {
    height: 160px; /* IE "min-height" trick */
    min-height: 160px; /* IE "min-height" trick */
    background: url("/images/bg_services-wrapper.gif") no-repeat 0 bottom;
    margin-top: 27px;
    padding: 5px 28px 53px;
}
*>#servicesWeb .inner .wrapper {
    height: auto; /* IE "min-height" trick */
}

#servicesWeb .item {
	float: left;
	width: 252px;
	color: white;
}

#servicesWeb .item.nb2 {
	margin-left: 36px;
}

#servicesWeb .item.nb3 {
	margin-left: 38px;
}

#servicesWeb .item h4 {
	margin: 0 0 15px;
	text-align: center;
	font-size: 14px;
}

#servicesWeb .item p {
	line-height: 1.4em;
}

#servicesWeb .item a {
	color: #FFFFCC;
}

#servicesWeb .contactMe {
	text-align: center;
	margin-top: 15px;
}



/***********************************************************
	Caregories : Services Divers
***********************************************************/

#servicesDivers:after {	/* auto clear */
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
#servicesDivers {
	height: 1%;
}

#servicesDivers .inner {
	padding: 20px;
	width: 425px;
	float: left;
}

#servicesDivers h4 {
	margin-top: 0;
}

#servicesDivers #basecamp {
	float: right;
	margin: 15px 0 10px 15px;
}

#servicesDivers p {
	line-height: 1.4em;
}

/***********************************************************
	Caregories : Contact
***********************************************************/

#contact .inner {
	background: url("/images/bg_contact.jpg") no-repeat 17px 17px;
}

#contact .inner .wrapper {
    height: 160px; /* IE "min-height" trick */
    min-height: 160px; /* IE "min-height" trick */
    background: url("/images/bg_contact-wrapper.gif") no-repeat 0 bottom;
    margin-top: 23px;
    padding: 10px 23px 33px;
}
*>#contact .inner .wrapper {
    height: auto; /* IE "min-height" trick */
}

#contact .inner .wrapper:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#contact .item {
	float: left;
	width: 252px;
	margin-left: 41px;
}

#contact .item.nb1 {
	margin: 0;
}

#contact .item h4 {
	margin-top: 0;
}

#contact .source {
	font-size: 10px;
	margin-bottom: 0;
}

#contact .site {
	padding: 1px 4px;
	display: inline-block;
	color: white;
}

#contact .site.facebook {
	background: #3B5998;
}

#contact .site.twitter {
	background: #11B1E2;
}

#contact .site.kiva {
	background: #258215;
}

#contact .site.linkedin {
	background: #2A80AB;
}

#contact .date {
	color: #818181;
}

#contact .status {
	margin: 0 0 18px;
}

#contact .status a {
	color: #333;
	text-decoration: none;
	display: block;
	padding-top: 5px;
}

#contact .status a:hover {
	color: black;
	text-decoration: underline;
}

#contact #mail {}

#contact #mail input {
	padding: 2px 3px;
	width: 180px;
}

#contact #mail textarea {
	padding: 2px 3px;
	width: 244px;
}

#contact #mail .originalState {
	color: #818181;
}

#contact #mail a span {
	display: none;
}

#contact #mail a#sendButton {
	background: url("/images/bg_button-send.gif") no-repeat left top;
	float: left;
	width: 76px;
	height: 30px;
	margin-left: -2px;
}

#contact #mail a#sendButton:hover {
	background: url("/images/bg_button-send.gif") no-repeat left bottom;
}

#contact #mail .submit {
	display: none;
}


/***********************************************************
	Mail confirm
***********************************************************/

#confirm {
	padding: 60px 0;
}

#confirm h2 {
	border: none;
	text-align: center;
}

#confirm h2 span {
	padding: 15px 0 7px 48px;
	display: inline-block;
	background: url("/images/bg_confirm.gif") no-repeat left top;
}

#confirm p {
	text-align: center;
	line-height: 1.5em;
}


/***********************************************************
	Footer
***********************************************************/

#footer {
	border-top: 2px solid #333;
	padding: 12px;
	text-align: center;
	font-size: 11px;
}

#footer p {
	margin: 0;
}