/* Move down content because we have a fixed navbar that is 50px tall */
body {
    position: relative;
    margin: 0;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 5px;
    padding-right: 5px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width:100%;
}


/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 0px;
    }

    .body-content {
        padding: 0;
    }


    .myBtnGreen {
        background: linear-gradient(to bottom, #006666 21%, #669999 100%);
        border: none;
        color: white;
        height: 40px;
        padding: 8px 12px 8px 10px;
        text-align: right;
        text-decoration: none;
        border-radius: 4px;
        white-space: nowrap;
        border-radius: 5px 15px;
        position: relative;
        z-index: 10;
    }

    .myHeader {
        background: linear-gradient(to top, #003366 -2%, #ffffff 102%);
        border: none;
        color: white;
        height: 40px;
        padding: 8px 12px 8px 10px;
        text-align: right;
        text-decoration: none;
        white-space: nowrap;
        border-radius: 4px;
        white-space: nowrap;
        border-radius: 5px 15px;
        position: relative;
        z-index: 10;
    }

    .myBtnBlueInfo {
        background-color: lightblue;
        border: none;
        color: blue;
        height: 32px;
        padding: 8px 12px 8px 10px;
        text-align: right;
        text-decoration: none;
        border-radius: 4px;
        white-space: nowrap;
        border-radius: 5px 15px;
    }

    .myBtnOrange {
        background: linear-gradient(to top, #ff6600 0%, #ffcc00 100%);
        border: none;
        color: white;
        height: 34px;
        padding: 8px 12px 8px 10px;
        text-align: right;
        text-decoration: none;
        border-radius: 4px;
        white-space: nowrap;
        border-radius: 5px 15px;
    }

    .myBtnBlue {
        background: linear-gradient(to top, #003366 0%, #ffffff 110%);
        border: none;
        color: white;
        height: 34px;
        padding: 8px 12px 8px 10px;
        text-align: right;
        text-decoration: none;
        border-radius: 4px;
        white-space: nowrap;
        border-radius: 5px 15px;
    }

    .myBtnGreen2 {
        background: linear-gradient(to top, #336600 0%, #ffffff 110%);
        border: none;
        color: white;
        height: 34px;
        padding: 8px 12px 8px 10px;
        text-align: right;
        text-decoration: none;
        border-radius: 4px;
        white-space: nowrap;
        border-radius: 5px 15px;
    }

    .myBtnPurple {
        background: linear-gradient(to top, #9900ff 0%, #ffccff 100%);
        border: none;
        color: white;
        height: 34px;
        padding: 8px 12px 8px 10px;
        text-align: right;
        text-decoration: none;
        border-radius: 4px;
        white-space: nowrap;
        border-radius: 5px 15px;
    }

    .myHeader:hover {
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
        font-style: italic;
        font: bolder;
        color: yellow;
        border-radius: 15px 5px;
    }

    .myBtnBlue:hover {
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
        font-style: italic;
        font: bolder;
        color: yellow;
        border-radius: 15px 5px;
    }

    .myBtnBlueInfo:hover {
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
        font-style: italic;
        font: bolder;
        color: white;
        border-radius: 15px 5px;
    }

    .myBtnGreen :hover {
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
        font-style: italic;
        font: bolder;
        color: yellow;
        border-radius: 15px 5px;
    }

    .myBtnGreen2 :hover {
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
        font-style: italic;
        font: bolder;
        color: yellow;
        border-radius: 15px 5px;
    }

    .myBtnOrange:hover {
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
        font-style: italic;
        font: bolder;
        color: yellow;
        border-radius: 15px 5px;
    }

    .myBtnPurple :hover {
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
        font-style: italic;
        font: bolder;
        color: yellow;
        border-radius: 15px 5px;
    }

    /* Dropdown Button */
    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 16px;
        font-size: 16px;
        border: none;
    }

    /* The container <div> - needed to position the dropdown content */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    /* Dropdown Content (Hidden by Default) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f1f1f1;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

        /* Links inside the dropdown */
        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

            /* Change color of dropdown links on hover */
            .dropdown-content a:hover {
                background-color: #ddd;
            }

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* Change the background color of the dropdown button when the dropdown content is shown */
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }

    .blink {
        animation: blinker 1s step-start infinite;
        background-color: cornflowerblue ;
        border: none;
        color: white;
        height: 32px;
        padding: 8px 12px 8px 10px;
        text-align: right;
        text-decoration: none;
        border-radius: 4px;
        white-space: nowrap;
        border-radius: 5px 15px;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
    }

    @keyframes blinker {
        50% {
            opacity: 0;
        }
    }
    .rightAlign {
        text-align: right;
    }
    .verticalAlignCenter {
        text-align :justify 
    }
    .SpaceLetter2 {
        /* 16 * 0.0625 = 1px */
        letter-spacing: 3px;
    }
   @media print 
        {
       #breadcrumbs, .blog-pager, #decomments-form-add-comment, .feed-links, #footer, .footer, .footer-outer, #header-widgets, nav, .sidebar, #sidebar, #header, .sidebar div div, .content-ads, .make-comment, .heading, .related-posts, .body #navbar, .Navbar, .meta, .main-inner .fauxcolumn-right-outer, .main-inner .column-right-outer, .navigation, .noprint, .post-byline, .meta-single, .post-tags, .readability, .site-title img 
       {
                display: none !important;
       }
       .main-inner .fauxcolumn-right-outer 
            {
                padding-right: 0px;
                width: 0px;
            }

            .main-inner .column-right-outer 
            {
                padding-right: 0px;
                width: 0px;
            }

            .main-inner .columns 
            {
                padding-right: 0px;
                width: 100%;
            }
            /* PRINT Avoid breaking images in the middle */
            p {
                page-break-inside: avoid;
            }
            /* PRINT Inhaltsbreite setzen */
            @page 
            {
                size: 210mm 297mm; /* portrait */
                margin: 1cm;
            }



            body 
            {
                margin: 0;
                padding: 0;
                line-height: 1.2em;
                word-spacing: 1px;
                letter-spacing: 0.2px;
                font: 12px Tahoma, Geneva, sans-serif;
                color: #000;
                background: #fff !important;
            }

            /*Remove Element*/
            #logo, #catnavi, #header, #nav, .noprint, .topnavi, .more-link, .navigation, #sidebartop, #related, #social, #sponsors, .tabs, #allpost, .toolbar, .splitbox, #commentform, #commentabs .idTabs, .postmeta-content .comments, #respond h3, .tag, .footerlinks, a
            {
                display: none;
            }


            /* Ensure the content spans the full width */
            #container, #container2, #content 
            {
                width: 100%;
                margin: 0;
                float: none;
            }

            /* Change text colour to black (useful for light text on a dark background) */
            .lighttext
            {
                color: #000
            }

            /* PRINT SAVE INK: Set fontsize, background white and font black.*/
            body, .content, .post-outer, html .main-inner .date-outer, .body-fauxcolumns, .content-fauxcolumns
            {
                font: 18pt Georgia, "Times New Roman", Times, serif;
                line-height: 1.2;
                background: #fff !important;
                color: #000 !important;
              
            }

            h1 
            {
                font-size: 24pt;
            }
            h2, h3, h4 
            {
                font-size: 16pt;
                margin-top: 25px;
            }

            .noPrint 
            {
                display: none;
            }

            .yesPrint 
            {
                display: block !important;
            }
    }

    @media screen {
        .noPrint {
            display: block;
        }

        .yesPrint {
            display: block !important;
        }
    }
}