/* 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 div.BackgroundContainer,
    .ResponsiveDesign div.PageContainer, 
    .ResponsiveDesign div.PageContainer div.PageHeader,
    .ResponsiveDesign div.PageContainer div.PageHeader div.LogoContainer,
    .ResponsiveDesign div.PageContainer div.PageHeader div.HeaderContainer,
    .ResponsiveDesign div.PageContainer div.PageHeader div.PageHeaderOverlay,
    .ResponsiveDesign div.PageContainer div.MenuPadding,
    .ResponsiveDesign div.PageContainer div.PagePadding,
    .ResponsiveDesign div.PageContainer div.NavigatorContainer,
    .ResponsiveDesign div.PageContainer div.ContentContainer,
    .ResponsiveDesign div.PageContainer div.PageFooterContainer,
    .ResponsiveDesign div.PageContainer div.dinStudioLink { position: static; margin: 0; padding: 0; width: auto; min-height: initial; height: auto; }

    .ResponsiveDesign ul.DropMenu,
    .ResponsiveDesign div.PageContainer div.ContentContainer { border-left: 0;	border-right: 0; }

    .ResponsiveDesign div.PageContainer div.CopyrightText { padding: 15px 5px; font-size: 90%; }

    .ResponsiveDesign div.PageContainer div.dinStudioLink { padding: 5px 0; font-size: 80%; }

    .ResponsiveDesign ul.DropMenu { 
        border-left: 0;	
        border-right: 0; 
        width: auto;
    }
    .ResponsiveDesign ul.DropMenu a.toplevel:hover { border: 0; padding: 10px 5px; }

    .ResponsiveDesign ul.DropMenu li,
    .ResponsiveDesign ul.DropMenu li li,
    .ResponsiveDesign ul.DropMenu li li li,
    .ResponsiveDesign ul.DropMenu li a,
    .ResponsiveDesign ul.DropMenu li li a,
    .ResponsiveDesign ul.DropMenu li li li a { background: none; }

    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel *,
    .ResponsiveDesign ul.DropMenu { color: white; }

    .ResponsiveDesign .MainPage,
    .ResponsiveDesign .EmptyPage,
    .ResponsiveDesign .TextLayout1,
    .ResponsiveDesign .TextLayout2,
    .ResponsiveDesign .ImageGallery1,
    .ResponsiveDesign .ImageGallery2,
    .ResponsiveDesign .ImageGallery3,
    .ResponsiveDesign .ImageGallery,
    .ResponsiveDesign .FileArea,
    .ResponsiveDesign .Diary,
    .ResponsiveDesign .Guestbook,
    .ResponsiveDesign .Contact { padding: 20px 5px; }


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

    .ResponsiveDesign .ImageGallery1 .FunctionTable { width: auto; max-width: 480px; margin: 20px auto; }
    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageCell { width: 140px; padding: 0 10px; }
    .ResponsiveDesign .ImageGallery1 .FunctionTable .ParagraphContainer  { padding: 0; }
    .ResponsiveDesign .ImageGallery2 .FunctionTable .TextCell,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { width: auto; }
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { margin-left: 60px;}
    
    .ResponsiveDesign .Diary .DiaryCommentListContainer .CommentCountContainer { width: auto; }
    
    .ResponsiveDesign .Diary .DiaryCommentListItemContainer {
        width: auto;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        padding: 10px 0;
    }
    .ResponsiveDesign .Diary .DiaryCommentListItemContainer .DiaryCommentListItemContainerTop,
    .ResponsiveDesign .Diary .DiaryCommentListItemContainer .DiaryCommentListItemContainerBottom { display: none; }
    
    .ResponsiveDesign .Guestbook .GuestBookEntryListContainer { padding-top: 0; }
    .ResponsiveDesign .Guestbook .GuestBookEntryListContainer .GuestbookListItemContainer {
        width: auto;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        background-image: none;
        padding: 10px; 
    }
    .ResponsiveDesign .Guestbook .GuestBookEntryListContainer .GuestBookEntry,
    .ResponsiveDesign .Guestbook .GuestBookEntryListContainer .GuestbookListItem { background: none; width: auto; }
    
    .ResponsiveDesign .Contact .RightColumn .ParagraphContainer { font-size: 11pt; }
    

    .ResponsiveDesign .Guestbook .GuestbookForm .GuestBookName,
    .ResponsiveDesign .Guestbook .GuestbookForm .GuestBookEmail,
    .ResponsiveDesign .Guestbook .GuestbookForm .GuestBookHomePage,
    .ResponsiveDesign .Guestbook .GuestbookForm .GuestBookMessage,
    .ResponsiveDesign .Contact .ContactForm .ContactFormName,
    .ResponsiveDesign .Contact .ContactForm .ContactFormEmail,
    .ResponsiveDesign .Contact .ContactForm .ContactFormField,
    .ResponsiveDesign .Contact .ContactForm .ContactFormHomePage,
    .ResponsiveDesign .Contact .ContactForm .ContactFormMessage {
        background: none;
        width: auto;
        height: auto;
    }
    
    .ResponsiveDesign .Diary .DiaryCommentFormTable input,
    .ResponsiveDesign .Diary .DiaryCommentFormTable textarea,
    .ResponsiveDesign .Guestbook .GuestbookForm .GuestBookName input, 
    .ResponsiveDesign .Guestbook .GuestbookForm .GuestBookEmail input, 
    .ResponsiveDesign .Guestbook .GuestbookForm .GuestBookHomePage input,
    .ResponsiveDesign .Guestbook .GuestbookForm .GuestBookMessage textarea,
    .ResponsiveDesign .Contact .ContactForm .ContactFormName input,
    .ResponsiveDesign .Contact .ContactForm .ContactFormEmail input,
    .ResponsiveDesign .Contact .ContactForm .ContactFormField input,
    .ResponsiveDesign .Contact .ContactForm .ContactFormHomePage input, 
    .ResponsiveDesign .Contact .ContactForm .ContactFormMessage textarea {
        background: none;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        margin: 0;
        height: 25px;
    }
    .ResponsiveDesign .Guestbook .GuestbookForm .GuestBookMessage textarea { height: 150px; }
    .ResponsiveDesign .Contact .ContactForm .ContactFormMessage textarea { height: 200px; }
    .ResponsiveDesign .Diary .DiaryCommentFormTable textarea { height: 100px; }


    /*
    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell {
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        padding: 10px;
    }

    .ResponsiveDesign .ImageGallery .GalleryTable .ImageContainer div.ImageContainerTop,
    .ResponsiveDesign .ImageGallery .GalleryTable .ImageContainer div.ImageContainerBottom,
    .ResponsiveDesign .ImageGallery .GalleryTable .ParagraphContainer div.ParagraphContainerTop,
    .ResponsiveDesign .ImageGallery .GalleryTable .ParagraphContainer div.ParagraphContainerBottom {
        background: none;
        height: auto;
        width: auto;
    }

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

    .ResponsiveDesign .ImageGallery .Gallery4 .ImageContainer { margin-bottom: 10px; }
    .ResponsiveDesign .ImageGallery .Gallery5 .ImageContainer { margin-bottom: 10px; }
    */

    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell { margin: 0 3px; }
    .ResponsiveDesign .ImageGallery .Gallery1 .GalleryCell .ParagraphContainer { padding: 0; }
    

    .ResponsiveDesign .ImageGallery .Gallery2 .ParagraphContainer div.ParagraphContainerTop,
    .ResponsiveDesign .ImageGallery .Gallery2 .ParagraphContainer div.ParagraphContainerMiddle,
    .ResponsiveDesign .ImageGallery .Gallery2 .ParagraphContainer div.ParagraphContainerBottom, 
    .ResponsiveDesign .ImageGallery .Gallery3 .ParagraphContainer div.ParagraphContainerTop,
    .ResponsiveDesign .ImageGallery .Gallery3 .ParagraphContainer div.ParagraphContainerMiddle,
    .ResponsiveDesign .ImageGallery .Gallery3 .ParagraphContainer div.ParagraphContainerBottom, 
    .ResponsiveDesign .ImageGallery .Gallery4 .ParagraphContainer div.ParagraphContainerTop,
    .ResponsiveDesign .ImageGallery .Gallery4 .ParagraphContainer div.ParagraphContainerMiddle,
    .ResponsiveDesign .ImageGallery .Gallery4 .ParagraphContainer div.ParagraphContainerBottom, 
    .ResponsiveDesign .ImageGallery .Gallery5 .ParagraphContainer div.ParagraphContainerTop,
    .ResponsiveDesign .ImageGallery .Gallery5 .ParagraphContainer div.ParagraphContainerMiddle,
    .ResponsiveDesign .ImageGallery .Gallery5 .ParagraphContainer div.ParagraphContainerBottom {
        background: none;
        height: auto;
        width: auto;
        margin: 0;
        padding: 0;
    }
    .ResponsiveDesign .ImageGallery .Gallery2 .ParagraphContainer,
    .ResponsiveDesign .ImageGallery .Gallery3 .ParagraphContainer,
    .ResponsiveDesign .ImageGallery .Gallery4 .ParagraphContainer,
    .ResponsiveDesign .ImageGallery .Gallery5 .ParagraphContainer {
        width: auto;
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        padding: 5px;
    }

    .ResponsiveDesign .ImageGallery .Gallery2 .GalleryTextCell { margin-left: 145px; }
    .ResponsiveDesign .ImageGallery .Gallery3 .GalleryTextCell { margin-left: 75px; }
    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryImagesRow .GalleryTextCell { margin-left: 145px; margin-bottom: 5px; }
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryImagesRow .GalleryTextCell { margin-left: 75px; margin-bottom: 5px; }
    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryImagesRow .GalleryImageCell,
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryImagesRow .GalleryImageCell { margin-bottom: 5px; }

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

}