/* 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 .PageContainer .PageLogo,
    .PageContainer .ThemeTopLeft,
    .PageContainer .ThemeTopRight,
    .PageContainer .ThemeBottomLeft,
    .PageContainer .ThemeBottomRight { display: none; }
    .ResponsiveDesign .PageContainer .PageTop,
    .ResponsiveDesign .PageContainer .PageHeader,
    .ResponsiveDesign .PageContainer .ContentTable .NavigatorContainer .Navigator {
        position: static;
        min-height: initial;
        background: none;
        padding: 0;
        margin: 0;
        width: auto;
        height: auto;
        border: 0;
        float: none;
    }
    .ResponsiveDesign .PageContainer .PageHeader { padding: 10px 5px; text-align: left; }
    .ResponsiveDesign .PageContainer .PageHeader h1 { font-size: 20pt; }
    .ResponsiveDesign .PageContainer .PageTop { background: url('images/paper-bg-middle.png') repeat-y; margin-top: 5px; border-top: 1px solid #ddd; }
    .ResponsiveDesign .PageContainer .ContentTable { width: auto; }
    .ResponsiveDesign .PageContainer .PageMiddle { padding: 0; }
    .ResponsiveDesign .PageContainer .ContentTable .ContentContainer { padding: 0; }
    .ResponsiveDesign .PageFooterBottom { width: auto; }
    .ResponsiveDesign .PageContainer .PageBottom { background-position: left top;}

    .ResponsiveDesign ul.DropMenu * { background: none; }
    .ResponsiveDesign ul.DropMenu { background: url('images/paper-bg-middle.png') repeat-y; width: 100%; }
    .ResponsiveDesign ul.DropMenu a.toplevel { border-bottom: 2px solid #ddd; }

    .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-gray.png'); }

    .ResponsiveDesign .MainPage .MainContainer .MainPageInlineContainer .ParagraphContainer { padding-bottom: 20px; }
    .ResponsiveDesign .MainPage .NewsContainer { background: none; }
    .ResponsiveDesign .MainPage .NewsHeader { margin-top: 10px; }
    .ResponsiveDesign .MainPage .NewsContainer .NewsHeader h1 { font-size: 18pt; }

    .ResponsiveDesign .TextLayout1 .RightColumn { width: 200px; }
    .ResponsiveDesign .TextLayout1 .RightColumn .ImageContainer { background: none; padding: 0; border: 0; }
    .ResponsiveDesign .TextLayout1 .RightColumn .ParagraphContainer * { font-size: 9pt; }

    .ResponsiveDesign .TextLayout2 .RightColumn { padding-top: 15px; }
    .ResponsiveDesign .TextLayout2 .InlineImageContainer { background: none; padding: 0; border: 0; margin: 0; }
    .ResponsiveDesign .TextLayout2 .InlineImageContainer .ImageContainer,
    .ResponsiveDesign .TextLayout2 .InlineImageContainer .ParagraphContainer { margin: 0;}
    .ResponsiveDesign .TextLayout2 .InlineImageContainer .ParagraphContainer * { font-size: 9pt; }

    .ResponsiveDesign .ImageGallery1 .FunctionTable .ImageCell { width: 150px; }
    .ResponsiveDesign .ImageGallery1 .ImageCell .ImageContainer { background: none; padding: 0; border: 0; margin: 0; }

    .ResponsiveDesign .ImageGallery2 .FunctionTable .TextCell,
    .ResponsiveDesign .ImageGallery3 .FunctionTable .TextCell { width: auto; padding-left: 0; }
    .ResponsiveDesign .ImageGallery2 .ImageCell .ImageContainer,
    .ResponsiveDesign .ImageGallery3 .ImageCell .ImageContainer { background: none; padding: 0; border: 0; margin: 0; margin-bottom: 10px; }

    .ResponsiveDesign .Diary .DiaryList ul.FirstLevel { background: url('images/paper-bg-middle.png') repeat-y; width: 100%; border-bottom: 2px solid #ddd; }

    .ResponsiveDesign .FileArea .FunctionTable { background: none; padding: 0; border: 0; margin: 0; margin-bottom: 10px; }

    .ResponsiveDesign .Contact .RightColumn .ImageContainer { background: none; padding: 0; border: 0; margin: 0; margin-bottom: 10px; }

    .ResponsiveDesign .Gallery1 .GalleryTable div.ImageContainer,
    .ResponsiveDesign .Gallery2 .GalleryTable div.ImageContainer,
    .ResponsiveDesign .Gallery3 .GalleryTable div.ImageContainer,
    .ResponsiveDesign .Gallery4 .GalleryTable div.ImageContainer,
    .ResponsiveDesign .Gallery5 .GalleryTable div.ImageContainer { background: none; padding: 0; border: 0; margin: 0; margin-bottom: 10px; }
    
    .ResponsiveDesign .Gallery1 .GalleryTable div.ParagraphContainer,
    .ResponsiveDesign .Gallery2 .GalleryTable div.ParagraphContainer,
    .ResponsiveDesign .Gallery3 .GalleryTable div.ParagraphContainer,
    .ResponsiveDesign .Gallery4 .GalleryTable div.ParagraphContainer,
    .ResponsiveDesign .Gallery5 .GalleryTable div.ParagraphContainer { position: static; padding: 0; }

    .ResponsiveDesign .ImageGallery .Gallery2 .GalleryTextCell { margin-left: 130px; }
    .ResponsiveDesign .ImageGallery .Gallery3 .GalleryTextCell { margin-left: 60px; }

    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryImageCell { width: 120px; }
    .ResponsiveDesign .ImageGallery .Gallery4 .GalleryTextCell .ParagraphContainer { padding: 0; }

    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryImageCell { width: 50px; }
    .ResponsiveDesign .ImageGallery .Gallery5 .GalleryTextCell .ParagraphContainer { padding: 0; }

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