@font-face {
    font-family: 'OFLSortsMillGoudyRegular';
    src: url('/css/OFLGoudyStM.eot');
    src: local('OFL Sorts Mill Goudy Regular'), local('OFLGoudyStM'), url('/css/OFLGoudyStM.ttf') format('truetype');}

@font-face {
    font-family: 'OFLSortsMillGoudyItalic';
    src: url('/css/OFLGoudyStM-Italic.eot');
    src: local('OFL Sorts Mill Goudy Italic'), local('OFLGoudyStM-Italic'), url('/css/OFLGoudyStM-Italic.ttf') format('truetype');}

html, body {
    padding:0;
    margin:0;
    height:100%;
    width:100%;
    color:#fff;
    font-family:OFLSortsMillGoudyRegular, Times, 'Times New Roman', serif;
    background-color:transparent;}
    
    html {
        background:#fff url(/images/html_bg.jpg) no-repeat 100% 0;}
    
img {
    border:none;}
    
a {
    text-decoration:none;
    color:#7e7d7d;
    outline:none !important;}
    
a:hover {
    text-decoration:none;
    color:#686868;
    color:#5d5d5d;}

:focus {
    moz-outline-style:none;}


div#loading {
    position:absolute;
    top:50%;
    left:50%;
    margin:-12px 0 0 -12px;
    z-index:1000;}


div#popup {
    position:absolute;
    top:0;
    left:0;
    z-index:999;
    width:100%;
    height:100%;
    background:transparent url(/images/popup_bg.png) repeat 0 0;}
    
    div#popup .window {
        width:50%;
        height:65%;
        padding:5% 5% 5% 10%;
        margin:4% 0 0 20%;
        border:1px solid #dadada;
        background:#fff url(/images/html_bg.jpg) no-repeat 100% 0;}
    
    div#popup .window div#popupTrack {  
        float:right;
        height:100%; 
        width:10px; 
        background-color:transparent;  
        cursor:move;}
     
    div#popup .window div#popupHandle {  
        width:10px;  
        background-color:#4b4a4a;
        cursor:move;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;}

    div#popup .window div#popupContent {
        width:90%;
        height:100%;
        overflow:auto;
        color:#4b4a4a;}
        
        div#popup .window div#popupContent h1 {
            font-weight:normal;
            font-size:1.5em;
            margin:2em 0 .75em 0;}
            
        div#popup .window div#popupContent p {
            font-size:1.25em;}
            
    div#popup ol.form {
        margin-top:2em;}
            
            
#logo {
    position:relative;
    float:left;
    top:50%;
    left:50%;
    width:32%;
    margin:-176.5px 0 0 -270px;}
    
    #logo a, #logo:hover {
        float:left;
        display:block;
        text-decoration:none;}
        
    #logo img {
        position:relative;
        float:left;}
        
        #logo .bg {
            z-index:1;}
                    
        #logo .text_heidi {
            margin-top:-37%;
            z-index:2;}
    
        #logo .text_photography {
            margin-top:-27%;
            z-index:2;}
        
        #logo span {
            position:relative;
            height:98%;
            width:100%;
            display:block;
            z-index:200;}
            
            
div#content {
    position:relative;
    width:100%;
    height:100%;
    z-index:98;
    color:#4b4a4a;}
    
    
div#categories {
    position:relative;
    top:50%;
    margin-top:-25%;
    width:54%;
    padding:0 23%;
    z-index:101;}
    
    #categories ul {
        margin:0;
        padding:0;
        list-style:none;}
        
    #categories li.category {
        position:relative;
        float:left;
        width:31.3%;
        margin:0 1%;}
        
        #categories li.category a {
            position:relative;
            float:left;
            width:92%;
            padding:4%;
            background:#dadada;
            text-align:center;
            font-variant:small-caps;
            z-index:99;
            text-decoration:none;}
            
            #categories .category a:hover {
                background:#c8c8c8;
                text-decoration:none;}
            
            #categories li.category a span {
                display:block;
                padding-top:10px;
                line-height:1;
                font-size:2em;}
                
        #categories li.category ul {
            position:absolute;
            left:-999em;
            bottom:7.5%;
            width:100%;
            background:#dadada;
            z-index:100;}
            
            #categories li.category ul li a {
                padding:2% 4%;
                font-size:1.3em;
                font-variant:normal;
                background:transparent;}
                
                #categories li.category ul li a:hover {
                    background:#e8e8e8;}
            
            #categories ul li.category:hover ul {
                left:0;}
             
    
div#navigation {
    position:fixed;
    width:63%;
    left:0;
    padding-left:28.5%;
    z-index:99;
    bottom:.5%;
    background:#fff;}
        
    #navigation a {
        width:8.5%;
        float:left;
        display:block;
        text-align:center;
        font-weight:normal;
        font-size:1.8em;
        padding:0 4% 0 4%;}