/*-------------------------------------------------------------------------------------------
  Reset CSS
-------------------------------------------------------------------------------------------*/

/* v1.0 | 20080212 */
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;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight 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;
}


/*-------------------------------------------------------------------------------------------
  CSS for VAZE	
-------------------------------------------------------------------------------------------*/

/* general layout */

html{}

body{
}

#wrapper{
	position: relative;
	width:400px; 
	margin: auto; 
}

@media (min-width: 768px){
	#wrapper{
		width: 800px; 
		margin: 0 auto;
	}
}

@media (min-width: 768px){
	#wrapper{
		width: 800px; 
		margin: 0 auto;
	}
}

@media (min-width: 1200px){
	#wrapper{
		width: 1200px; 
		margin: 0 auto;
	}
}

#head{
	padding-top: 10px;
	padding: 10px 5px; 
	/*padding-bottom: 26px;*/
	border-bottom: 2px solid #212121;
	margin-bottom: 0px; 
	clear: both;
}

#menu{
	padding-top: 44px;
	float: left;
}

#main{
	width: 100%;
	margin-bottom: 35px;
}

#footer{
	clear: both; 
	width: 100%; 
	border-top: 4px solid black;
	margin-top: 20px;
	padding-top: 4px;
	padding-bottom: 40px;	
}

/*  general styles  */

html{
	font-family: Helvetica, Arial, sans-serif; 
	font-size: 12px;
}

h1{
	line-height: 1.4;
}

p{
	line-height: 1.5; 
	margin-bottom: 14px;
}

p.last{
	margin-bottom: 0px;
}

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



/*  head  */
#head h1 a{
	float: left; 
	display: block;
	height:60px; 
	width: 100%;
	text-indent: -9999px; 
	margin: 40px auto 10px;
	background: url(../i/logo_azn.png) top right no-repeat;
	background-size: contain;
}
#head h2.claim{
		margin-top: 20px;
		margin-bottom: 10px;
		display: block;
		height: 30px;
		width: 123px;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		background: url(../i/va.png) top right no-repeat;
	}

@media (max-width: 766px){
	#head a.menutrigger{
		margin-top: 20px;
		float: right;
	}
	#head a.menutrigger span{
		display: block;
		height: 4px;
		margin-bottom: 5px;
		width: 26px;
		background: #000;
	}
}

@media (min-width: 768px){
	#head h1 a{
		float: left; 
		height:60px; 
		width: 445px;
		text-indent: -9999px; 
		margin-top: 50px;
		margin-bottom: 20px;
		background: url(../i/logo_azn.png) top right no-repeat;
	}

	#head h2.claim{
		float: right;
		margin-top: 75px;
		margin-bottom: 20px;
		display: block;
		height: 30px;
		width: 123px;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		background: url(../i/va.png) top right no-repeat;


	}
}

#head dic.clear{
	clear: both;
}
/* menu */

#menu{
	font-family: Georgia;
	font-size: 24px;
	padding: 44px 0px 36px;
	/*padding-bottom: 36px;*/
	@media ( min-width: 768px ){
			padding: 44px 5px 36px;

	}
}

ul#primary{
	padding-top: 6px;
	padding-bottom: 36px;
	padding-left: 5px; 
	padding-right: 5px;
	margin: 0 5px; 
	font-size: 22px;
	float: left; 
	width: 380px;
  	font-style: italic;
	border-bottom: 2px solid #333;
	min-height: 115px;
	text-transform: uppercase;
	}
@media ( min-width: 768px ){

}

ul#primary li{
	background: transparent url(../i/line_bg_g.jpg) top left repeat-x;
	margin-bottom: 16px;
	text-transform: uppercase;
} 

ul#primary li.active{
	background: url(../i/line_bg.jpg) top left repeat-x;

}

ul#primary li a{
padding-right: 10px;
background: white;
color: #999

}

ul#primary li.active a{
	color: black; 
	}
ul#primary li a:hover{
	color: black
	}

.quote{
	display: block;
	width: 360px; 
	float: right;
	padding-right: 15px; 
	padding-top: 36px;
}
@media ( min-width: 768px ){
	.quote{
		padding-top: 5px;
	}
}
#menu{
	width: 100%
}
#menu p{
	display: block;
	/*float: right; */
	/*width: 360px; */
	/*padding-left: 60px;*/
	font-size: 18px;
}

#menu p span{
  /*display: inline-block;*/
	/*float: right; */
	width: 360px; 
  font-size: 12px; 
  font-family: Helvetica, Arial, sans-serif; 
  padding-top: 8px; 
  /*padding-left: 10px; */
}

#primary li span.secondmenu{
  background: white;
  float: right;
  padding-left: 10px;
  
}

#primary li span.secondmenu a.inactive, span.slash{
  color: #999;
}

/* main */

#main{
	clear: both; 
	font-size: 10px; 
	line-height: 1.5;
	margin-bottom: 16px;
}
#main .left{
	width: 380px; 
	float: left;
	margin: 10px;
}

#main .middle {
	width: 380px;
	float: left; 
	margin: 10px;
}

#main .right{
	width: 380px; 
	/*margin-left: 60px;*/
	float: right;
	margin: 10px;

}

#main h1{
	font-size: 18px;
	font-family: Georgia; 
	font-style: italic; 
	font-weight: normal;
/* 	border-bottom: 1px solid #000;  */
/*  border-top: 1px solid #000; */
	padding-bottom: 10px;
	margin-bottom: 8px;
	padding-top: 15px;
}

#main div h1:first-child{
	border-top: none;
	padding-top: 0
	}

#main h2{
/* 	padding: 8px 0 0px 0; */
}	
/*  footer */
p.copy{
	float: left;	
}
p.menu{
	color: #999;
	float: right; 
	text-transform: uppercase;
}


/*article projects/home */
article.project{
	font-size: 10px; 
	line-height: 1.5;
	margin-bottom: 16px;
	position: relative;
	width: 380px;
	height: 400px;
	margin: 10px;
	float: left;
	}

@media(min-width: 768px){
article.project{
	margin-bottom: 16px;
	}
}

article.project h1{
border-bottom: none;
}

article.project ul{
	position: relative;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	margin-bottom: 8px;
	margin-top: 2px;
	padding: 5px 0;
}

article.project ul:hover{
background-color: #eee
}

article.project li.pdata{
	text-transform: uppercase
}

article.project img{
	padding: 5px 0;
	width: 100%;
}
article.project li.plink p{
	margin-bottom: 0;	
	}	


article.project  li.pdate{
	position: absolute; 
	top: 5px; 
	right: 0px; 
}

article.project p.more{
	display: block; 
	padding-bottom: 8px;
	padding-top: 180px
}

article.project a.more:hover{
	background-color: #eee; 
}

article.project p span{
	font-weight: bold;
	font-style: italic; 
}

a.allprojects{
clear: both; 
	display: block; 
	height: 15px; 
	text-align: center; 
	background: url(../i/stripes.jpg); 
	font-weight: bold; 
	padding-top: 2px; 
	margin: 0 -12px;
}

/* Info */

.info a:hover{
	color: #0166ff;
}

.info ul{
	list-style-type: disc; 
	list-style-position: inside;
	margin-top: -7px; 
	margin-bottom:7px;

}
.info ul li{
	padding-bottom: 7px

}

/* IE7  */

.ie7 ul#primary li{
	font-family: Georgia;
	background: url(../i/line_bg.jpg) 2px left repeat-x;
	margin-bottom: 30px;
} 

.ie7 ul#primary li.active{
	background: url(../i/line_bg_g.jpg) 2px left repeat-x;

}

.ie7 #footer{
	margin-top: 0px;
	padding-top: 4px;
}


/* IE8  */

.ie p{
	margin-bottom: 8px;
}


/* ==== design - delete!! =====*/

ul#primary{
/* 	padding-left: 20px; */
}



#p_main{
	float: left;
	color: #fff;
}



/*  headline  */
#p_headline{
	border-bottom: 4px solid #fff;
	position: relative;
	margin-bottom: 24px
}


#p_headline h1{
	font-style: italic; 
	font-size:  36px; 
	font-family:  "Georgia";
	font-weight: normal;
	padding-bottom: 12px;

}
#p_headline a{
	color: #fff;
	font-size: 20px;
	font-family: "Helvetica", Arial, sans-serif;
	font-weight: normal;
	position: absolute;
	right: 0px;
	bottom: 18px;
}

/* p_intro */

.p_intro{
	font-size: 12px;
	padding-bottom: 36px;
	width: 300px;
	float: left;
}

.p_intro .short{
	font-family: Georgia;
	font-size: 20px;
	font-weight: normal;
}

.p_intro hr{
	margin-bottom:10px;
	border: none;
	background-color: #fff; 
	height: 1px;
}

 .info .p_intro a{
	font-family: "Helvetica", Arial, sans-serif; 
	font-size: 12px;
	font-weight: normal;
}

.p_intro a span{
	font-style: italic;
	font-weight: normal;
}

.p_intro h2{
	font-style: italic; 
	font-size:  18px; 
/*  font-family:  "Georgia";
*/	font-weight: normal;
	padding-bottom: 12px;

	}
	
	.p_intro img{
	  margin-bottom:14px;
	  padding-top: 12px;
	}

/* p_main */
#p_main ul{
  line-height: 1.5; 
  padding-bottom: 14px;
  padding-left: 14px;
  list-style: square;
}
#p_content{
	float: right; 
	padding-left: 40px;
	padding-top: 12px;
	width: 600px;
	}


#p_content h3{
	border-top: 1px solid #fff;
	line-height: 1.4;
	padding: 4px 0 12px;
	
	}
	
#p_content h3 a span{
	font-weight: normal;
	font-style: normal;
	}
#p_content h3 a {
	font-style: italic;
	font-weight: normal;
}

#p_main a{
	color: #fff;
	font-weight: normal
}

#clear{
clear: both; 
padding-bottom: 70px;}

.clear{
	clear: both;
}
.p_section{
	margin-bottom:10px;
}


/* p_main */

#media{
	float: right; 
	padding-left: 40px;
	padding-top: 12px;
	width: 600px;
	}

#media h3{
	border-top: 1px solid #fff;
	line-height: 1.4;
	padding: 4px 0 12px;
	
	}
	
#media h3 a span{
	font-weight: normal;
	font-style: normal;
	}
#media h3 a {
	font-style: italic;
	font-weight: normal;
}


/* p_slideshow  */

#slideshow {
/*    position:absolute;*/
/*     height:400px; */
}

.slides IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

.slides IMG.active {
    z-index:10;
}

.slides IMG.last-active {
    z-index:9;
}

.simplemodal-wrap{
	overflow-y: visible;
}

.controls{
    position: absolute;
    bottom: 0px;
    width: 100%;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: normal;
}
p.Slide{
  float: left;
}
p.oSlide{
  display: inline;
  float: right;
  text-indent: -9999px;
  width: 20px;
  height: 20px;
  background: url(../i/overview.png) top left no-repeat;
  margin-right: 20px;
  
}
p.nSlide{
  display: inline;
  float: right;
  text-indent: -9999px;
  width: 17px;
  height: 20px;
  background: url(../i/next.png) top left no-repeat;
}
p.pSlide{
  float: right;
  display: block;
  text-indent: -9999px;
  width: 17px;
  margin-right: 10px;
  height: 20px;
  background: url(../i/prev.png) top left no-repeat;
}
/* modalbox CSS  */

#modal-overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}
#modal-window {
    position: absolute;
    z-index: 102;
    display:none;
    top: 0;
    left:0;
    width: 100%;
    height: 100%;
}
#modal-window img 
{
    display: block;
}
#modal-load {
    position: fixed;
    height:32px;
    width:32px;
    background: url(loading.gif) no-repeat;
    z-index:103;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -12px; /* -height/2 0 0 -width/2 */
}

 /* ie6 hacks */
* html #modal-overlay {
     position: absolute;
     height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}
* html #modal-window,
* html #modal-load {
position: absolute;
margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
}




/* Slideshow overview */

.overview img{
	float: left;
	margin-right: 30px;
	margin-bottom: 20px;
}

.overview img.r_img{
	margin-right: 0;
}

/* Info */

.info p{ 
font-size: 12px; 
line-height: 1.5;
}

.info h1{
	border-bottom: 1px solid #000;
}


/* credits  */

dl{
	line-height: 1.5
}

dt{
	float: left;
	margin-bottom: 6px;
}

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

dd{
	margin-left: 250px;
	margin-bottom: 6px;
	
}


#footer a:hover{
	color: #0166ff;
}



/* Startpage */

.start #head h1{
  text-indent: -9999px;
  background: none;
  height: 0;
}

.start #head{
  border: none;
}

.start #footer{
  border: none;
}

.start #main{
  position: relative;
}

.start .links{
	position: absolute;
	top: 494px;
	width: 480px;
	height: 70px;
}
.start .links .link{
	height: 70px;
	display: block;
	width: 480px;
}
.hide-text {
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.start .links #leftlink{
	float: left;
	/*background: url(../i/maske_azn_styling.png) top left no-repeat;*/
}
.start .links #rightlink{
	float: right;
	/*background: url(../i/maske_azn_fineart.png) top left no-repeat;*/
}
.start .links #rightlink{
	text-align: center
	/*background: url(../i/maske_azn_fineart.png) top left no-repeat;*/
}

@media (min-width: 900px){
	.start .links{
	position: absolute;
	top: 344px;
	margin-left: 240px;
	width: 480px;
	height: 70px;
	opacity: 0;
	background: white;
}
.start .links:hover{
	opacity: 1;
}
.start .links .link{
	height: 70px;
	display: block;
	width: 480px;
	opacity: 0.5;
}
.start .links .link:hover{
	opacity: 1;
}
	
	.start .links #leftlink{
	float: left;
	/*background: url(../i/maske_azn_styling.png) top left no-repeat;*/
}
.start .links #rightlink{
	float: right;
	/*background: url(../i/maske_azn_fineart.png) top left no-repeat;*/
}
}

/*trailer*/

#main.trailer{
float: right;
margin-bottom: 35px;
width: 600px;
}