/* 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) 
{ 

    .ResponsiveDesign .BodyContainer,
    .ResponsiveDesign .BackgroundHeader,
    .ResponsiveDesign .ContentTable .Navigator,
    .ResponsiveDesign .ContentTable .NavigatorTop,
    .ResponsiveDesign .ContentTable .NavigatorMiddle,
    .ResponsiveDesign .ContentTable .NavigatorBottom,
    .ResponsiveDesign .HeaderField,
    .ResponsiveDesign .PageContainer .PageContainerMiddle {
        position: static;
        min-height: initial;
        background: none;
        padding: 0;
        margin: 0;
        width: auto;
        height: auto;
        border: 0;
    }

    .ResponsiveDesign .MobileMenuContainer { background: url('images/bg-dark-50.png'); }
    .ResponsiveDesign .HeaderField { background: url('images/bg-light-50.png'); padding: 10px 5px; min-height: 100px;}

    .ResponsiveDesign .Diary .DiaryList .GroupByMonth .LevelOneDate,
    .ResponsiveDesign .Diary .DiaryList .GroupByYear .LevelOneDate,
    .ResponsiveDesign .Diary .DiaryList .GroupByYear .LevelTwoDate,
    .ResponsiveDesign ul.DropMenu li a.expandable,
    .ResponsiveDesign ul.DropMenu li a.parent { background-image: url('/resources/functions/images/downarrow-black.png'); }

    .ResponsiveDesign ul.DropMenu { width: 100%; }
    .ResponsiveDesign ul.DropMenu a:hover { background: none; }
    .ResponsiveDesign ul.DropMenu * { background: none; }
    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel * { color: black; }


    .ResponsiveDesign .PageContainer .PageContainerMiddle { background-color: white; }
    .ResponsiveDesign .PageContainerTop { background-position: top center; padding: 0; height: 20px; }
    .ResponsiveDesign .PageContainer .PageContainerBottom { background-position: center -30px; padding: 0; height: 20px; }

    .ResponsiveDesign .MainPage .NewsHeader { margin-top: 10px; }

    .ResponsiveDesign .TextLayout1 .RightColumn .ParagraphContainer * { font-size: 100%; }

    .ResponsiveDesign .TextLayout2 .RightColumn { padding-top: 15px; }

    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageCell { width: 140px; padding: 0; margin: 3px; }

    .ResponsiveDesign .ImageGallery2 .FunctionTable .TextCell,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { min-height: initial; width: auto; }

    .ResponsiveDesign .Contact .RightColumn .ParagraphContainer * { font-size: 100%; }

    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell { width: 130px; padding: 5px; }

    .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%; }

}