@charset "UTF-8";
/* CSS Document */


/* GLOBAL */
body {
	background-image: url(http://askdesigners.eu/ui/bg.jpg);
	margin: 0 auto;
	font-family: Helvetica, Arial, sans-serif;
	color: #292929;
	}

.centermargin {
margin: 0 auto;
}
	
.floatright {
	float: right;
}

.floatleft {
	float: left;
}

.clear {
	clear: both;
}

.grey {
	color: #292929;
}

.ltgrey {
	color: #7d7d7d;
}

.inline {
	display: inline;
}

.white {
	color: #FFFFFF;
}

.ul {
	text-decoration: underline;
}

.heightone {
	line-height: 17px;
}

.bigthumbs {
	width: 180px;
	height: 136px;
	margin: 15px 0px;
    z-index: -5;
}

.topmargin {
	margin-top: 10px;
	margin-bottom: 10px;
}

.hide {	display: none;}

/* NAVIGATION*/

#tac {
font-size: 10px;
margin-left: 30px;
margin-top: 5px;
position: absolute;
right: 0;
top: 30px;
}

#topbar {
	position: absolute;
	width: 100%;
	height: 30px;
	top: 0px;
	background-color: #292929;
	z-index: -1;
}
	
#mainnav {
	position: relative;
	width: 854px;
	height: 30px;
	margin: 0px auto;
}

#home a {   
    display: block;   
    background:  url(http://askdesigners.eu/ui/nav_sprite.gif) 0px -30px no-repeat;   
    width: 66px;   
    height: 30px;   
}

#home a.selected, #home a:hover {   
    background:  url(http://askdesigners.eu/ui/nav_sprite.gif) 0px 0px no-repeat;
}

#portfolio a {   
    display: block;   
    background:  url(http://askdesigners.eu/ui/nav_sprite.gif) -66px -30px no-repeat;   
    width: 81px;   
    height: 30px;   
}

#portfolio a.selected, #portfolio a:hover {   
    background:  url(http://askdesigners.eu/ui/nav_sprite.gif) -66px 0px no-repeat;   
}

#why a {   
	display: block;   
    background:  url(http://askdesigners.eu/ui/nav_sprite.gif) -215px -30px no-repeat;   
    width: 80px;   
    height: 30px;   
}

#why a.selected, #why a:hover {   
    background:  url(http://askdesigners.eu/ui/nav_sprite.gif) -215px 0px no-repeat;   
}

#profile a {   
    display: block;   
    background:  url(http://askdesigners.eu/ui/nav_sprite.gif) -148px -30px no-repeat;   
    width: 67px;   
    height: 30px;   
}

#profile a.selected, #profile a:hover {   
    background:  url(http://askdesigners.eu/ui/nav_sprite.gif) -148px 0px no-repeat;   
}

#contact a {   
    display: block;   
    background:  url(http://askdesigners.eu/ui/nav_sprite.gif) -294px -30px no-repeat;   
    width: 77px;   
    height: 30px;   
}

#contact a.selected, #contact a:hover {   
    background:  url(http://askdesigners.eu/ui/nav_sprite.gif) -294px 0px no-repeat;
}

#blog a {   
position: absolute;
    display: block;   
    background:  url(http://askdesigners.eu/ui/bloglink.png) 0px 0px no-repeat;   
    width: 107px;   
    height: 57px;   
	left: 665px;
}

#blog a.selected, #blog a:hover {   
    background:  url(http://askdesigners.eu/ui/bloglink.png) -110px 0px no-repeat;   
}
	
#cz a {   
position: relative;
    display: block;   
    background:  url(http://askdesigners.eu/ui/flagsprite.png) -18px 0px no-repeat;   
    width: 17px;   
    height: 13px; 
	margin-left: 10px;  
	margin-top: 8px;
	}

#cz a.selected, #cz a:hover {   
    background:  url(http://askdesigners.eu/ui/flagsprite.png) -18px -13px no-repeat;   
}

#en a {   
	position: relative;
    display: block;   
    background:  url(http://askdesigners.eu/ui/flagsprite.png) 0px 0px no-repeat;   
    width: 17px;   
    height: 13px;
	margin-left: 61px;
	margin-top: 8px;  
}

#en a.selected, #en a:hover {   
    background:  url(http://askdesigners.eu/ui/flagsprite.png) 0px -13px no-repeat;   
}

#header {
	position: relative;
	width: 854px;
	height: 134px;
	margin: 20px auto 0px auto;
	}

#a {
	position:relative;
	width:134px;
	height:134px;
	margin-right: 10px;
	float: left;
}

#s {
	position:relative;
	width:134px;
	height:134px;
	margin-right: 10px;
	float: left;
}

#k {
	position:relative;
	width:134px;
	height:134px;
	margin-right: 10px;
	float: left;
}

#headerbox {
	position: relative;
	width: 422px;
	height: 134px;
	float: left;
}

#designers {
	height: 63px;
	width: 278px;
	background: url(http://askdesigners.eu/ui/designers.png) no-repeat;
}

#gridbox {
position: relative;
	margin-top: 8px;
	height: 57px;
	width: 408px;
	background: url(http://askdesigners.eu/ui/squares.png) no-repeat;
	padding-top: 8px;
	padding-left: 14px;
}

#twitter {
	position: relative;
	width: 375px;
	height: 50px;
	background: url(http://askdesigners.eu/ui/viatwitter.jpg) no-repeat;
	display: block;
	padding-top: 16px;
	margin-left: 10px;
top: -8px;
}

/*HOMEPAGE*/

#container {
	position: relative;
	width: 854px;
	height: auto;
	margin: 10px auto;
}

#containerp {
	position: relative;
	width: 874px;
	height: auto;
	margin: 10px auto;
}

#containerp .p{
font-size: 11px;
}

#hello {
	position: relative;
	top: 0px;
	width: 422px;
	height: 422px;
	margin: 0px;
}

#projectthumbs {
	position: absolute;
	top: 0px;
	left: 432px;
	width: 422px;
	height: 278px;
	}

#featproject1 a {
	position:relative;
	display: block;
	width: 278px;
	height: 278px;
	float: left;
	background: url(http://askdesigners.eu/ui/workbig_frame.png) 0px 0px no-repeat;
}

#featproject1 a:hover {
	background: url(http://askdesigners.eu/ui/workbig_frame.png) -278px 0px no-repeat ;
}

#featproject2 a {
	position:relative;
	display: block;
	width: 134px;
	height: 134px;
	float: left;
	margin-left: 10px;
	background: url(http://askdesigners.eu/ui/worksm_frame.png) 0 0 no-repeat;
}

#featproject2 a:hover {
	background: url(http://askdesigners.eu/ui/worksm_frame.png) -134px 0 no-repeat;
}

#featproject3 a {
	position:relative;
	display: block;
	width: 134px;
	height: 134px;
	float: left;
	margin-left: 10px;
	margin-top: 10px;
	background: url(http://askdesigners.eu/ui/worksm_frame.png) 0 0 no-repeat;
}

#featproject3 a:hover {
	background: url(http://askdesigners.eu/ui/worksm_frame.png) -134px 0 no-repeat;
}

#featprojectimg1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 278px;
	height: 278px;	
	z-index: -50;
	background: url(http://askdesigners.eu/ui/load.gif) 50% 50% no-repeat;

}

#featprojectimg2 {
	position: absolute;
	top: 0px;
	left: 288px;
	width: 134px;
	height: 134px;
	z-index: -50;
	background: url(http://askdesigners.eu/ui/load.gif) 50% 50% no-repeat;
}

#featprojectimg3 {
	position: absolute;
	top: 144px;
	left: 288px;
	width: 134px;
	height: 134px;
	z-index: -50;
	background: url(http://askdesigners.eu/ui/load.gif) 50% 50% no-repeat;
}

#blogexcerpt {
	display: block;
	position: absolute;
	width: 398px;
	height: 114px;
	background: url(http://askdesigners.eu/ui/blogback.png) no-repeat; 
	padding-top: 20px;
	padding-left: 12px;
	padding-right: 12px;
	top: 287px;
	left: 432px;
}

#ieohno {
	position: relative;
	background: url(http://askdesigners.eu/ui/ieohno.jpg) no-repeat;
	width: 940px;
	height: 472px;
	margin: 15px auto;
}

#ietext {
	position: relative;
	width: 600px;
	height: auto;
	top: 135px;
	left: 200px;
}


/* PORTFOLIO PAGE */

#copyinfo {
	position: relative;
	height: 15px;
	width: 86px;
	margin-left: -14px;
	display: block;
	margin-top: 40px;
	background: #fff;
	float: right;
}

#copyinfo a {
	margin: 0;
	background-color: #fff;
	font-size: 12px;
}

.project a {
	display: block; 
	overflow: hidden;
	background: url(http://askdesigners.eu/ui/portfolio_sprite.gif) 0px 37px no-repeat;
	width: 270px;
	height: 121px;
	color: #292929;
	text-decoration: none;
	margin-right: 11px;
	margin-left: 10px;
	margin-bottom: 30px;
	margin-top: 5px;
	float: left;
}

.project a:hover {
	background: url(http://askdesigners.eu/ui/portfolio_sprite.gif) 0px -52px no-repeat;
	color: #7accc8;
	text-decoration: none;
}

.thumbs {
	margin: 0;
	width: 270px;
	height: 74px;
	margin-top: 14px;
}


#item {
	position: absolute;
	width: 285px;
	height: 136px;
	margin-left: 43px;
	margin-top: 43px;
}

/* PROJECT VIEWER */

#projectnavigation {
	position: relative;
	top: 0px;
	width: 854px;
	height: 23px;
	margin: 0 auto;
	}



/*----------TEST PORTION--------*/
#prevnext {
top: 10px;
height:445px;
position:absolute;
width:853px;
z-index:100;
}

.previous {
position: absolute;
z-index: 10;
width:31px;
height: 445px;
}

.previous a {
display:block;
width:31px;
height: 445px;
background:  url(http://askdesigners.eu/ui/prevnext_sprite.png) 0px 200px no-repeat; 
outline: none;
}

.previous a:hover {   
    background:  url(http://askdesigners.eu/ui/prevnext_sprite.png) -31px 200px no-repeat;
}

.next {
position: absolute;
z-index: 10;
width:31px;
height: 445px;
left:822px;
}

.next a{
display:block;
width:31px;
height: 445px;
background:  url(http://askdesigners.eu/ui/prevnext_sprite.png) -62px 200px no-repeat; 
outline: none;
}

.next a:hover{
    background:  url(http://askdesigners.eu/ui/prevnext_sprite.png) -93px 200px no-repeat;
}

.slideshow {
position: relative;
z-index: 0;
}

/*--------DROPDOWN----------*/

		/*** ESSENTIAL STYLES ***/
		.sf-menu, .sf-menu * {
			margin:			0;
			padding:		0;
			list-style:		none;
		}
		.sf-menu {
			line-height:	1.0;
		}
		.sf-menu ul {
			position:		absolute;
			top:			-999em;
		}
		.sf-menu ul li {
		}
		.sf-menu li:hover {
			visibility:		inherit; /* fixes IE7 'sticky bug' */
		}
		.sf-menu li {
			float:			left;
			position:		relative;
		}
		.sf-menu a {
			display:		block;
			position:		relative;
		}
		.sf-menu li:hover ul,
		.sf-menu li.sfHover ul {
			left:			0;
			top:			23px; /* match top ul list item height */
			z-index:		99;
		}
		ul.sf-menu li:hover li ul,
		ul.sf-menu li.sfHover li ul {
			top:			-999em;
		}
		ul.sf-menu li li:hover ul,
		ul.sf-menu li li.sfHover ul {
			left:			10em; /* match ul width */
			top:			0;
		}
		ul.sf-menu li li:hover li ul,
		ul.sf-menu li li.sfHover li ul {
			top:			-999em;
		}
		ul.sf-menu li li li:hover ul,
		ul.sf-menu li li li.sfHover ul {
			left:			10em; /* match ul width */
			top:			0;
		}	
		
li a img {
	list-style: none;
}
		
a .portmenulink{
outline: none;
font-size: 15px;
}

.portmenulink{
	display: block;
	margin-bottom: 5px;
color: #7accc8;
}

.portmenulink img{
position: relative;
	top: -1px;
}

#portfoliomenu {
	width: 823px;
	height: 100px;
	position: absolute;
	padding: 15px;
	background: url(http://askdesigners.eu/ui/transgrey.png);
}

#portfoliomenu a{
	color: #7accc8;
text-decoration: none;
}

#portfoliomenu a:hover {
	color: white;
}

#back{
	width: 160px;
	height: 95px;
	position: relative;
	float: left;
	margin: 5px 50px 0 5px;
}

#back a {
	background: url(http://askdesigners.eu/ui/portfolioicon.png) center no-repeat;
	padding-top: 50px;
	text-align: center;
	display: block;
	color: #7accc8;
}

#back a:hover {
	color: white;
}

#previousproject {
	width: 200px;
	height: 50px;
	position: relative;
	margin: 30px 70px 0 0;
	float: left;
}

#nextproject {
	width: 200px;
	height: 50px;
	position: relative;
margin: 30px 0 0 0;
	float: left;
}

.portmenuthumb{
	border-style:solid none none none;
	border-width:4px;
}


/*----------TEST PORTION--------*/

#imagenavigation {
	position: relative;
	top: 0px;
	width: 853px;
	height: 20px;
	margin: 0 auto;
	background: #292929;
	text-align: center;
	}
	
#imagenavigation a {
	margin: 0 10px;
	font-size: 11px;
	font-weight: 200;
	color: #fff;
	text-decoration: none;}
	
#imagenavigation a:hover {
	color: #ff5151;
}
	
#portfolioimages {
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	width: 853px;
	height: auto;
	}
	
#slideshow img { padding: 5px;}	

#altcontent {
	position: relative;
	margin: 0 auto;
	width: 853px;
	height: auto;
	}

#textholder {
	position: relative;
	margin: auto;
	width: 853px;
	height: 200px;
	clear: both;
}

#col1 {
	position: relative;
	width: 277px;
	height: auto;
	float: left;
}

#col2 {
	position: relative;
	width: 277px;
	height: auto;
	float: left;
	margin-left: 10px;
}

#col3 {
	position: relative;
	width: 277px;
	height: auto;
	float: left;
	margin-left: 10px;
}

/*PROFILE*/

#askcell {
	position: relative;
	top: 0px;
	width: 422px;
	height: 422px;
	margin-left: 10px;
	float: left;	
}


/*CONTACT*/

#map {
	position: relative;
	float: left;
	width: 422px;
	height: 422px;
}

#rightcol {
	position: relative;
	float: left;
	margin-left: 10px;
	width: 422px;
	height: 422px;
}
#directions a {
	display: block;   
    background: url(http://askdesigners.eu/ui/directions.jpg) 0px 0px no-repeat;
	position: relative;	
	float: left;
	width: 134px;
	height: 31px;
	margin-top: 20px;
}

#directions a:hover {   
    background:  url(http://askdesigners.eu/ui/directions.jpg) 0px 0px no-repeat;   
}

#vcard a {
	position: relative;
	float: left;
	display: block;   
    background:  url(http://askdesigners.eu/ui/v-card.jpg) 0px 0px no-repeat;
	width: 134px;
	height: 31px;
	margin-left: 10px;
	margin-top: 20px;
}

#vcard a:hover {   
    background:  url(http://askdesigners.eu/ui/v-card.jpg) 0px 0px no-repeat;   
}

#address {
	position: inherit;
	width: 422px;
	height: 160px;
	top: 20px;
	left: 0px;
}

#dividerbox1 {
position: relative;
	margin: 20px 0 20px 0;
	height: 8px;
	width: 422px;
	background: url(http://askdesigners.eu/ui/squares.png) no-repeat;
}

#dividerbox2 {
position: relative;
	margin: 20px 0 20px 0;
	height: 46px;
	width: 422px;
	background: url(http://askdesigners.eu/ui/squares.png) no-repeat;
}

.sociallink {
margin-left: 10px;
margin-top: 12px;}

.mailmarketa {
margin-left: 30px;}

/* TEXT */

#twitter p {
padding-left: 3px;
	margin: 0;
	background-color: #494949;
	color: #fff;
	font-size: 12px;
	line-height: 15px;
}

.textright {text-align: right}
.textleft {text-align: left}
.textcenter {text-align: center}

.dark {
	color: #292929;
}

.white {
	color: #FFFFFF;
}

.green {
	color: #7accc8;
}

a img { border:none; }

a {color: #ff5151; text-decoration: none;}

a:hover {color: #7accc8;}

a img { border:none; }

a.reverse {
	color: #7accc8;
	text-decoration: none;
	}
	
a.reverse:hover {
	color: #ffffff; 
}

a.block {
	color: #292929;
	background: #7accc8;
	text-decoration: none;
	padding: 0 2px;
	}
	
a.block:hover {
	color: #ff5151; 
}

h1, .h1 {
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-size: 19px;
	color: inherit;
	}
	
.h1 {line-height: 20px;}

h2 {
	text-align: left;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 14px;	
	font-weight: bold;
}

h3 {
	text-align: left;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-style: normal;
	font-weight: normal;
}

h4 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 11px;
	font-style: italic;
	font-weight: normal;
	line-height: 18px;
}

h5 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 9px;
	font-style: italic;
	font-weight: normal;
	line-height: 13px;
}

p, .p{
	font-family: Helvetica, Arial, sans-serif;
	font-style: normal;
	font-size: 12px;
	color: inherit;
	line-height: 13px;
	}
	
p2 {
	text-align: left;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-style: normal;
	font-weight: bold;
}

p3 {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-style: normal;
}

.image {
	margin: auto;
	text-align: center;
}

/*ASKATRON*/

#askatron { 
position: relative;
top: 20px;
width: 800px;
height: 600px;
margin: 0 auto;
}

#czech a {
position:relative;
top: 300px;
left: 400px;
    display: block;   
    background:  url(http://askdesigners.eu/ui/czensprite.png) -105px 0px no-repeat;
    width: 105px;   
    height: 55px;   
}

#czech a:hover {
    background:  url(http://askdesigners.eu/ui/czensprite.png) 0px 0px no-repeat;
}

#english a {
position:relative;
top: 200px;
left: 400px;
    display: block;   
    background:  url(http://askdesigners.eu/ui/czensprite.png) -105px -55px no-repeat;
    width: 105px;   
    height: 70px;   
}

#english a:hover {
    background:  url(http://askdesigners.eu/ui/czensprite.png) 0px -55px no-repeat;
}

#envelopes {
position:relative;
margin: 0 auto;
width: 685px;
height: 594px;
background:  url(http://askdesigners.eu/ui/intropage.png) 0px 0px no-repeat;
}

#badge {
z-index: 200;
top: 0px;
left: 800px;
position: absolute;
width: 149px;
height: 149px;
}