/* 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 { padding: 0; }
    
    .ResponsiveDesign .PageHeader,
    .ResponsiveDesign .PageHeader .LogoContainer .HeadlineContainer,
    .ResponsiveDesign .ContentContainer,
    .ResponsiveDesign .PageFooterContainer, 
    .ResponsiveDesign .PageHeader .MenuContainer .Navigator {
        min-width: 0;
        width: auto;
    }
    .ResponsiveDesign .PageFooterContainer { padding: 5px; }
    .ResponsiveDesign .LogoContainer { display: block; }
    .ResponsiveDesign .PageHeader .LogoContainer .HeadlineContainer { padding: 40px 5px 5px 5px; height: 135px; overflow: hidden; }
    .ResponsiveDesign .PageHeader .LogoContainer .HeadlineContainer h1 { font-size: 200%; }

    .ResponsiveDesign .MobileMenuContainer { color: white; background: url('images/bg-1px-transparent-50.png'); }


    .ResponsiveDesign ul.DropMenu { color: white; background: url('images/bg-1px-transparent-75.png'); }
    .ResponsiveDesign ul.DropMenu * { background: none; }

    .ResponsiveDesign .MainPage .MainContainer .MainPageInlineContainer { margin-left: 0; }
    .ResponsiveDesign .MainPage .NewsHeader .ParagraphContainer { margin: 5px; width: auto; }
    .ResponsiveDesign .MainPage .NewsItem { width: 300px; margin: 10px 0; padding: 0; }
    .ResponsiveDesign .MainPage .NewsItem .NewsItemTop { width: 300px; background-image: url('images/border-300-top.gif'); }
    .ResponsiveDesign .MainPage .NewsItem .NewsItemMiddle { width: 270px; background-image: url('images/border-300-middle.gif'); }
    .ResponsiveDesign .MainPage .NewsItem .NewsItemBottom { width: 300px; background-image: url('images/border-300-bottom.gif'); }

    .ResponsiveDesign .MainPageInlineContainer .ImageContainer,
    .ResponsiveDesign .MainPageInlineContainer .ParagraphContainer,
    .ResponsiveDesign .TextLayout1 .RightColumn .ImageContainer,
    .ResponsiveDesign .TextLayout1 .RightColumn .ParagraphContainer { background: none; padding-bottom: 5px; }

    .ResponsiveDesign .MainPageInlineContainer .ParagraphContainer div,
    .ResponsiveDesign .MainPageInlineContainer .ImageContainer div,
    .ResponsiveDesign .TextLayout1 .RightColumn .ParagraphContainer div,
    .ResponsiveDesign .TextLayout1 .RightColumn .ImageContainer div { width: auto; height: auto; background: none; }

    .ResponsiveDesign .TextLayout1 .RightColumn { width: 200px; height: auto; background: none; }
    .ResponsiveDesign .TextLayout1 .RightColumn .ParagraphContainer { width: auto; padding: 0; }
        
    .ResponsiveDesign .TextLayout2 .RightColumn { padding-top: 10px; }

    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageCell { width: 150px; padding: 0;}
    .ResponsiveDesign .ImageGallery1 .ImageCell .ParagraphContainer { padding: 5px 15px; }
    
    .ResponsiveDesign .ImageGallery2 .FunctionTable .ImageCell,
    .ResponsiveDesign .ImageGallery2 .FunctionTable .TextCell,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ImageCell,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { width: auto; }
    
    .ResponsiveDesign .ImageGallery2 .FunctionTable .ImageRow,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ImageRow { padding-bottom: 10px; }

    .ResponsiveDesign .ImageGallery2 .FunctionTable .ImageContainer,
    .ResponsiveDesign .ImageGallery2 .FunctionTable .ParagraphContainer,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ImageContainer,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ParagraphContainer,
    .ResponsiveDesign .ImageGallery2 .FunctionTable .ImageContainer div,
    .ResponsiveDesign .ImageGallery2 .FunctionTable .ParagraphContainer div,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ImageContainer div,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .ParagraphContainer div { background: none; margin: 0; padding: 0; width: auto; height: auto; }
    
    .ResponsiveDesign .ImageGallery3 .TextCell { margin-left: 85px; }

    .ResponsiveDesign .Diary .DiaryCommentListItemContainer { width: 270px; background-image: url('images/border-300-middle.gif'); padding: 15px; }
    .ResponsiveDesign .Diary .DiaryCommentListItemContainer .DiaryCommentListItemContainerTop { width: 300px; background-image: url('images/border-300-top.gif'); }
    .ResponsiveDesign .Diary .DiaryCommentListItemContainer .DiaryCommentListItemContainerBottom { width: 300px; background-image: url('images/border-300-bottom.gif'); }
    .ResponsiveDesign .Diary .DiaryCommentForm input.DiaryCommentSubmit { margin-right: 0; }

    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel { color: white; background: url('images/bg-1px-transparent-75.png'); }
    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel * { background: none; }
    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel li a { color: white; padding: 5px 0;}

    .ResponsiveDesign .Guestbook .GuestbookListItemContainer { width: 270px; background-image: url('images/border-300-middle.gif'); padding: 15px; }
    .ResponsiveDesign .Guestbook .GuestbookListItemContainer .GuestbookListItemContainerTop { width: 300px; background-image: url('images/border-300-top.gif'); }
    .ResponsiveDesign .Guestbook .GuestbookListItemContainer .GuestbookListItemContainerBottom { width: 300px; background-image: url('images/border-300-bottom.gif'); }

    .ResponsiveDesign .FileArea .FileListContainer .FileListContainerTop,
    .ResponsiveDesign .FileArea .FileListContainer .FileListContainerMiddle,
    .ResponsiveDesign .FileArea .FileListContainer .FileListContainerBottom { width: auto; background: none; padding: 0; }

    .ResponsiveDesign .Contact .FunctionTable .ImageContainer,
    .ResponsiveDesign .Contact .FunctionTable .ParagraphContainer,
    .ResponsiveDesign .Contact .FunctionTable .ImageContainer div,
    .ResponsiveDesign .Contact .FunctionTable .ParagraphContainer div { background: none; margin: 0; padding: 0; width: auto; height: auto; }
    .ResponsiveDesign .Contact .FunctionTable .ImageContainer,
    .ResponsiveDesign .Contact .FunctionTable .ParagraphContainer { margin-bottom: 5px; }

    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell { width: 150px; padding: 0;}
    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell .ParagraphContainer { padding: 5px 15px; }

    .ResponsiveDesign .ImageGallery .Gallery1 .ImageCell,
    .ResponsiveDesign .ImageGallery .Gallery1 .TextCell,
    .ResponsiveDesign .ImageGallery .Gallery1 .ImageCell,
    .ResponsiveDesign .ImageGallery .Gallery1 .TextCell { width: auto; }
    
    .ResponsiveDesign .ImageGallery .Gallery2 .ImageRow,
    .ResponsiveDesign .ImageGallery .Gallery3 .ImageRow { padding-bottom: 10px; }
    .ResponsiveDesign .ImageGallery .Gallery2 .GalleryTextCell { margin-left: 130px; }
    .ResponsiveDesign .ImageGallery .Gallery3 .GalleryTextCell { margin-left: 60px; }
    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryImageCell { width: 120px; padding-bottom: 10px; }
    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryTextCell { margin-left: 130px; }
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryImageCell { width: 50px; padding-bottom: 10px; }
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryTextCell { margin-left: 60px; }

    .ResponsiveDesign .ImageGallery .Gallery2 .ImageContainer,
    .ResponsiveDesign .ImageGallery .Gallery2 .ParagraphContainer,
    .ResponsiveDesign .ImageGallery .Gallery3 .ImageContainer,
    .ResponsiveDesign .ImageGallery .Gallery3 .ParagraphContainer,
    .ResponsiveDesign .ImageGallery .Gallery4 .ImageContainer,
    .ResponsiveDesign .ImageGallery .Gallery4 .ParagraphContainer,
    .ResponsiveDesign .ImageGallery .Gallery5 .ImageContainer,
    .ResponsiveDesign .ImageGallery .Gallery5 .ParagraphContainer,
    .ResponsiveDesign .ImageGallery .Gallery2 .ImageContainer div,
    .ResponsiveDesign .ImageGallery .Gallery2 .ParagraphContainer div,
    .ResponsiveDesign .ImageGallery .Gallery3 .ImageContainer div,
    .ResponsiveDesign .ImageGallery .Gallery3 .ParagraphContainer div,
    .ResponsiveDesign .ImageGallery .Gallery4 .ImageContainer div,
    .ResponsiveDesign .ImageGallery .Gallery4 .ParagraphContainer div,
    .ResponsiveDesign .ImageGallery .Gallery5 .ImageContainer div,
    .ResponsiveDesign .ImageGallery .Gallery5 .ParagraphContainer div { background: none; margin: 0; padding: 0; width: auto; height: auto; }

    .ResponsiveDesign .ImageGallery .Gallery6 .GalleryTable .GalleryCell div.ImageContainerMiddle { height: auto; }


    .ResponsiveDesign .ImageGallery .Gallery7 .GalleryContainerTop { width: 500px; background-image: url('images/border-500-top.gif'); }
    .ResponsiveDesign .ImageGallery .Gallery7 .GalleryContainerMiddle { width: 470px; background-image: url('images/border-500-middle.gif'); padding: 10px 20px; }
    .ResponsiveDesign .ImageGallery .Gallery7 .GalleryContainerBottom { width: 500px; background-image: url('images/border-500-bottom.gif'); }

    @media only screen and (max-width: 480px) 
    {
        .ResponsiveDesign .ImageGallery .Gallery7 .GalleryContainerTop { width: 300px; background-image: url('images/border-300-top.gif'); }
        .ResponsiveDesign .ImageGallery .Gallery7 .GalleryContainerMiddle { width: 270px; background-image: url('images/border-300-middle.gif'); padding: 10px 20px; }
        .ResponsiveDesign .ImageGallery .Gallery7 .GalleryContainerBottom { width: 300px; background-image: url('images/border-300-bottom.gif'); }
    }

    .ResponsiveDesign .ImageGallery .Gallery7 .GalleryCell { margin: 4px; }
}