/*
Copyright: 	2009, Anagram AS
Author: 	Hein Tore Tønnesen, heintore@anagram.no
*/

/*body,html {
	height: 100%;
	min-height: 100%;	
}*/

body {
	background: #e6e7e8;
	color: #000;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: 62.5%;
	line-height: 1.3;
	overflow-x: hidden;
}

a:link, a:visited {
	color: #369;
	outline: none;
	text-decoration: none;
}

a:hover {
	color: #39c;
}

/* ================= */
/* = Page elements = */
/* ================= */

#wrap {
	background: #fff;
	position: relative;
	min-height: 690px;
}

#header {
	background: url(images/header-pattern.png) repeat-x 20% 0;
	padding-top: 135px;
	height: 75px;
}

#footer {
	height: 125px;
	padding-bottom: 44px;
	position: relative;
	z-index: 2000;
	background: url(images/shadow-bottom.png) repeat-x left top;
	margin-top: -15px;
	padding-top: 15px;
}

#footer .group {
	display: none;
}

/* ========== */
/* = Header = */
/* ========== */

#logoAndNav {
	width: 768px;
	margin: 0 auto;
	position: relative;
}

#logo {
	width: 222px;
	float: left;
}

#logo a {
	display: block;
	height: 60px;
	width: 222px;
	background: url(images/logo-abacus.png) no-repeat;
	text-indent: -9999em;
	position: absolute;
	z-index: 5000;
	top: 16px;
	left: 0;
}

#facebookIcon,
#twitterIcon {
	position: absolute;
	right: -37px;
	top: 44px;
	width: 20px;
	height: 20px;
	background: url(images/facebook-icon.png) no-repeat;
	text-indent: -9999em;
}

#twitterIcon {
	right: -61px;
	background-image: url(images/twitterIcon.png);
}

#facebookIcon:hover,
#twitterIcon:hover {
	background-position: 0 -20px;
}

#nav {
	position: absolute;
	right: 0;
	top: 43px;
}

#nav ul {
	border-left: 2px solid #d2d3d5;
	float: right;
	min-width: 450px;
}

#nav li {
	float: left;
	text-align: center;
	min-width: 25px;
}

#nav a {
	text-transform: uppercase;
	display: block;
	padding: 5px 16px 4px;
	color: #d1d3d4;
	letter-spacing: 2px;
	font-size: 10px;
	border-right: 2px solid #d2d3d5;
}

#nav .selected a {
	font-style: italic;
}

/* ======== */
/* = Main = */
/* ======== */

#mainContent {
	margin: 20px 0 0;
	position: relative;
	z-index: 1000;
	height: 300px;
}

.loader {
	background: url(images/ajax-loader.gif) no-repeat center center;
}

#mainContentInside {
	width: 768px;
	height: 260px;
	margin: 0 auto;
	position: relative;
}

/* featured work */

.content {
	height: 300px;
}

ul.content {
	height: auto;
}

.content h2,
.content p,
.content div,
.hidden {
	display: none;
}

#mainNav {
	position: absolute;
	width: 850px;
	left: 50%;
	margin-left: -425px;
	z-index: 3;
	display: none;
}

#mainNav li {
	position: absolute;
	left: 0;
	top: -62px;
	height: 113px;
	text-indent: -9999em;
}

#mainNav a {
	height: 113px;
	width: 110px;
	display: block;
	background: url(images/next-previous.png) no-repeat;
}

#mainNav #navNext {
	left: auto;
	right: -20px;
}

#mainNav #navNext a {
	background-position: -119px 0;
}

#newsList,
#contactInfo {
	width: 768px;
	margin: 0 auto;
	padding-top: 40px;;
}

#newsList ul {
	list-style: none;
	line-height: 1.5;
	float: right;
	display: none;
}

#newsList a {
	color: #000;
}

#newsList span {
	margin-right: 4px;
}

#newsList a:hover {
	color: #ec0b8d;
}

#contactInfo {
	font-size: 10px;
	padding-top: 25px;
}

#contactInfoInside {
	float: right;
	display: none;
}

#contactInfo h2 {
	margin: 15px 0 0px;
	letter-spacing: 1px;
	text-transform: uppercase;
}

#contactInfo h2 span {
	letter-spacing: 0;
	text-transform: none;
	font-weight: normal;
}

#contactInfo address {
	margin-top: 15px;
	font-style: normal;
}

#contactInfo address h2 {
	display: inline;
}

/* ========== */
/* = Footer = */
/* ========== */

#footer section {
	width: 768px;	
	margin: 0 auto;
	position: relative;
}

#footer header,
#footer .header {
	font-size: 16px;
	text-transform: uppercase;
	font-weight: normal;
	height: 40px;
	line-height: 1.2;
	padding: 2px 0;
	width: 265px;
	float: left;
	position: relative;
	letter-spacing: 2px;
}

#footer h2 {
	font-weight: normal;
}

#footer .footerContent {
	width: 417px;
	float: right;
	padding: 2px 16px;
	border-left: 2px solid #d2d3d5;
	border-right: 2px solid #d2d3d5;
	line-height: 1.5;
	position: relative;
	color: #666;
}

#footer .footerContent p {
	color: #666;
}

#footer p + p {
	margin-top: 10px;
}

#footer span.date {
	color: #BBBEC0;
}

#newsArchive {
	position: absolute;
	right: -118px;
	top: 0;
	width: 100px;
}

#newsArchive a {
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #d1d3d4;
	font-size: 10px;
}

#footerPattern {
	height: 44px;
	margin-top: 30px;
	background: url(images/header-pattern.png) repeat-x 20% -44px;
	position: absolute;
	bottom: 0;
	width: 100%;
}

/* ======== */
/* = Misc = */
/* ======== */

#news #navNews a,
#employees #navEmployees a,
#about #navAbout a,
#portfolio #navPortfolio a {
	font-style: italic;
}

/* orange */

#orange a.selected,
#orange #footer h2,
#orange #footer h2 a,
#orange #nav .selected a,
#orange #newsArchive a:hover,
#nav .orange a:hover,
#newsList .orange a:hover {
	color: #f78f1e;
}

#orange #mainNav a:hover {
	background-position: 0 -226px;
}

#orange #mainNav a:active {
	background-position: -2px -224px;
}

#orange #mainNav #navNext a:hover {
	background-position: -119px -226px;
}

#orange #mainNav #navNext a:active {
	background-position: -117px -224px;
}

/* blue */

#blue a.selected,
#blue #footer h2,
#blue #footer h2 a,
#blue #nav .selected a, 
#blue #newsArchive a:hover,
#nav .blue a:hover,
#newsList .blue a:hover {
	color: #00aec5;
}

#blue #logo a {
	background-position: 0 -60px;
}

#blue #mainNav a:hover {
	background-position: 0 -113px;
}

#blue #mainNav a:active {
	background-position: -2px -111px;
}

#blue #mainNav #navNext a:hover {
	background-position: -119px -113px;
}

#blue #mainNav #navNext a:active {
	background-position: -117px -111px;
}

/* pink */

#pink a.selected,
#pink #footer h2,
#pink #footer h2 a,
#pink #nav .selected a,
#pink #newsArchive a:hover,
#nav .pink a:hover,
#newsList .pink a:hover {
	color: #ec0b8d;
}

#pink #logo a {
	background-position: 0 -120px;
}

#pink #mainNav a:hover {
	background-position: 0 -339px;
}

#pink #mainNav a:active {
	background-position: -2px -337px;
}

#pink #mainNav #navNext a:hover {
	background-position: -119px -339px;
}

#pink #mainNav #navNext a:active {
	background-position: -117px -337px;
}

/* shadows */


#mainContentShadow,
#wrapShadow {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: url(images/shadow-top.png) repeat-x;
	height: 15px;
	z-index: 3000;
}

#wrapShadow {
	background-image: url(images/shadow-wrap.png);
	top: auto;
	bottom: -15px;
}

@media screen and (min-width: 321px) {	
 	body {
		-webkit-text-size-adjust: none;
	}
}