/* fonts */
    
    @font-face {
      font-family: 'lato';
      src: url('Lato-Regular.eot'); /* IE9 Compat Modes */
      src: url('Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('Lato-Regular.woff') format('woff'), /* Modern Browsers */
           url('Lato-Reg.ttf') format('truetype'), /* Safari, Android, iOS */
           url('Lato-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    
    @font-face {
      font-family: 'navlato';
      src: url('Lato-Regular.eot'); /* IE9 Compat Modes */
      src: url('Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('Lato-Regular.woff') format('woff'), /* Modern Browsers */
           url('Lato-Reg.ttf') format('truetype'), /* Safari, Android, iOS */
           url('Lato-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    
    @font-face {
      font-family: 'lato_light';
      src: url('Lato-Light.eot'); /* IE9 Compat Modes */
      src: url('Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('Lato-Light.woff') format('woff'), /* Modern Browsers */
           url('Lato-Lig.ttf') format('truetype'), /* Safari, Android, iOS */
           url('Lato-Light.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    
    @font-face {
      font-family: 'lato_hai';
      src: url('Lato-Hairline.eot'); /* IE9 Compat Modes */
      src: url('Lato-Hairline.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('Lato-Hairline.woff') format('woff'), /* Modern Browsers */
           url('Lato-Hai.ttf') format('truetype'), /* Safari, Android, iOS */
           url('Lato-Hairline.svg#svgFontName') format('svg'); /* Legacy iOS */
    }
    
/* main CSS */

    *{
        padding: 0px;
        margin: 0px;
    }

    html{
        font-family: arial,sans-serif;
        /* Don't know if I want this or not    height: 101%; */
    }

    body{
        background-color: #EFEFEF;
        font-size: 100%;
        width: 100%;
        height: 100%;
        /*overflow: hidden;*/
    }

    #topbar{
        height: 55px;
        width: 100%;
        background-color: #FFFFFF;
        white-space: nowrap;
        position: fixed;
        top: 0px;
        box-shadow: 0px 0px 8px 0px #8A8A8A;
        overflow-x: auto;
        overflow-y: hidden;
        z-index: 2000;
    }
    
    #nav{
        height: 55px;
    }
    
    #nav>table{
        padding: 0px;
        margin: 0px;
        border-style: none;
        height: 55px;
        width: 100%;
    }
    
    #nav a,#sidebar a{
        font-size: 16pt;
        text-decoration: none;
        color: #000000;
        font-family: navlato, arial, sans-serif;
        transition: color 0.2s;
    }
    
    #nav a:hover,#sidebar a:hover{
        color: #951E1E;
    }

    .dynamic_card{
        width: 75%;
        box-shadow: 0px 0px 8px 0px #8A8A8A;
        background-color: #FFFFFF;
        padding-bottom: 60px;
        margin: 30px auto 0px auto;
        padding-top: 5px
    }
    
    .card{
        width: 1200px;
        box-shadow: 0px 0px 8px 0px #8A8A8A;
        background-color: #FFFFFF;
        padding-bottom: 60px;
        margin: 30px auto 0px auto;
        padding-top: 5px;
    }
    
    .blogcard_small{
        width: 1000px;
        box-shadow: 0px 0px 8px 0px #8A8A8A;
        background-color: #FFFFFF;
        padding-bottom: 60px;
        margin: 30px auto 0px auto;
        padding-top: 5px;   
    }

    .cardtitle{
        font-size: 24pt;
        width: 100%;
        text-align: center;
        margin-top: 5px;
        font-family: lato-light, arial, sans-serif;
    }
    
    .cardline{
        height: 20px;
        width: 100%;
        border-style: dotted none none none;
        border-width: 1px;
        border-color: #951E1E;
        margin-top: 5px;
    }
    
    .rolloveranchor a{
        text-decoration: none;
        color: #000000;
        transition: color 0.2s;
    }
    
    .rolloveranchor a:hover{
        color: #951E1E;
    }
    
    .rolloveranchor2 a{
        text-decoration: none;
        font-weight: bold;
        color: #000000;
        transition: color 0.2s;
    }
    
    .rolloveranchor2 a:hover{
        color: #951E1E;
    }
    
    .entrytitle{
        float: left;
        margin-top: 10px;
        margin-left: 50px;
        font-size: 45pt;
        font-family: lato_light, arial;
    }
    
    .entrydate{
        float: right;
        margin-top: 20px;
        margin-right: 40px;
        color: #BEBEBE;
        transition: color 0.2s;
    }
    
    .entrydate:hover{
        color: #000000;
    }
    
    .entrycontent{
        width: 100%;
        box-sizing: border-box;
        margin-top: 20px;
        padding-left: 170px;
        padding-right: 170px;
    }
    
    .entryswitch{
        width: 100%;
        height: 50px;
        margin: 30px auto 0px auto;
        text-align: center;
    }
    
    .rollbutton{
        height: 50px;
        padding-left: 5px;
        padding-right: 5px;
        background-color: #FFFFFF;
        color: #000000;
        cursor: pointer;
        font-family: lato_light, arial, sans-serif;
        font-weight: bold;
        font-size: 16pt;
        border-style: none;
        box-shadow: 0px 0px 8px 0px #8A8A8A;
        transition: color 0.2s;
    }
    
    .rollbutton:hover{
        color: #951E1E;
    }
    
    #allwrapper{
        width: 100%;
        overflow-x: hidden;
    }
    
    #contentwrapper{
        width: 100%;
        box-sizing: border-box;
        margin-left: 0px;
        transition: margin 0.5s;
        
        float: none;
    }
    
    #sidebar{
        width: 300px;
        height: 100%;
        box-sizing: border-box;
        margin-top: 55px;
        position: fixed;
        top: 0px;
        right: -308px;
        overflow: auto;
        background-color: #FFFFFF;
        box-shadow: 0px 0px 8px 0px #8A8A8A;
        transition: right 0.5s;
    }
    
    #sidebar_button{
        position: fixed;
        top: 6px;
        right: 12px;
        font-size: 31pt;
        display: none;
        cursor: pointer;
    }
    
    #sidebar a{
        width: 100%;
        display: block;
        box-sizing: border-box;
        padding: 14px 0px 14px 40px;
        border-style: none none solid none;
        border-color: #EEEEEE;
        border-width: 1px;
        
    }
    
    .nav_item{
        height: 55px;
        margin-left: 26px;
        display: inline-block;
    }
    
    #shlam_navlogo{
        height: 55px;
        position: fixed;
        top: 5px;
        left: 20px;
        display: block;
        font-size: 28pt;
        font-family: lato_light, arial, sans-serif;
    }
    
/* squidnet or shlam styles */
    
    .ss_p{
        width: 100%;
        margin-top: 15px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
    }
    
/* Page specific ids */
    #home_text1{
        width: 100%; box-sizing: border-box; font-size: 120pt; font-family: lato_hai, arial, sans-serif; padding-left: 50px;
    }
    /*10.5rem 2.7rem*/
    #home_text2{
        width: 100%; box-sizing: border-box; font-size: 32pt; font-family: lato_light, arial, sans-serif; padding-left: 50px;
    }
    #home_couk{
        display: inline-block;
    }
    
/* Media queries */
    @media screen and (max-width: 1225px){
        .card{
            width: 100%;
        }
    }
    
    @media screen and (max-width: 1050px){
        #home_text1{
            padding: 0px;
            text-align: center;
            font-size: 120pt;
        }
        #home_text2{
            padding: 0px;
            text-align: center;
            font-size: 25pt;
        }
        
        .blogcard_small{
            width: 100%;
        }
        
        .entrycontent{
            padding-left: 150px;
            padding-right: 150px;
        }
    }
    
    @media screen and (max-width: 950px){
        #home_text1{
            font-size: 100pt;
        }
        #home_text2{
            font-size: 25pt;
        }
    }
    
    @media screen and (max-width: 800px){
        #home_text1{
            font-size: 120pt;
        }
        #home_text2{
            font-size: 20pt;
        }
        #home_couk{
            display: none;
        }
        
        .entrycontent{
            padding-left: 100px;
            padding-right: 100px;
        }
    }
    

    
    @media screen and (max-width: 767px){
        #home_text1{
            font-size: 115pt;
        }
        #home_couk{
            display: none;
        }
        
        .entrycontent{
            padding-left: 60px;
            padding-right: 60px;
        }
        
        #sidebar_button{
            display: inline;
        }
        
        .nav_item{
            display: none;
        }
        
        #shlam_navlogo{
            left: 0px;
            width: 100%;
            text-align: center;
        }
    }
    
    @media screen and (max-width: 580px){
        #home_text1{
            font-size: 90pt;
        }
        
        .entrycontent{
            padding-left: 30px;
            padding-right: 30px;
        }   
    }