/*! www.motorwaycameras.co.uk */

body {
    /*! Background */
    background-color: #F7F7F4;

    /*! 
    background-image: url("https://static.roadcams.co.uk/images/backgrndrepeat.jpg");
    */

    /*! Pad content downwards to allow for top navbar */
    padding-top: 60px;
    padding-bottom: 20px;
}



/*! Login page */
.loginpage {
	display: inline-block; 
	position: relative; 
	top: -10px; 
	background-color: #ffffff; 
	padding: 0px 10px
}



/*! Wells */
.well {
    background: #ffffff;
    border-radius: 10px;
    margin-left: -5px;    
    margin-right: -5px;   
    margin-bottom: 8px;    
}

/*! Well Menu Links */
.wellmenulink {
    color: #000000;
    text-decoration: none !important;
}

/*! Well Headings */
.wellheading {
    margin-top: 0px;
    color: #4A6394;
}

/*! Well Table List */
.welltablelist {
    margin-left: -10px;    
    margin-right: -10px;    
    margin-bottom: 8px;    
}


/*! Alerts */
.alert {
    border-radius: 10px;
}


/*! Social */
.product-social-links {
    line-height: 10px;
}


/* Responsive maps - REF: stackoverflow.com/questions/15668762/using-google-map-with-bootstrap-but-responsive-doesnt-work */
.map_container{
    position: relative;
    width: 60%;
    padding-bottom: 33.75%; /* Ratio 16:9 ( 60%/16*9 = 33.75% ) */
}
.map_container .map_canvas{
    border-radius: 10px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0;
}
@media (max-width: 767px) {
    .map_container{
        position: relative;
        width: 100%;
        padding-bottom: 80%;
    }
    .map_container .map_canvas{
        border-radius: 10px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: 0;
        padding: 0;
    }
}



/*! Camera Auto Refresh */
.glyphicon-spin {
    -webkit-animation: spin 2000ms infinite linear;
    animation: spin 2000ms infinite linear;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
}



/*! Navbar */
.navbar-custom {
  background-color: #4A6394;
  border-color: #a5b5bd;
}
.navbar-custom .navbar-brand {
  color: #ffffff;
}
.navbar-custom .navbar-brand:hover,
.navbar-custom .navbar-brand:focus {
  color: #35789a;
}
.navbar-custom .navbar-text {
  color: #ffffff;
}
.navbar-custom .navbar-nav > li > a {
  color: #ffffff;
}
.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus {
  color: #35789a;
}
.navbar-custom .navbar-nav > li > .dropdown-menu {
  background-color: #4A6394;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a {
  color: #ffffff;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a:hover,
.navbar-custom .navbar-nav > li > .dropdown-menu > li > a:focus {
  color: #35789a;
  background-color: #a5b5bd;
}
.navbar-custom .navbar-nav > li > .dropdown-menu > li > .divider {
  background-color: #a5b5bd;
}
.navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
.navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #35789a;
  background-color: #a5b5bd;
}
.navbar-custom .navbar-nav > .active > a,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus {
  color: #35789a;
  background-color: #a5b5bd;
}
.navbar-custom .navbar-nav > .open > a,
.navbar-custom .navbar-nav > .open > a:hover,
.navbar-custom .navbar-nav > .open > a:focus {
  color: #35789a;
  background-color: #a5b5bd;
}
.navbar-custom .navbar-toggle {
  border-color: #a5b5bd;
}
.navbar-custom .navbar-toggle:hover,
.navbar-custom .navbar-toggle:focus {
  background-color: #a5b5bd;
}
.navbar-custom .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-custom .navbar-collapse,
.navbar-custom .navbar-form {
  border-color: #ffffff;
}
.navbar-custom .navbar-link {
  color: #ffffff;
}
.navbar-custom .navbar-link:hover {
  color: #35789a;
}
@media (max-width: 767px) {
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #35789a;
  }
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-custom .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #35789a;
    background-color: #a5b5bd;
  }
}