/* Move down content because we have a fixed navbar that is 50px tall */
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

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

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

/*
img {
    display:block;
    margin-left:auto;
}
*/

@media screen and (max-width: 768px) {
    .ipad .table {
        max-width: 95%;
    }
}

@media screen and (min-width: 768px) {
    .ipad .table {
        margin-top: 20px;
        max-width: 50%;
    }
}
/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
    .jumbotron {
        margin-top: 20px;
    }

    .body-content {
        padding: 0;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-width : 1024px) 
{
    .ipad {
        max-width: 1200px;
        height: auto;
        font-size: x-large;
        margin: auto;
    }
}

@media only screen 
and (max-width : 1024px) 
{
    .ipad {
        width: 95%;
        height: auto;
        font-size: x-large;
        margin: auto;
    }
}

.sidebar-nav {
    padding: 9px 0;
}

.dropdown-menu .sub-menu {
    left: 100%;
    position: absolute;
    top: 0;
    visibility: hidden;
    margin-top: -1px;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.nav-tabs .dropdown-menu,
.nav-pills .dropdown-menu,
.navbar .dropdown-menu {
    margin-top: 0;
}

.navbar .sub-menu:before {
    border-bottom: 7px solid transparent;
    border-left: none;
    border-right: 7px solid rgba(0, 0, 0, 0.2);
    border-top: 7px solid transparent;
    left: -7px;
    top: 10px;
}

.navbar .sub-menu:after {
    border-top: 6px solid transparent;
    border-left: none;
    border-right: 6px solid #fff;
    border-bottom: 6px solid transparent;
    left: 10px;
    top: 11px;
    left: -6px;
}

@media only screen and (max-width : 560px) {
    .iFrame {
        width: 320px;
        height: 200px;
    }
}

@media only screen and (min-width : 560px) {
    .iFrame {
        width: 555px;
        height: 315px;
    }
}