/* tablets and desktop
@media only screen and (min-width: 768px) {
}
*/

/* phones
@media only screen and (max-width: 768px) {
}
*/

/* portrait phones 
@media only screen and (max-width: 768px) and (orientation: portrait) {
    
}
*/

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

    body.ResponsiveDesign { background: none; height: auto; }

    .ResponsiveDesign .MobileMenuContainer { background: #373737 url('images/footer-bg.gif') repeat-x top; }
    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel,
    .ResponsiveDesign .MobileMenuContainer ul.DropMenu { background: #373737; color: white; }
    .ResponsiveDesign .MobileMenuContainer ul.DropMenu ul { background: none; }
    .ResponsiveDesign .MobileMenuContainer ul.DropMenu a:hover { background-color: transparent; text-decoration: underline; }

    .ResponsiveDesign .ResponsiveDesign,
    .ResponsiveDesign .ContentHeader,
    .ResponsiveDesign .ContentBody,
    .ResponsiveDesign .Navigator,
    .ResponsiveDesign .NavigatorContainer,
    .ResponsiveDesign .PageFooter {
        width: auto;
        min-height: initial;
        margin: 0;
        padding: 0;
        background: none;
        border: 0;
    }
    .ResponsiveDesign .ContentHeader .LogoField { display: none; }

    .ResponsiveDesign .ContentHeader,
    .ResponsiveDesign .ContentHeader .HeaderField { 
        position: static;
        height: auto;
        overflow: initial;
    }
    .ResponsiveDesign .ContentHeader .HeaderField { 
        padding: 10px 5px; 
    }
    .ResponsiveDesign .ContentHeader .HeaderField h1 {
        position: static;
        padding: 0;
        color: white;
        font-size: 24pt;
    }

    .ResponsiveDesign .ContentBody { padding-bottom: 10px; }
    
    .ResponsiveDesign .PageFooterContainer {
        position: static;
        padding: 5px;
        width: auto;
        height: auto;
        background-color: #373737;
        background-position: top left;
        color: white;
    }
    .ResponsiveDesign .PageFooterContainer .dinStudioLink { font-size: 11px; }

    .ResponsiveDesign .MainPageInlineContainer .ParagraphContainer { padding: 5px; margin-top: 5px; }
    .ResponsiveDesign .MainPage .NewsContainer .NewsItem { padding: 5px; }
    
    .ResponsiveDesign .TextLayout1 .RightColumn .ParagraphContainer * { font-size: 100%; }
    
    .ResponsiveDesign .TextLayout2 .RightColumn { padding-top: 15px; }

    .ResponsiveDesign .ImageGallery1 .FunctionTable { width: auto; max-width: 480px; margin: 20px auto; }
    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageCell { width: 140px;}

    .ResponsiveDesign .ImageGallery2 .FunctionTable .TextCell,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { width: auto; }
    
    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel { background: #373737; }
    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel * { color: white; }
    .ResponsiveDesign .Diary .LeftColumn .DiaryListItem a,
    .ResponsiveDesign .Diary .DiaryList .GroupByDay a,
    .ResponsiveDesign .Diary .DiaryList .GroupByMonth li.FirstLevelItem,
    .ResponsiveDesign .Diary .DiaryList .GroupByYear li.FirstLevelItem { background: none; border: 0; }

    .ResponsiveDesign .Contact .RightColumn .ParagraphContainer { margin-bottom: 10px; }
    .ResponsiveDesign .Contact .RightColumn .ParagraphContainer * { font-size: 100%; }

    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell { margin-left: 10px; width: 120px; margin-bottom: 10px; }
    .ResponsiveDesign .ImageGallery .Gallery1 .ParagraphContainer { font-size: 90%; }

    .ResponsiveDesign .ImageGallery .Gallery2 .ParagraphContainer,
    .ResponsiveDesign .ImageGallery .Gallery3 .ParagraphContainer,
    .ResponsiveDesign .ImageGallery .Gallery4 .ParagraphContainer,
    .ResponsiveDesign .ImageGallery .Gallery5 .ParagraphContainer { padding: 5px; font-size: 90%; }

    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryImageCell,
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryImageCell { margin-bottom: 10px; }

    .ResponsiveDesign .ImageGallery .Slide1 .ImageContainer img,
    .ResponsiveDesign .ImageGallery .Slide2 .ImageContainer img,
    .ResponsiveDesign .ImageGallery .Slide3 .ImageContainer img { width: 100%; border: 0; }

}