/* -----------------------------------------------------------------------------
CONTENT   nahrgang new media Cascading Style Sheet
DETAIL    Main CSS Settings
FILENAME  style.css

VERSION   20130215
AUTHOR    nahrgang new media

PROJECT   nahrgang new media
CLIENT    nahrgang new media
BRANCH    Media Agency
URL       http://www.nahrgang.net/
----------------------------------------------------------------------------- */

/* #############################################################################

@RESET & BASICS
Based on: html5doctor.com Reset Stylesheet by Richard Clark (v1.6.1 20100917)
          Reset CSS by Eric Meyer (v2.0 20110126)

############################################################################# */

/*==BASE============================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}
input,select{vertical-align:middle}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}

ins{background-color:#fff;color:#000;text-decoration:none}
mark{background-color:#fff;color:#000;font-style:italic;font-weight:bold}
hr{display:block;height:1px;border:0;border-top:1px solid #000;margin:1em 0;padding:0}

/*==HELPER CLASSES==================================================*/
.ir{display:block;text-indent:-999em;overflow:hidden;background-repeat:no-repeat;text-align:left;direction:ltr} /* For image replacement */
.hidden{display:none;visibility:hidden} /* Hide for both screenreaders and browsers: css-discuss.incutio.com/wiki/Screenreader_Visibility */
.visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} /* Hide only visually, but have it available for screenreaders: by Jon Neal. www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto} /* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.invisible{visibility:hidden} /* Hide visually and from screenreaders, but maintain layout */
.inactive{display:none}
.cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{zoom:1} /* Clear Fix */

/*==VISUAL FEEDBACK=================================================*/
html{overflow-y:scroll} /* Always force a scrollbar in non-IE */
html,body{cursor:default} /* Arrow cursor on text instead of text selection cursor */
label,input[type="button"],input[type="submit"],input[type="image"],button{cursor:pointer} /* Hand cursor on clickable input elements */
a:focus{outline:thin dotted}
a:hover,a:active{outline:0}

/* #############################################################################

@SITE SETTINGS

############################################################################# */

/*==BACKGROUND======================================================*/
html,body{background:#fff;}

/*==LINKS===========================================================*/
a,a:link,a:visited,a:focus{color:#000;text-decoration:none;}
a:link{-webkit-tap-highlight-color:#000;} /* Overrides the highlight color shown when the user taps a link or a JavaScript clickable element in Safari on iPhone. */
a:hover{color:#f29400;border-bottom:1px dotted #f29400;}
a:active{color:#f29400;}

/*==SELECTIONS======================================================*/
::-moz-selection{background:#f29400;color:#fff;text-shadow:none;}
::selection{background:#f29400;color:#fff;text-shadow:none;}
img::-moz-selection{background:transparent;}
img::selection{background:transparent;}

/*==SPRITE==========================================================*/


/*==EFFECTS=========================================================*/
.class{-webkit-transition:opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s;transition:opacity 0.5s;}
 a{-webkit-transition:all 0.40s ease-in-out;-moz-transition:all 0.40s ease-in-out;-o-transition:all 0.40s ease-in-out;transition:all 0.40s ease-in-out;}

/* #############################################################################

@TYPOGRAPHY

############################################################################# */

/*==FONTFACE========================================================*/
/*
 * Web Fonts from fontspring.com
 *
 * All OpenType features and all extended glyphs have been removed.
 * Fully installable fonts can be purchased at http://www.fontspring.com
 *
 * The fonts included in this stylesheet are subject to the End User License you purchased
 * from Fontspring. The fonts are protected under domestic and international trademark and 
 * copyright law. You are prohibited from modifying, reverse engineering, duplicating, or
 * distributing this font software.
 *
 * (c) 2010-2011 Fontspring
 *
 *
 *
 *
 * The fonts included are copyrighted by the vendor listed below.
 *
 * Vendor:      exljbris
 * License URL: http://www.fontspring.com/fflicense/exljbris
 *
 *
 */

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

/*==BASICS==========================================================*/
body,select,input,textarea{
    color:#000;
    font:18px/normal Museo300,Arial,sans-serif;
    letter-spacing:1px;
    }
strong,b{font-weight:bold;}
em,i{font-style:italic;}

/*==ELEMENTS==================           background: rgb(255, 153, 0) ; opacity: 0.9;
 ======================================*/
p{
    font:14px/1.6em Museo500,Arial,sans-serif;
    padding:0 0 20px 0;
    text-align:left;
    }
blockquote{
    font-size:18px;
    line-height:1.3em;
    padding:20px;
    text-align:justify;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
background-color: #ffffff;
    }
.footnote{font-size:10px;}

/* #############################################################################

@LAYOUT

############################################################################# */

/*==GENERAL=========================================================*/
body{border-top:3px solid #f29400;}
#container{margin:0 auto;width:940px;}

/*==HEADER==========================================================*/
#header{
    height:100px;
    margin:42px 0 0 0;
    width:100%;
    }
    .logo{
        background:url(/assets/i/logo.png) no-repeat transparent 0 0; /* Logo */
        display:block;
        float:left;
        height:88px;
        text-indent:-999em;
        width:280px;
        }
    
/*==NAVIGATION======================================================*/
#nav{
    float:left;
    height:30px;
    margin:58px 0 0 70px;
    width:590px;
    }
    #nav ul{
        display:table;
        list-style:none;
        padding:0;
        width:100%;
        }
        #nav ul li{float:left;margin:0 0 0 30px;}
            #nav ul li:first-child{margin:0;}
            #nav .nav-last{float:right !important;}
            #nav .active{color:#f29400;border-bottom:1px dotted #f29400;}

/*==CONTENT=========================================================*/
#main{width:100%;height:100%;overflow:hidden;}
    #main h1,#main h2{
        color:#f29400;
        clear:both;
        font-size:48px;
        padding:50px 0;
        font-weight:normal;
        letter-spacing:-1px;
        text-transform:uppercase;
        }
        #main h1:before,#main h2:before{
            content:"//";
            float:left;
            height:100px;
            padding:0 15px 0 0;
            }
    #content-left{float:left;width:220px;}
    #content-left .active{color:#ffffff;}
    #content-right{float:right;width:700px;}
        #content-right-inner{width:635px;background:#f6f6f7;margin:0 auto;border:33px solid #f6f6f7;}
        #content-right-inner li{font:14px/1.6em Museo500;
            margin:0 0 15px 30px;
            line-height: 22.4px}

/* COLUMN SYSTEM */
.full-column{width:100%;}
.two-columns-one{width:48%;}
.three-columns-one{width:30.66%;}
.three-columns-two{width:65.33%;}
.four-columns-one {width:22%;}
.four-columns-two{width:48%;}
.four-columns-three{width:74%;}
.two-columns-one,.three-columns-one,.three-columns-two,.four-columns-one,.four-columns-two,.four-columns-three{float:left;margin-right:3.9%;position:relative;padding:0 0 20px 0;}
.three-columns-two p{text-align:justify;}
.last{clear:right;margin-right:0 !important;}

/* BOX SYSTEM */
.box{
    display:block;
    height:170px;
    width:300px;
    margin:0 20px 0 0;
    }
    .box h3{
        background:#fff;
        color:#f29400;
        font:24px/normal Museo500,Arial,sans-serif;
        margin:40px 0 0 0;
        padding:5px;
        position:absolute;
        }
        .box h3:before{content:"//";padding:0 7px 0 0;}
        .box h3 span{color:#000;}
    .box p{padding:15px;}
    .box ul{font-size:14px;padding:90px 20px 20px 30px;list-style:none;}
    .box ul li{line-height:1.8em;}
    .box-orange{background:#f29400;}
        .box-orange a:hover{color:#fff;border-bottom:1px dotted #fff;}
    .box-grey{background:#e9e4e3;}
    .box-big{background:#808080;border-bottom:3px solid #f29400;height:167px;width:620px;}
    .box-wh {background:#ffffff;width:620px;}
    .box-nnmdot h3:before{content:"";background: url("/assets/i/nnmdot.png") no-repeat;padding:0 0 0 40px;margin:0 0 0 20px;}
    .box-nnmdot ul li{padding:0 0 10px 0;}
        .box-nnmdot ul li:before{content:"//";}

body.content .box{display:block;height:auto;width:220px;margin:0 20px 0 0;}
body.content .box-big{height:100px;width:100%;margin:0 0 20px 0;}

     body.content .tagcloud{width:100%;height:80px;background:#f6f6f7;margin:20px 0 0 0;border-bottom:3px solid #f29400;padding:20px 0 0 0;}
        .tagcloud h3{background:0 none;position:relative;margin:0;}
        .tagcloud p{padding:0 0 0 65px;font-size:10px;}


/* BOX SYSTEM 2 */
.box2{
    display:block;
    height: 170px;
    width: 230px;
    margin: 0 25px 0 0;
    }
.box2 p{padding:15px;}

/* BOX SYSTEM 3 */
.box3{
    display:block;
    width: 452px;
    margin: 0 25px 0 0;
    }
.box3 p{padding:15px;}


/* IMAGES */
#content-right img{border-bottom:3px solid #f29400;}
#content-right img+img{margin:0 0 0 45px;}

/*==FOOTER==========================================================*/
#footer{
    font-size:12px;
    padding:80px 0;
    width:100%;
    }
    #footer ul{float:right;list-style:none;}
        #footer ul li{display:inline;margin:0 0 0 2em;}

/* #############################################################################

@MODULES

############################################################################# */

/** END OF LINE. **/