@charset "utf-8";

/* 1. global css reset
 * 2. layout
 */

/* ********** 1 ********** */
* { margin: 0; padding: 0; } 

html, body  {
	height: 100%;
	background: #575759 url(../images/body-bg.gif) repeat-x 0 0;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	text-align: left;
	font-size: 12px;
	line-height: 1.5;		
}

body {
/*	overflow-x: scroll;
	overflow-y: hidden;*/
	position: relative;
}


:root { 
	overflow: scroll !important; 
}


*:focus, img { border: 0 none; outline: 0 none; }

ol, ul { list-style: none; }

a, em, strong, span, acronym, abbr {
  font-size: inherit;
  font-variant: inherit;	
  font-style: inherit;
  font-weight: inherit;
	font-family: inherit;
  color: inherit;	
}

em { font-style: italic; }

strong { font-weight: bold; }

em strong, strong em {
	font-weight: bold;
  font-style: italic;
}

acronym, abbr {
	border-bottom: 1px dotted;	
	cursor: help;
}

a:link, a:active, a:visited { 
	text-decoration: underline;
	color: #fff;
}

a:hover { 
	text-decoration: none;
	color: #e2007a;
}

h1, h2, h3, h4, h5, h6 {
	color: #ff8C00;
	font-weight: normal;
}

/* reserve it for logo */
h1 { 
	font-size: 26px;
	line-height: 1;
} 

h2 { 
	font-size: 18px;
	line-height: 1.8;
}

h3{ 
	font-size: 16px;
	line-height: 1.6;
}

h4, h5, h6 { 
	font-size: 14px;
	line-height: 1.5;
}

p, address {
	font-weight: normal;
	font-style: normal;
}

.bold { font-weight: bold; }

/* ********** 2 ********** */

/* main block */
#wrapper { 
	padding: 22px 0;
	min-width: 960px;
	height: 840px;
	position: absolute;
	top: 0;
	left: 0;
}

#mainNav, #mainNav *, #subNav, #subNav *, #bottomNav, #bottomNav * {
	white-space: nowrap !important;
}

/* logo */
#logo { 
	width: 900px;
	height: 30px;
	margin-bottom: 16px;
	padding: 0 40px;
}

/* logo link */
#logo a { 
	width: 900px;
	height: 30px;
	display: block;
	overflow: hidden;
	background: url(../images/logo.gif) no-repeat 0 0;
	text-indent: -99999px;
}

/* general defs. for navigations */
.navigation { 
	overflow: hidden;
	padding: 0 40px;
}

.navigation li {
	display: inline;
	font-size: 18px;
	font-weight: bold;	
}

.navigation li a {
	display: block;
	float: left;
	padding: 0 12px 0 0;
	text-decoration: none !important;
}

/* top navigation */

#mainNav .label {/* label WORKS */
	margin-top: 8px;
	display: block;
	float: left;	
	padding-right: 8px;
}

#mainNav a {
	color: #58585a; 
	border-top: 5px solid;
	padding: 2px 10px;
}

/* top menu items - border and hover colors */
#mainNav .digIlls { border-color: #e2007a; }
#mainNav .vecIlls { border-color: #f6cd00; }
#mainNav .draw { border-color: #529cba; }
#mainNav .mags { border-color: #d79b00; }
#mainNav .logos { border-color: #91bc12; }
#mainNav .web { border-color: #7a4e77; }
#mainNav .other { border-color: #eca4c5; }

#mainNav .digIlls:hover, .digIlls #mainNav .digIlls { color: #e2007a; }
#mainNav .vecIlls:hover, .vecIlls #mainNav .vecIlls { color: #f6cd00; }
#mainNav .draw:hover, .draw #mainNav .draw { color: #529cba; }
#mainNav .mags:hover, .mags #mainNav .mags { color: #d79b00; }
#mainNav .logos:hover, .logos #mainNav .logos { color: #91bc12; }
#mainNav .web:hover, .web #mainNav .web { color: #7a4e77; }
#mainNav .other:hover, .other #mainNav .other { color: #eca4c5; }

/* top subnavigation */

#subNav { margin: 4px 0 16px; }

#subNav li a {
	padding: 0 2px;	
	margin-right: 2px;
	text-transform: uppercase;
	color: #58585a; 
}
/* top sub menu items - border and hover colors */
.digIlls ul#subNav a.active, .digIlls ul#subNav a:hover {
	color: #e2007a;	
	border-bottom: 5px solid #e2007a;	
}
.vecIlls ul#subNav a.active, .vecIlls ul#subNav a:hover { 
	color: #f6cd00; 
	border-bottom: 5px solid #f6cd00;
}
.draw ul#subNav a.active, .draw ul#subNav a:hover { 
	color: #529cba; 
	border-bottom: 5px solid #529cba;
}
.mags ul#subNav a.active, .mags ul#subNav a:hover { 
	color: #d79b00; 
	border-bottom: 5px solid #d79b00;
}
.logos ul#subNav a.active, .logos ul#subNav a:hover { 
	color: #91bc12; 
	border-bottom: 5px solid #91bc12;
}
.web ul#subNav a.active, .web ul#subNav a:hover { 
	color: #7a4e77; 
	border-bottom: 5px solid #7a4e77;
}
.other ul#subNav a.active, .other ul#subNav a:hover { 
	color: #eca4c5; 
	border-bottom: 5px solid #eca4c5;
}

/* bottom navigation */

#bottomNav { margin-top: 4px; }
#bottomNav li {
	font: normal normal bold 18px/1.5 Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

#bottomNav li a {
	padding: 6px 6px 0;
}

#bottomNav li a[href]:hover, #bottomNav li a[href].active {
	border-top: 5px solid;
	padding-top: 0;
}

#bottomNav li.note a {
	color: #78797b;
	font: 14px/1.9 Arial, Helvetica, sans-serif;	
}

/* works */
/* width and min-width are hte defaults and 
 * MUST be ovewritten by style attr in html 
 * for the longer content ie. not for text */
#works {
	padding: 0 40px;
	width: 100%;	
	/*min-width: 1200px;*/	
	min-width: 1000px;
	position: relative;
	color: #78797b;
}

/* list of works */
#works ol {
	border-bottom: 5px solid #e2007a;		
	overflow: hidden;
	width: 100%;
}

#works ol li {
	float: left;
	padding-left: 24px;
	background: url(../images/swb.gif) no-repeat 100% 6px;	
	/* --- */
	height: 492px;
}

.logos #works ol li {
	float: left;
	padding-left: 48px;
}

#works ol li.first {
	padding-left: 0;
}

.digIlls #works ol {
	border-bottom: 5px solid #e2007a;	
}
.vecIlls #works ol { 
	border-bottom: 5px solid #f6cd00;
}
.draw #works ol {
	border-bottom: 5px solid #529cba;
}
.mags #works ol {
	border-bottom: 5px solid #d79b00;
}
.logos #works ol {
	border-bottom: 5px solid #91bc12;
}
.web #works ol { 
	border-bottom: 5px solid #7a4e77;
}
.other #works ol {
	border-bottom: 5px solid #eca4c5;
}

/* bars - starting and finishing */
.bar {
	position: absolute;
	bottom: 33px;
	background: url(../images/vb.png) no-repeat 0 0;
	height: 440px;
	width: 16px;
}

.start { left: 12px; }

.end { right: 12px; }

/* descr under work */
.descr {
	font: 12px/14px Tahoma, Geneva, Arial, Helvetica, sans-serif;
	font-stretch: condensed;
	height: 14px;
	overflow: hidden;
	margin: 6px 0
}

/* number, because ordered list are hard to style and IE doesn't understand decimal-leading-zero anyway */
#works .number {
	display: block;
	width: auto;
	padding-bottom: 6px;
}

/* arrows */

.switchBar {
	width: 100%;
	min-width: 1000px;
	height: 29px;
	margin-bottom: 12px;
	position: relative;
}

.switchBar button {
	display: block;
	overflow: hidden;
	text-indent: -99999px;
	height: 29px;
	width: 19px;
	border: 0 none;	
	position: absolute;
	top: 0;
	/*cursor: pointer;*/
}

.next {
	left: 0;
	background: transparent url(../images/f-arr.gif) no-repeat 0 0;	
}

.prev {
	right: 0;
	background: transparent url(../images/b-arr.gif) no-repeat 0 0;	
}

#works ol a {
	display: block;
	overflow: hidden;
	height: 440px;
}

/* when the content is text */
#works ol li.textContent {
	width: 440px;
	background: none;
	overflow: auto;
}

#works ol li.textContent p,
#works ol li.textContent address {
	font-size: 14px;
	color: #fff;
	padding: 0 0 0.8em;
	line-height: 1.2;
}

#works ol li.textContent .first {
	margin-top: 24px;
}

.info {
	text-transform: uppercase;
	color: #fff;
	font: bolder 16px/1.5 Arial, Helvetica, sans-serif
}

.pureText #works {
	margin-top: 92px;
}

.pureText #works ol a {
	display: inline;
	overflow: visible;
	height: auto;
}

address span { display: block; }

address a:link, address a:active, address a:visited { text-decoration: none; }

address a:hover { text-decoration: underline; }

.copyrights {
	color: #78797b;
	padding: 0 40px;
}