/* Media Queries  */

@media screen and (min-width: 771px) {
    section#content.pullUp {top: -60px;}

    #menu{
    display: none;
    }
    
    nav > ul{
    display: table;
    }
    
    nav > ul > li:hover > div > ul{
    top: 100%;
    opacity: 1;
    margin-top: 0;
    }
    
    nav > ul > li > div > ul > li:hover > div > ul{
    left: 100%;
    top:0;
    opacity: 1;
    margin-top: 0;
    }
    
    nav li li li:first-child{
    border-top:none;
    }
    
    /* 1.0.1 Addition */
    
    nav > ul > li:last-child > div > ul > li:hover > div > ul{
    left: -100%;
    }

}

@media screen and (max-width: 770px) {

    #wrapper{padding: 0;}
    #wrapperOuter{ margin-bottom: 0px;}
    header{font-size:80%;display: block;padding-top: 10px;}
    header img {margin: 10px 20px 20px;float:left;}
    header h1{display: block; padding: 10px 0 0 20px;}
    header span{display: block; padding: 0 0 0 20px;margin: 0 0 20px;}
    section#container,section#content{margin-right: 0;}
    section#container{margin-bottom: 0px;}
    section#content {top: -9px;padding-bottom: 150px;}
    .reveal section#content {top: -9px;padding-bottom: 100px;}
    section#content, aside{padding-top:30px;padding-left: 30px !important;padding-right: 30px !important;}
    ul#breadcrumb{padding: 30px 0;}
    aside{clear: both; width: 100%;float: left;padding: 0 !important;margin: -2px 0 0 0;}
    
    #containerWrap.expand{
    position: relative;
    top:0px;
    height: auto !important;
    -webkit-transform: translateY(0px) !important;
    }
    
    section#container section.socialContainer{
    display: none !important;  
    }
    
    section#container footer.socialContainer{
    display: block !important;
    }
    
    .noFeature section#container footer.socialContainer,
    section#container footer.socialContainer{
    margin: 0;
    }
    
    section#content {
    top: -1px !important;
    }
        
    .pull{
    margin-left: -30px;
    margin-right: -30px;
    }
    
    .blog-entry::after {
    margin-left: -30px;
    padding-right: 60px;
    }
}

@media screen and (max-width: 770px) {

    section#content, #asideWrap{padding-top: 20px !important; padding-left: 20px !important;padding-right: 20px !important;}
    aside{padding-top: 20px !important;}
    header img.retina {
    width:87% !important;
    height: auto !important;
    float: left;
    }
    header span {
    white-space: normal;
    display: block;
    float: left;
    clear: both;
    } 
    
    body > .contentBorder{display:none;}

    nav a, #menu{
        text-align: left !important;
    }

    ul>#menu{
        width:100%;
        height:54px;
        line-height: 54px;
        text-align: center;
        position: relative;
        left: 0;
        color: #444;
        font-weight: bolder;
        text-shadow: #FFF 0 1px 0;
        border-bottom: none;
        z-index: 1;
        text-indent: 30px;
        cursor: pointer;
    }
    
    ul>#menu:before{
        content: '+ Menu';
    }
    
    ul ul #menu{display: none;}
    
    ul>#menu.show{
        border-bottom: 1px solid #BBBBBB;
    }
    
    ul>#menu.show:before{
        content: '- Menu'
    }
    
    nav .show{
        display: block;
        width: 100% !important;
    }
    
    nav .expand,
    nav .expand ul{
        top: 0;
        opacity: 1;
        margin-top: 0;
        display: block;
        border-top: 1px solid #CCC;
    }
    
    nav .expand li a{
        padding-left: 45px;
    }
    
    nav .expand li li a{
        padding-left: 60px;
        background-color: rgba(0,0,0,0.2);
    }
    
    nav{
        font-size: 17px;
    }
    
    nav span{
        display: none !important;
    }
    
    nav > ul > li + li{
        display: none;
    }
    
    nav li,
    nav li li{
        width: 100% !important;
        display: block;
        float: left;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #bbb;
        list-style: none;
    }
    
    nav li li{border-top: 1px solid #eee;border-bottom: 1px solid #aaa;}
    nav li li li{border-top: 1px solid #ddd;border-bottom: 1px solid #999;}
    
    nav > ul > li > div.open{
        background: #fff;
    }
    
    nav li li a{
        color: #444;
        text-shadow: #fff 0 1px 0;
        padding: 17px 30px 17px 30px;
        background-color: rgba(0,0,0,0.12);
    }
    
    nav a{
    padding: 17px 30px;
    font-size: 17px !important;
    }
    
    nav ul ul{
        position: relative;
        display: none;
    }
    
    nav > ul > li > div{
        height: auto !important;
    }
    
    nav > ul > li:hover:after {
        display: none;
    }
    
    .dark ul>#menu{
    color: #ccc;
    text-shadow: #000 0 1px 0;
    border-top: 1px solid #303030;
    border-bottom: 1px solid #262626 !important;
    }
    
    .dark nav li{box-shadow: none;}
    
    .dark nav li, 
    .dark nav li li {
    border-top: 1px solid #404040;
    border-bottom: 1px solid #262626;
    border-right: none;
    border-left: none;
    box-shadow: none;
    }
    
    .dark nav ul ul{box-shadow: #262626 0 -1px 0;}
    
    .dark nav li{box-shadow: none !important;}
    
    .dark ul.expand{border-top: none;}
    
    .dark ul.expand ul{border-top: 1px solid #222;}
    
    .dark nav li li li{border-top: 1px solid #393939;border-bottom: 1px solid #222;}
    
    section#content{
    padding-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
    }
    
    .pull{
    margin-left: -20px;
    margin-right: -20px;
    }
    
    .blog-entry:after{
    margin-left: -20px;
    padding-right: 40px;
    }
    
    .blog-entry-date {
    margin-left: -20px;
    padding-left: 20px;
    }
    
    #blog-categories a, 
    #blog-archives a, 
    #blog-rss-feeds a, 
    .blog-tag-cloud a {
    padding: 7px 20px 7px 24px;
    }

    section#container section.socialContainer {left: 20px;}
}

@media screen and (max-width: 320px) {
    header{font-size:50%;}
    header h1{padding: 0 0 0 20px;}
    
    body.photo-background {padding: 0;}
    
    p.photo-title {
    font-size: 1.8em;
    padding: 10px 0 0 !important;
    }
    
    p.photo-caption {
    font-size: 0.9em;
    margin: 3px 0 10px;
    }
    
    p.photo-links {
    margin-bottom: 20px;
    }
    
    img.photo-frame {
    border-radius: 0;
    }
        
    .thumbnail-wrap{
    width:80% !important;
    height: auto !important;
    line-height: 0;
    }
    
    .thumbnail-frame{
        width:100% !important;
    }
    .thumbnail-frame a{
    line-height: 0;
    height: auto;
    }
    
    .thumbnail-frame img{
    width: 100% !important;
    height: auto !important;
    }
}