/* 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 .Container, 
    .ResponsiveDesign .PageNavigator,
    .ResponsiveDesign .PageHeader .HeaderField,
    .ResponsiveDesign .PageHeader .LogoField {
        position: static;
        width: auto;
        margin: 0;
        height: auto;
        min-height: initial;
        background: none;
    }
    .ResponsiveDesign .PageHeader {
        position: static;
        width: auto;
        margin: 0;
        height: auto;
        min-height: initial;
    }
    .ResponsiveDesign .PageHeader .LogoField { display: none; }
    .ResponsiveDesign .PageHeader .HeaderField h1 { padding: 5px; margin-bottom: 10px; }
    .ResponsiveDesign .Container { background-color: white; margin: 0 5px; padding: 5px; } 
    
    .ResponsiveDesign .PageHeaderContainer { padding-top: 0; }
    .ResponsiveDesign .PageContent { padding: 0px; padding-top: 10px; }
    
    .ResponsiveDesign .PageFooter { background-color: #efefef; padding: 5px;}
    .ResponsiveDesign .PageFooter .CopyrightText { background: none; font-size: 10pt; }

    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel *,
    .ResponsiveDesign .MobileMenuContainer ul.DropMenu li a { color: white; text-align: left; }
    .ResponsiveDesign .MobileMenuContainer ul.DropMenu ul,
    .ResponsiveDesign .MobileMenuContainer ul.DropMenu a:hover,
    .ResponsiveDesign .MobileMenuContainer ul.DropMenu li:hover { background-color: transparent; }

    .ResponsiveDesign .MainPage,
    .ResponsiveDesign .EmptyPage,
    .ResponsiveDesign .TextLayout1,
    .ResponsiveDesign .TextLayout2,
    .ResponsiveDesign .ImageGallery1,
    .ResponsiveDesign .ImageGallery2,
    .ResponsiveDesign .ImageGallery3,
    .ResponsiveDesign .ImageGallery,
    .ResponsiveDesign .FileArea,
    .ResponsiveDesign .Diary,
    .ResponsiveDesign .Guestbook,
    .ResponsiveDesign .Contact { margin: 0; padding: 0; padding-bottom: 10px; }

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

    .ResponsiveDesign .TextLayout1 .RightColumn { padding: 0; }
    .ResponsiveDesign .TextLayout1 .RightColumn .ParagraphContainer { font-size: 10pt;}

    .ResponsiveDesign .TextLayout2 .InlineImageContainer .ParagraphContainer { font-size: 9pt;}

    .ResponsiveDesign .ImageGallery1 .BodyTextContainer,
    .ResponsiveDesign .ImageGallery2 .BodyTextContainer,
    .ResponsiveDesign .ImageGallery3 .BodyTextContainer,
    .ResponsiveDesign .Guestbook .BodyTextContainer,
    .ResponsiveDesign .FileArea .BodyTextContainer { margin: 0; }

    .ResponsiveDesign .ImageGallery1 .FunctionTable .ParagraphContainer,
    .ResponsiveDesign .ImageGallery2 .FunctionTable .ParagraphContainer,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ParagraphContainer { font-size: 9pt; }
    
    .ResponsiveDesign .ImageGallery1 .FunctionTable { width: auto; max-width: 480px; margin: 20px auto; }
    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageCell { width: 140px; }
    .ResponsiveDesign .ImageGallery1 .FunctionTable .ParagraphContainer  { padding: 5px; }
    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageCell { border: 5px solid white; }

    .ResponsiveDesign .ImageGallery2 .FunctionTable .ImageCell,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ImageCell { border: 0; margin-bottom: 10px; }

    .ResponsiveDesign .ImageGallery2 .FunctionTable .TextCell,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { width: auto; padding: 5px; border: 0; }
    .ResponsiveDesign .ImageGallery2 .FunctionTable .TextCell { margin-left: 135px; margin-bottom: 10px; }
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { margin-left: 65px; margin-bottom: 10px; }
    
    .ResponsiveDesign .TextLayout1 .RightColumn .ParagraphContainer { font-size: 10pt; }

    .ResponsiveDesign .Contact .RightColumn .ParagraphContainer { font-size: 11pt; }
    .ResponsiveDesign .Contact .LeftColumn { margin-top: 15px; }

    .ResponsiveDesign .Diary .RightColumn { border: 0; }

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

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

    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryImagesRow .GalleryTextCell { margin-left: 145px; }
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryImagesRow .GalleryTextCell { margin-left: 75px; }

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