html {
margin: 0px;
 min-height: 100%;
}

body {
    margin: 0px;
    padding: 0px;
    height: 100%;
	background: #333;
    background: -webkit-gradient(radial, 45 45, 50, 50 10, 640, from(#444), to(#333));

	font-family: Helvetica, Arial, sans-serif;	
}


h1 {
font-family: "atrament-web-1","atrament-web-2", "Lucida Grande","Lucida Sans Unicode", Helvetica, Arial, sans-serif;
text-transform: uppercase;
text-shadow: rgba(255, 255, 255, 0.296875) 0px 1px 0px;
padding: 3px 0  0 0;
font-size: 36px;
color:#f3f3f2;
font-weight: 600;
}


a {
margin: 0px;
padding: 0px;
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
text-decoration: none;
}

a:hover{
margin: 0px;
padding: 0px;
opacity: .5;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 300ms;
}

.site-name {
font-family: "atrament-web-1","atrament-web-2",sans-serif;
font-size: 28px;
padding: 10px 0 0px 170px;
z-index: 1;
display: block;
}

#logo {
float: left;
}

#navigation {
margin-top: -8px;
padding: 0px 0 0 171px;
}

.contact {
    padding-top:10px;
    font-size: 1.425em;	
    font-family: "atrament-web-1","atrament-web-2",sans-serif;
    text-shadow: rgba(255, 255, 255, 0.296875) 0px 1px 0px;
    color: #f3f3f2;
    text-transform: uppercase;
}

.contact li {
    list-style: none;
}

.contact a, .contact a:visited {
    color: #fff;
}

#navigation a {
font-size: 1.425em;	
font-family: "atrament-web-1","atrament-web-2",sans-serif;
text-shadow: rgba(255, 255, 255, 0.296875) 0px 1px 0px;
color: #f3f3f2;
text-transform: uppercase;

}

#navigation li {
display: inline;
padding-right: 5px;
color: #fff;
}

.naviactive a{
background: url(/static/imgs/arrow.png) no-repeat bottom;
padding-bottom: 85px;
}

.naviactive a:hover{
padding-bottom: 85px;
}

.projectDetail .tag {
    background: #fff;
    width: 140px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
.tagsTop ul {
    padding: 0 0 20px 10px;
}

h2 {
font-family: "atrament-web-1","atrament-web-2",sans-serif;
text-transform: uppercase;
padding: 0px;
font-size: 1.575em;
color:#3f3f3f;
font-weight: 600;
}


h3 {
margin: 2px 0 0 0px;
padding: 0px;
font-size: 0.7em;
font-weight: 400;
color:#777777;
line-height: 1.1em;
/*text-transform: uppercase;*/
padding-right: 170px;
}

h3 a, h3 a:visited {
color:#777777;    
}
.wrapper {
position: absolute; 
width: 100%;
height: 40px;
z-index: 20;
background: url(/static/imgs/top_shadow.png) top repeat-x;

}
.project {   
/*border: 5px solid black;*/
position: relative;
margin: 0px;
padding: 50px 0 0 0px;
}

.project h1 {
    color: #444444;
}
.content {
/*opacity: 0;*/
/*filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(1deg); 
-moz-transform: rotate(1deg);*/
height: 740px;
width: 950px;
margin:0px;
padding:0px;
background: url(/static/imgs/back.png) top center no-repeat;
}

.topfold {
height:143px;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(-180deg); 
-moz-transform: rotate(-180deg);
}

.topfold h2 {
display: block;
margin: -8px 0 0 0;
}
.leftfold {
height: 450px;

}
.leftfold img {
margin-left:20px;
}
.leftfold h2{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(90deg); 
-moz-transform: rotate(90deg);
height: 150px;
width: 450px;
margin: 160px 0 0 0px;
}
.rightfold {
height: 450px;
}
.rightfold img {
margin: 8px 0 0 8px;
}
.rightfold h2{
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg);
height: 150px;
margin: 0px 0px 0px 0px;
padding:0 0 0 0;	
}

.bottomfold {
margin: 0 0 0 10px;
}

.bottomfold h1 {
margin: -8px 0 0 -2px;
color:#444444;
}

.bottomfold h1 a {
color:#444444
}

.bottomfold h2 {
margin: -8px 0 0 0;
}


.linkcolor18 { 
color: #5c5a57;
}
.linkcolor18:hover { 
color: #8c8a88;
}

.linkcolor20 { 
color: #d72620;
}
.linkcolor20:hover { 
color: #991e1b;
}

.linkcolor19 { 
color: #a49e95;
}
.linkcolor19:hover { 
color: #d3ccc1;
}

.linkcolor14 { 
color: #a0b21e;
}
.linkcolor14:hover { 
color: #b0c421;
}

.linkcolor13 { 
color: #ff6a6d;
}
.linkcolor13:hover { 
color: #ff8083;
}

.linkcolor1 { 
color: #c292c6;
}
.linkcolor1:hover { 
color: #d4b3d7;
}

.linkcolor2 { 
color: #0e9ccd;
}
.linkcolor2:hover { 
color: #32a5cd;
}

.linkcolor6 { 
color: #be0004;
}
.linkcolor6:hover { 
color: #be363a;
}

.linkcolor11 { 
color: #ff944c;
}
.linkcolor11:hover { 
color: #ffa467;
}

.linkcolor12 { 
color: #4e4e59;
}
.linkcolor12:hover { 
color: #5f5f6b;
}

.linkcolor4 { 
color: #1785b5;
}
.linkcolor4:hover { 
color: #3b90b5;
}

.linkcolor8 { 
color: #88c416;
}
.linkcolor8:hover { 
color: #90c42d;
}

.linkcolor9 { 
color: #1b4abc;
}
.linkcolor9:hover { 
color: #2853bc;
}

.linkcolor3 { 
color: #ab119c;
}
.linkcolor3:hover { 
color: #ab3aa0;
}

.linkcolor5 { 
color: #ffc001;
}
.linkcolor5:hover { 
color: #ffd143;
}

.linkcolor10 { 
color: #474c3e;
}
.linkcolor10:hover { 
color: #555b4b;
}

.linkcolor7 { 
color: #94b01d;
}
.linkcolor7:hover { 
color: #a0b05b;
}

.linkcolor15 { 
color: #78afed;
}
.linkcolor15:hover { 
color: #8cbcf2;
}

.linkcolor16 { 
color: #000000;
}
.linkcolor16:hover { 
color: #000000;
}

.linkcolor17 { 
color: #5ed7fa;
}
.linkcolor17:hover { 
color: #5ed7fa;
}


.blogPost .content {
    background: none;
}

.blogPostTop {
    background: url(/static/imgs/back_top.png) no-repeat bottom;
    padding: 0px 0 7px 0;    
}

.blogPostCenter {
    background: url(/static/imgs/back_center.png) repeat-y center;
}

.blogPostBottom {
    background: url(/static/imgs/back_bottom.png) no-repeat center;
    padding: 90px 0 50px 0;
    z-index: -5;
}

.blogPostContent {
    font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",serif;
    color: #636363;
    padding: 30px 30px 10px 30px;
    font-size: 14px;
}

.blogPostContent p {
    padding: 10px 0 10px 0;
}

.previousProject {
margin: 25px 0 0 0;    
}

.previousProject a {
display: block;
text-indent: -9999px;
background: url(/static/imgs/arrow_left.png) no-repeat center;
padding: 65px 0px 25px 0px;
margin: 0 0 0 60px;
}

.nextProject {
margin: 25px 0 0 0;
}

.nextProject a {
display: block;
text-indent: -9999px;
background: url(/static/imgs/arrow_right.png) no-repeat center;
padding: 65px 0px 25px 0px;

}

.currentPage {
text-align: center;
margin: 50px 0 0 240px;
padding: 5px 5px 5px 5px;
width: 150px;
background: #fff;
-moz-box-shadow: 1px 1px 3px #333;
-webkit-box-shadow: 1px 1px 3px #333;
box-shadow: 1px 1px 3px #333;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#333');

-webkit-transform: rotate(-1deg); 
-moz-transform: rotate(-1deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.currentPage h2 {
font-family: "atrament-web-1","atrament-web-2", "Lucida Grande","Lucida Sans Unicode", Helvetica, Arial, sans-serif;
text-transform: uppercase;
text-shadow: rgba(255, 255, 255, 0.296875) 0px 1px 0px;
font-size: 2.525em;
}

.projectImageContainer {
    margin: 0 0 60px 0;
}

.projectImage {
    -moz-box-shadow: 0px 3px 10px #000;
    -webkit-box-shadow: 0px 3px 10px #000;
    box-shadow: 0px 3px 10px #000;
    /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000')";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000');
    margin: 0 0 10px 0;

}



.tag-1 a {
font-size: 1em;
color:#b0b0b0;
}

.tag-2 a {
font-size: 1.2em;
color:#9b9b9b;
}

.tag-3 a {
font-size: 1.4em;
color:#8c8c8c;
}

.tag-4 a {
font-size: 1.5em;
color:#787878;
}

.tag-5 a {
font-size: 1.6em;
color:#5c5c5c;
}

.tag-6 a {
font-size: 1.8em;
color:#3f3f3f;
}

footer li {
display: inline;
}

.copyright {
    padding: 20px 0 0 0;
    color: #787878;
    font-size: 0.7em;
}

.projectDetail {
    background: url(/static/imgs/bracket.png) top left no-repeat;
    margin-top: 10px;
    padding-top: 40px;
}

.projectInfo {
    font-family: "Helvetica","Arial", sans-serif;
    color: #fff;
    font-size: 14px;
    font-weight: 200px;
    margin-bottom: 30px;
}

.projectInfo h2 {
    font-family: "atrament-web-1","atrament-web-2", "Lucida Grande","Lucida Sans Unicode", Helvetica, Arial, sans-serif;
    color: #fff;
    margin: 0 0 5px 10px;
}

.projectInfo table {
    padding: 5px 10px 15px 10px;
    margin: 0 0 0 0px;
    border-spacing: 1px;
    border: 1px white;
}

.projectInfo a, .projectInfo a:visited {
    color:#ffffff;
}

.projectInfo th {
    font-family: Helvetica, Arial, sans-serif;
    padding: 0 0 3px 0;
    font-size: 12px;
    font-weight: normal;
    text-transform: uppercase;
    opacity: 0.6;
    width: 135px;
}

.projectInfo hr {
    opacity: 0.2;
    margin: 0 0 0 0px;
}

.projectInfo td {
    padding: 0 0 3px 0;
    width: 230px;
    font-size: 11px;
    text-transform: uppercase;
    opacity: 1;
}

.imageCaption {
    font-family: "Helvetica","Arial", sans-serif;
    background: #000;
    color: #fff;
    font-size: 12px;
    padding: 2px 4px 2px 4px;
}

.projectDescription {
    margin: 20px 0 0 10px;
    padding: 0px;
    font-family: "Helvetica","Arial", sans-serif;
    font-size: 11px;
    line-height: 14px;
    opacity: 0.8;
}

.projectDescription a, .projectDescription a:visited {
    color: #fff;
}

.loginForm {
    font-family: "atrament-web-1","atrament-web-2",sans-serif;
    text-transform: uppercase;
    padding: 0px;
    font-size: 1.575em;
    color:#3f3f3f;
    font-weight: 600;
    }

.loginForm li {
    list-style: none;
}

.loginWrapper {
    padding: 180px 0 0 180px;
}


/*###################### BLOG ####################*/

.blogPost .content {
    height: 100%;
}

.blogPost h2 a {
    font-size: 32px;
    color: #333;
}
.blogPost h3 {
    font-family: "atrament-web-1","atrament-web-2",sans-serif;
    font-size: 1.575em;
    padding: 0 0 10px 0;
}
.postBody p {
    font-family: "Helvetica","Arial", sans-serif;
    color: #434343;
    font-size: 13px;
    line-height: 18px;
}

.sidebar h3 {
    font-family: "atrament-web-1","atrament-web-2",sans-serif;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}

#footer h2 {
    margin-top: 40px;
    color: #fff;
}

#footer {
    margin-bottom: 10px;
}

.tagCloud {
    position: relative;
}

.tagBracket {
    position: relative;
    height: 100%;
    margin: 0px;
    padding: 0px;
    background: url(/static/imgs/backBracket.png) left center no-repeat;
}

.topBracket {
    position: absolute;
    top: 0px;
    height: 200px;
    margin-top: 40px;
    background: url(/static/imgs/topBracket.png) bottom center no-repeat;
}

.centerBracket {
    background: url(/static/imgs/centerBracket.png) no-repeat scroll center center transparent;
    height: 220px;
    margin-top: -90px;
    position: absolute;
    top: 50%;
}

.bottomBracket {
    position: absolute;
    bottom: 0px;
    background: url(/static/imgs/bottomBracket.png) bottom center no-repeat;    
    height: 200px;
}

ul.tags {
margin:0 0 20px;
}
ul.tags li {
display:block;
font-size:10px;
margin:0 0 1px;
overflow:hidden;
position:relative;
z-index:1;
text-transform: uppercase;

}

ul.tags li span.perc {
font-family: "atrament-web-1","atrament-web-2",sans-serif;
background: #fff;
display:block;
height:100%;
left:0;
min-width:12%;
overflow:hidden;
position:absolute;
text-indent:-9999px;
top:0;
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-border-radius: 2px;
border-radius: 2px;

}

ul.tags li a {
color:#111;
display:block;
font-weight: normal;
padding: 2px 12px;
position:relative;
text-decoration:none;
z-index:2;
}
ul.tags li a:hover {
text-decoration:none;
color:#111;

}
ul.tags li:hover {
background:none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
z-index:1;
-moz-border-radius: 2px;
border-radius: 2px;

}
ul.tags li:hover span.perc {
background:none repeat scroll 0 0 transparent;
opacity: .5;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 300ms;

}

ul.tags li a:hover strong, ol.tags li:hover a strong {
}

ul.tags li em {
color:#333;
display:none;
float:right;
padding:2px 12px 0 0;
z-index:3;
}

ul.tags li:hover em {
display:inline;
}

ul.tags li em span.global a {
color:#444;
margin-left:5px;
}

ul.tags li em span.global a:hover {
color:#444;
}


.viernullvier {
    height: 500px;
    font-size: 3em;
    font-family: "atrament-web-1","atrament-web-2",sans-serif;
    
}

.viernullvier h2,.viernullvier h1, .viernullvier h3 {
    color: #fff;
    text-shadow: rgba(255, 255, 255, 0.296875) 0px 1px 0px;
    
}

.viernullvier a, .viernullvier a:visited {
    color: #fff;
    font-size:20px;
}

.googleplus {
    display: block;    
    margin-top:10px;
    margin-left:10px;
    height: 35px;
}

.facebook {
    display: block;    
    margin-top:12px;
    height: 35px;
    }