/*-------------- RESET & CLEAR --------------*/
* { padding : 0; margin : 0; }
html, body, div, h1, h2, h3, h4, p, a, span, ul, li, img {
    font-family:inherit;
    font-size:100%;
    font-weight:normal;
    font-style:normal;
    text-align:left;
    text-decoration:none;
    list-style:none;
    background:transparent;
    padding:0;
    margin:0;
    border:0 none;
    outline:0 none;
    vertical-align:baseline; }

.clearfix:after { content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0; }
.clearfix { display : block; }
html[xmlns] .clearfix { display : block; }
* html .clearfix { height : 1%; }
:focus { outline: 0; }
::selection { color:#fff; background: #626666; }
::-moz-selection { color:#fff; background: #626666; }

/*-------------- BASE --------------*/
html { background:#242626 url(../../images/bg_main.jpg) repeat center top; }
body { font:13px 'AWConquerorSans', 'Helvetica Neue', Helvetica, Arial, sans-serif; background:transparent url(../../images/bg_main_shine.jpg) no-repeat center top; cursor : default; }

body:before { content:""; width:100%; height:20px; position:fixed; top:-20px; left:0; z-index:100;
	box-shadow:0px 0px 20px rgba(0,0,0,0.5); -webkit-box-shadow:0px 0px 20px rgba(0,0,0,0.5); -moz-box-shadow:0px 0px 20px rgba(0,0,0,0.5);
	-o-box-shadow:0px 0px 20px rgba(0,0,0,0.5); -ms-box-shadow : 0px 0px 20px rgba(0,0,0,0.5); }
	
#background { background:transparent url(../../images/bg_line.png) no-repeat center center fixed; }

#page-loader { background:#00aeef url(../../images/loading.gif) no-repeat center center; width:100%; height:100%; position:fixed; top:0; left:0; z-index:100; }
#page-loader p { color:#fff; text-shadow:1px 1px 0px rgba(0,0,0,0.2); text-align:center; width:100%; margin:0; position:absolute; top:60%; left:0; }
#page { width:960px; margin:0 auto; }

/*-------------- FONTS & TYPOGRAPHY --------------*/
@font-face {
    font-family: 'AWConquerorSans';
    src: url('../fonts/awConquerorSans-webfont.eot');
    src: url('../fonts/awConquerorSans-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/awConquerorSans-webfont.woff') format('woff'),
         url('../fonts/awConquerorSans-webfont.ttf') format('truetype'),
         url('../fonts/awConquerorSans-webfont.svg#AWConquerorSans') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DejaVu';
    src: url('../fonts/DejaVuSerif-Italic-webfont.eot');
    src: url('../fonts/DejaVuSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/DejaVuSerif-Italic-webfont.woff') format('woff'),
         url('../fonts/DejaVuSerif-Italic-webfont.ttf') format('truetype'),
         url('../fonts/DejaVuSerif-Italic-webfont.svg#DejaVuSerif-Italic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BPdots';
    src: url('../fonts/BPdots-webfont.eot');
    src: url('../fonts/BPdots-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BPdots-webfont.woff') format('woff'),
         url('../fonts/BPdots-webfont.ttf') format('truetype'),
         url('../fonts/BPdots-webfont.svg#BPdots') format('svg');
    font-weight: normal;
    font-style: normal;
}


h1 a { text-indent:-9999px; background:transparent url(../../images/logo.png) no-repeat 0 0; width:177px; height:177px; display:block; margin:-7px 0 0 -34px; float:left; z-index:80; }
h1 span { color:#c8cccc; font-family:'DejaVu', Georgia, Times, 'Times New Roman', serif; font-size:24px; line-height:36px; font-style:normal; text-transform:uppercase;
	text-shadow:1px 1px 0px rgba(0,0,0,0.5); padding:34px 0 0 40px; display:block; float:left; }
h2 { color:#00aeef; font-size:30px; line-height:42px; margin: 0 0 30px; }
h3 { color:#242626; font-family : 'DejaVu', Georgia, Times, 'Times New Roman', serif; font-size : 18px; line-height : 24px; font-style : normal; margin : 0 0 20px; }
h3:before, h4:before { content:":: "; color:#00aeef; }
h4 { color:#242626; font-family : 'DejaVu', Georgia, Times, 'Times New Roman', serif; font-size : 14px; line-height : 20px; font-style : normal; }

p { color:#626666; font-size:14px; line-height:22px; margin:0 0 20px; }
p a { color:#242626; border-bottom:1px dotted #00aeef; }
p a:hover, a:visited, a:active { color : #ec008c; }
p span { color : #00aeef; }
a { transition : color .4s ease-in-out; -webkit-transition : color .4s ease-in-out; -moz-transition : color .4s ease-in-out;
	-o-transition : color .4s ease-in-out; -ms-transition : color .4s ease-in-out; }
	
/*-------------- BASIC HTML TAGS --------------*/

hr { border:1px dashed #e4e4e4; margin:22px; }
strong, b { font-weight:bold; }
em, i { font-style:italic }

/*-------------- HEADER --------------*/
#header { height:140px; padding:40px 5px; position:relative; }
#navigation { height:30px; position:absolute; bottom:75px; right:5px; z-index:90; }
#navigation ul li { width:30px; height:30px; float:left; }
#navigation ul li a { display:block; }

/*-------------- CONTENT --------------*/
#content { margin-top:0; }
.container { background:#fff; margin:5px; display:none; position:relative; z-index:30; }
.container.open { display:block; }
#intro { background:#00aeef url(../../images/bg_stripes.jpg) repeat 0 0; padding:30px; }
#intro h2 { color:#fff; text-shadow:1px 1px 0px rgba(0,0,0,0.2); margin:0; }
#projekt { cursor:pointer; /*background:#fff url(../../images/bg_line_small.png) no-repeat 660px 460px;*/ }
#projekt-loader { background:#00aeef url(../../images/loading.gif) no-repeat center center; width:100%; height:100%; display:none; position:absolute; top:0; left:0; z-index:40; }
#entry, #desc { float:left; }
#entry { background:#00aeef url(../../images/loading.gif) no-repeat center center; width:640px; height:760px; overflow:hidden; }
#desc { width:270px; padding:20px; }
#profil { height:570px; padding:30px; overflow:hidden; }
#profil h2, #profil h3, #profil p { width:570px; }
#profil img { position:absolute; top:0; right:-320px; }

/*-------------- PORTFOLIO --------------*/
#portfolio { padding:0 0 40px; }
#portfolio ul { background:transparent url(../../images/portfolio_bg.png) repeat 0 0; }
#portfolio ul li { width:310px; height:310px; margin:5px; float:left; position:relative; }
#portfolio ul li .title { background : #fff; width : 270px; height : 20px; padding : 20px; }
#portfolio ul li a { background : #626666; width : 310px; height : 250px; display : block; position : relative; }
#portfolio ul li a.active { cursor : default; }
#portfolio ul li a span, #portfolio ul li .loader { position:absolute; top:0; left:0; }
#portfolio ul li a span { width:310px; height:250px; display:none; }
#portfolio ul li a .view { background:transparent url(../../images/portfolio_view.png) no-repeat right bottom; z-index:40; }
#portfolio ul li a.external .view { background : transparent url(../images/portfolio_external.png) no-repeat right bottom; }
#portfolio ul li a .overlay { background:#00aeef url(../../images/bg_stripes.jpg) repeat 0 0; z-index:50; }
#portfolio ul li .loader { background:#00aeef url(../../images/loading.gif) no-repeat center center; width:310px; height:310px; display:none; z-index:60; }

/*-------------- FOOTER --------------*/
#footer { height:60px; padding:0 0 40px; }
#copyright, #backtotop { height:60px; margin:0 5px; }
#copyright { width:630px; float:left; }
#backtotop { width:310px; float:right; }
#copyright a, #backtotop a { font-family:'DejaVu', Georgia, Times, 'Times New Roman', serif; font-size:14px; line-height:20px; font-style:normal; padding:20px; height:20px; display:block; position:relative; }
#backtotop a { color:#242626; background:#00aeef url(../../images/footer_bg_btt.png) no-repeat right center; }
#copyright a { color:#c8cccc; background:#0b0d0d url(../../images/footer_bg_copy.png) no-repeat right center; }
#copyright a span { color:#00aeef; }
#copyright a img, #backtotop a img { width:30px; height:30px; position:absolute; top:15px; right:15px; }

/*-------------- MEDIA QUERIES --------------*/
/* Wide Screen */
@media (min-width: 1280px) {

    #page { width : 1280px; }
    h2 br { display : none; }
    #projekt { background : #fff url(../images/bg_line_small.png) no-repeat 970px 460px; }
    #profil img { right : 0; }

}

/* Standard Screen */
@media (min-width: 960px) and (max-width: 1280px) { #page { width : 960px; } }

/* Small Screen */
@media (max-width: 960px) {

    #page { width : 640px; }
    h2 br { display : none; }
    #projekt { background : #fff url(../images/bg_line_small.png) no-repeat 330px 790px; }
    #profil img { display : none; }
    #entry { width : 630px; }
    #backtotop { display : none; }

}