/*-----------------------------------------------------------
	Duarte Pires Main Stylesheet File
	Copyright (c) Ali Salem. All Rights Reserved.
	http://alisalem.deviantart.com
-----------------------------------------------------------*/

/* CSS Reset
-----------------------------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	vertical-align: baseline;
	font-size: 100%;
	}
body {
	line-height: 1;
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
a {
	text-decoration: none;
	}
/* focus styles */
:focus {
	outline: 0;
	}
/* inserts somehow */
ins {
	text-decoration: none;
	}
del {
	text-decoration: line-through;
	}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
	}

/* General
-----------------------------------------------------------*/

body {
	background: #fff url(../images/bg.gif) repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	}

img {
	font-size: 10px;
	}

a {
	color: #000;
	}

#container {
	width: 900px;
	margin: 28px auto 0 auto;
	}
#container h1.portfolio {
	width: 594px;
	height: 113px;
	margin: 0 auto;
	background: url(../images/title-portfolio.gif) no-repeat;
	text-indent: -9999px;
	}

/* Header
-----------------------------------------------------------*/

#header {
	width: 512px;
	height: 101px;
	margin: 0 auto;
	background: url(../images/bg-header.jpg) no-repeat;
	}
#header p.tel {
	padding: 68px 0 0 385px;
	font-size: 10px;
	text-transform: uppercase;
	color: #2a705c;
	}
#header p.email {
	padding: 2px 0 0 368px;
	font-size: 10px;
	line-height: 1.1em;
	color: #2a705c;
	}
#header p.email a {
	color: #2a705c;
	}

/* Navigation
-----------------------------------------------------------*/

/* Home */

#navigation-home {
	width: 584px;
	height: 94px;
	margin: 20px auto 50px auto;
	}
#navigation-home li {
	float: left;
	}
#navigation-home a {
	height: 94px;
	display: block;
	font-size: 1px;
	}
#navigation-home span {
	visibility: hidden;
	}
#navigation-home-print {
	width: 118px;
	background: url(../images/navigation-home/1-print.gif) no-repeat;
	}
#navigation-home-identity {
	width: 98px;
	background: url(../images/navigation-home/2-identity.gif) no-repeat;
	}
#navigation-home-web {
	width: 92px;
	background: url(../images/navigation-home/3-web.gif);
	}
#navigation-home-icondesign {
	width: 102px;
	background: url(../images/navigation-home/4-icondesign.gif) no-repeat;
	}
#navigation-home-experiences {
	width: 101px;
	background: url(../images/navigation-home/5-experiences.gif) no-repeat;
	}
#navigation-home-downloads {
	width: 73px;
	background: url(../images/navigation-home/6-downloads.gif) no-repeat;
	}

/* Inner */

#navigation-inner {
	width: 57px;
	height: 407px;
	top: 270px;
	position: absolute;
	font-size: 1px;
	}
#navigation-inner a {
	width: 57px;
	display: block;
	}
#navigation-inner span {
	visibility: hidden;
	}
#navigation-inner-home { height: 53px; background: url(../images/navigation-inner/1-home.gif) no-repeat; }
#navigation-inner-print { height: 56px; background: url(../images/navigation-inner/2-print.gif); }
#navigation-inner-print:hover { background: url(../images/navigation-inner/2-print.gif) -57px; }
#navigation-inner-identity { height: 56px; background: url(../images/navigation-inner/3-identity.gif); }
#navigation-inner-identity:hover { background: url(../images/navigation-inner/3-identity.gif) -57px; }
#navigation-inner-web { height: 61px; background: url(../images/navigation-inner/4-web.gif); }
#navigation-inner-web:hover { background: url(../images/navigation-inner/4-web.gif) -57px; }
#navigation-inner-icondesign { height: 51px; background: url(../images/navigation-inner/5-icondesign.gif); }
#navigation-inner-icondesign:hover { background: url(../images/navigation-inner/5-icondesign.gif) -57px; }
#navigation-inner-experiences { height: 67px; background: url(../images/navigation-inner/6-experiences.gif); }
#navigation-inner-experiences:hover { background: url(../images/navigation-inner/6-experiences.gif) -57px; }
#navigation-inner-downloads { height: 63px; background: url(../images/navigation-inner/7-downloads.gif); }
#navigation-inner-downloads:hover { background: url(../images/navigation-inner/7-downloads.gif) -57px; }

/* Work Items
-----------------------------------------------------------*/

/* First */

#items-latestwork {
	background: url(../images/bg-latestwork.gif) no-repeat;
	}
#items-print {
	background: url(../images/bg-print.gif) no-repeat;
	}
#items-identity {
	background: url(../images/bg-identity.gif) no-repeat;
	}
#items-web {
	background: url(../images/bg-web.gif) no-repeat;
	}
#items-icondesign {
	background: url(../images/bg-icondesign.gif) no-repeat;
	}
#items-experiences {
	background: url(../images/bg-experiences.gif) no-repeat;
	}
#items-downloads {
	background: url(../images/bg-downloads.gif) no-repeat;
	}
.items-first {
	width: 878px;
	height: 253px;
	margin: 0 auto 0 auto;
	}
.items-first div.image {
	padding: 42px 0 0 185px;
	float: left
	}
.items-first div.tab-container {
	float: left;
	overflow: hidden;
	}
.items-first div.tab-container div.tab1 {
	margin: 140px 0 10px 0;
	width: 58px;
	height: 31px;
	background: url(../images/bg-tab1.gif) no-repeat;
	}
.items-first div.tab-container div.tab1 p {
	padding: 7px 0 0 7px;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.1em;
	text-transform: uppercase;
	color: #fff;
	}
.items-first div.tab-container div.tab2 {
	width: 88px;
	height: 38px;
	background: url(../images/bg-tab2.gif) no-repeat;
	}
.items-first div.tab-container div.tab2 p {
	padding: 5px 0 0 7px;
	font-size: 10px;
	letter-spacing: 1px;
	line-height: 1.1em;
	color: #fff;
	}

/* All */

.items {
	width: 878px;
	height: 218px;
	margin: 50px auto 0 auto;
	background: url(../images/bg-items.gif) no-repeat;
	}
.items div.image {
	float: left;
	padding: 6px 0 0 185px;
	}
.items div.tab-container {
	float: left;
	overflow: hidden;
	}
.items div.tab-container div.tab1 {
	margin: 105px 0 10px 0;
	width: 58px;
	height: 31px;
	background: url(../images/bg-tab1.gif) no-repeat;
	}
.items div.tab-container div.tab1 p {
	padding: 7px 0 0 7px;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 1px;
	line-height: 1.1em;
	text-transform: uppercase;
	color: #fff;
	}
.items div.tab-container div.tab2 {
	width: 88px;
	height: 38px;
	background: url(../images/bg-tab2.gif) no-repeat;
	}
.items div.tab-container div.tab2 p {
	padding: 5px 0 0 7px;
	font-size: 10px;
	letter-spacing: 1px;
	line-height: 1.1em;
	color: #fff;
	}

/* Icons
-----------------------------------------------------------*/

.icon {
	height: 105px;
	margin: 20px auto 0 auto;
	padding-bottom: 20px;
	}
#icon-print {
	width: 162px;
	background: url(../images/icon-print.gif) no-repeat;
	}
#icon-identity {
	width: 119px;
	background: url(../images/icon-identity.gif) no-repeat;
	}
#icon-web {
	width: 90px;
	background: url(../images/icon-web.gif) no-repeat;
	}
#icon-icondesign {
	width: 99px;
	background: url(../images/icon-icondesign.gif) no-repeat;
	}
#icon-experiences {
	width: 29px;
	background: url(../images/icon-experiences.gif) no-repeat;
	}
#icon-downloads {
	width: 100px;
	background: url(../images/icon-downloads.gif) no-repeat;
	}

/* Footer
-----------------------------------------------------------*/

#fotoer {
	width: 400px;
	margin: 0 auto;
	}
#footer p {
	padding: 30px 0;
	font-size: 11px;
	text-align: center;
	line-height: 1.3em;
	color: #000;
	}
#footer a {
	color: #fc0f3e;
	}
#footer a:hover {
	text-decoration: underline;
	color: #fc0f3e;
	}