/* 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 { height: auto; }

    .ResponsiveDesign .ContentHeaderField .LogoField { display: none; }

    .ResponsiveDesign .BodyContainer,
    .ResponsiveDesign .ContentHeaderField .HeaderField,
    .ResponsiveDesign .PageFooterBottom {
        position: static;
        width: auto;
        height: auto;
        min-height: initial;
        margin: 0;
        padding: 0;
    }
    .ResponsiveDesign .ContentHeaderField { padding: 10px 5px; height: auto; overflow: auto; }
    .ResponsiveDesign .ContentHeaderField .HeaderField h1 { font-size: 22pt; padding: 5px 0; }

    .ResponsiveDesign .ContentContainer {
        background-position: top center;
        padding-top: 15px;
        padding-bottom: 10px;
        border-radius: 15px 15px 0 0;
        -moz-border-radius: 15px 15px 0 0;
        -webkit-border-radius: 15px 15px 0 0;
    }

    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel *,
    .ResponsiveDesign .MobileMenuContainer ul.DropMenu li a { color: white; text-align: left; }
    .ResponsiveDesign .MobileMenuContainer ul.DropMenu a.toplevel:hover,
    .ResponsiveDesign .MobileMenuContainer ul.DropMenu li.sfhover,
    .ResponsiveDesign .MobileMenuContainer ul.DropMenu ul { background: none; }
    .ResponsiveDesign .NavigatorContainer { background-position: top center; }

    .ResponsiveDesign .MainPage .NewsContainer { background: none; }
    .ResponsiveDesign .MainPage .NewsContainer .NewsHeader { margin-top: 10px; }
    .ResponsiveDesign .MainPage .NewsContainer .NewsHeader .ParagraphContainer,
    .ResponsiveDesign .MainPage .NewsContainer .NewsItem { margin-left: 0; width: auto; margin-bottom: 10px; }
    .ResponsiveDesign .MainPage .NewsContainer .NewsHeader h1 { padding: 0; }

    .ResponsiveDesign .TextLayout1 .LeftColumn,
    .ResponsiveDesign .TextLayout1 .RightColumn,
    .ResponsiveDesign .TextLayout2 .LeftColumn,
    .ResponsiveDesign .TextLayout2 .RightColumn { background: none; padding: 0; }
    
    .ResponsiveDesign .TextLayout1 .RightColumn { padding-left: 5px; }
    .ResponsiveDesign .TextLayout1 .RightColumn .ParagraphContainer * { font-size: 9pt; }

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

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

    .ResponsiveDesign .ImageGallery2 .ImageContainer,
    .ResponsiveDesign .ImageGallery3 .ImageContainer { background: none; padding: 0; }
    .ResponsiveDesign .ImageGallery2 .ParagraphContainer,
    .ResponsiveDesign .ImageGallery3 .ParagraphContainer { background: none; padding: 0; width: auto; }
    
    .ResponsiveDesign .Diary .RightColumn { background: none; padding: 0; }
    .ResponsiveDesign .Diary .DiaryCommentListItemContainer {
        background-position: top center;
        border-radius: 15px 15px 0 0;
        -moz-border-radius: 15px 15px 0 0;
        -webkit-border-radius: 15px 15px 0 0;
        width: auto;
        max-width: 380px;
    }
    .ResponsiveDesign .Diary .DiaryCommentListContainer .CommentCountContainer h2 { padding: 0; }
    .ResponsiveDesign .Diary .DiaryList .GroupByDay li.FirstLevelItem,
    .ResponsiveDesign .Diary .DiaryList .GroupByMonth li.FirstLevelItem,
    .ResponsiveDesign .Diary .DiaryList .GroupByYear li.FirstLevelItem { background: none; padding: 0; }

    .ResponsiveDesign .Guestbook .GuestbookForm { background: none; padding: 0; }
    .ResponsiveDesign .Guestbook .GuestbookList h2 {
        background-position: top center;
        border-radius: 15px 15px 0 0;
        -moz-border-radius: 15px 15px 0 0;
        -webkit-border-radius: 15px 15px 0 0;
        width: auto;
        max-width: 380px;
    }
    .ResponsiveDesign .Guestbook .GuestbookList .GuestbookListItem { width: auto; }

    .ResponsiveDesign .FileArea .FunctionTable { background: none; }

    .ResponsiveDesign .Contact .LeftColumn,
    .ResponsiveDesign .Contact .RightColumn { background: none; padding: 0; }
    .ResponsiveDesign .Contact .RightColumn .ParagraphContainer * { font-size: 9pt; }
    .ResponsiveDesign .Contact .RightColumn { margin-bottom: 10px; }

    .ResponsiveDesign .ImageGallery .Gallery1,
    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryTable,
    .ResponsiveDesign .ImageGallery .Gallery2,
    .ResponsiveDesign .ImageGallery .Gallery2 .GalleryTable,
    .ResponsiveDesign .ImageGallery .Gallery3,
    .ResponsiveDesign .ImageGallery .Gallery3 .GalleryTable,
    .ResponsiveDesign .ImageGallery .Gallery4,
    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryTable,
    .ResponsiveDesign .ImageGallery .Gallery5,
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryTable { width: auto !important; }
    
    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell { background: none; padding: 0; }

    .ResponsiveDesign .ImageGallery .Gallery2 .GalleryImageCell, 
    .ResponsiveDesign .ImageGallery .Gallery2 .GalleryTextCell, 
    .ResponsiveDesign .ImageGallery .Gallery3 .GalleryImageCell, 
    .ResponsiveDesign .ImageGallery .Gallery3 .GalleryTextCell, 
    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryImageCell, 
    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryTextCell, 
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryImageCell, 
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryTextCell { background: none; padding: 0 !important; }
    
    .ResponsiveDesign .ImageGallery .Gallery2 .GalleryImageCell { width: 120px; }
    .ResponsiveDesign .ImageGallery .Gallery2 .GalleryTextCell { width: auto; margin-left: 130px; }

    .ResponsiveDesign .ImageGallery .Gallery3 .GalleryImageCell { width: 50px; }
    .ResponsiveDesign .ImageGallery .Gallery3 .GalleryTextCell { width: auto; margin-left: 60px; }

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

}