/**
 * Custom Normalise
 */
html, body {
    height: 100%;
}
body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 87.5%;
    color: #444;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    display: block;
}

a {
    background-color: transparent;
}

h1 {
    font-size: 2em;
    margin: 0;
}

h2 {font-size: 2em;margin: 0; padding:0.3em 0;font-weight: 300;}
h3 {margin: 0px 0px 0.5em 0px;padding-bottom: 0.5em;border-bottom: 1px solid #0099da;font-weight: 300;font-size: 1.8em;}
h4 {margin: 0px 0px 0.5em 0px;padding-bottom: 0.5em;border-bottom: 1px solid #e5e5e5;font-weight: 300;font-size: 1.4em;color: #0099da}
h5 {margin: 0px 0px 0.5em 0px;padding-bottom: 0.5em;border-bottom: 1px solid #e5e5e5;font-weight: normal}
img {
    border: 0;
}

button,
input,
optgroup,
select,
textarea {
    color: inherit; /* 1 */
    font: inherit; /* 2 */
    margin: 0; /* 3 */
}

button {
    overflow: visible;
}

button,
select {
    text-transform: none;
}

a:active,
a:hover {
    outline: 0;
}

ul, li {padding: 0; margin: 0;}
li {list-style-type: none}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

table {
    border-spacing: 0;
    border-collapse: collapse;
}

td, th {
    padding: 8px;
    vertical-align: top;
    border-top: 1px solid #ddd;
    text-align: left;
}

td.number {
    text-align: right;
}

tr:hover {
    background-color: #f5f5f5;
}

.badge {
    background-color: #75C5E6;
    color: #fff;
    padding: 2px 4px;
    display: inline-block;
    border-radius: 0.5em;
    font-size: 0.8em;
}

body > .container {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -75px;
}

body > .container:after {
    content: "";
    display: block;
}

footer, body > .container:after {
    height: 75px;
}

footer {
    background: #333;
    color: #fff;
    margin-top: 2em;
}
footer .container {
    padding-top: 1em;
}

/**
 * Core Layout
 */
header h1 {margin: 0.4em 0;background: url('/bundles/pdmmovielocationsguide/images/movie-locations-guide-logo.png') left top no-repeat;padding:  0.7em 0 0.7em 3.5em;}
header h1 a {color: #444; text-decoration: none}
header nav {background-color: #555;}
header nav li {display: inline-block; padding: 1em 2em; border-right: 1px solid #777}
header nav li:first-child {border-left: 1px solid #777}
header nav a {color: #fff}

aside{position: absolute; top: 0; right: 0; width: 300px;}
aside .tags a {background-color: #0099da; padding: 2px 4px; white-space: nowrap; color: #fff;display: inline-block;margin-bottom:0.4em;border-radius: 0.2em;font-size: 0.9em;text-decoration: none;}


.container {width: 90%; max-width: 1280px; margin: 0 auto;position: relative;}
body > .container {margin-top: 1em;}
.inner {margin-right: 320px;}

a {color: #0099da}

.breadcrumb {background-color: #e5e5e5}
.breadcrumb .container{padding: 1em 0;}

.welcome img {width: 33%; height: auto;padding: 3px;border: 1px solid #eee; float: right;margin-bottom: 0.7em;margin-left: 1em;}

.latest {clear: both;}
.latest ul {display: table-row;}
.latest li {display: table-cell;padding: 0.5em;margin-right: 1em;vertical-align: top;width: 33%;}
.latest li img {width: 100%; height: auto; margin-bottom: 1em;padding: 3px;border: 1px solid #eee;}

.movie section {border: 1px solid #e5e5e5; margin-top: 2em;}
.movie section .body {padding: 1em 1em 0em 1em;}
.movie section .body img {float: left; border: 1px solid #eee; padding: 3px; margin: 0 1em 0.7em 0; width: 40%; max-width: 480px; height: auto}
.movie section h2 { border-bottom: 1px solid #e5e5e5}
.movie section p {}
.movie section .footer {padding: 0.5em 1em; background-color: #e5e5e5; clear: left}
.movie section .footer li {background: url('/bundles/pdmmovielocationsguide/images/icons.png') left top no-repeat; padding-left: 25px; padding-right: 10px; display: inline;}
.movie section .footer li a {text-decoration: none;color: #0099da}
.movie section .footer li.streetview {background-position: left -20px;}

.tab-content {border: 1px solid #eee; padding: 3px;margin-top: 5px;}
.tab-content > div {width: 100%;position: absolute !important;left: -10000px !important; top: 0 !important;}
.location .google {height: 600px;}
.location input[type=radio] {display: none;}
.location .tabs {margin-top: 2em;}
.location p.back {text-align: right}

.location label {background-color: #e5e5e5; padding: 0.4em 1em;cursor: pointer; border-top: 2px solid #e5e5e5;}
.location input[type=radio]:checked + label {border-top: 2px solid #0099da;}

.comments h3 {margin-top: 1em;}

#map-tab:checked ~ .tab-content #map,
#streetview-tab:checked ~ .tab-content #streetview,
#photo-tab:checked ~ .tab-content #photo {
position: relative !important;
    left: 0px !important;
}

@media screen and (max-width: 1000px) {
    .inner {margin-right: 0px;}
    aside {position: relative; top:0;left:0;width: 90%;margin-top: 2em;}
    .location .google {height: 450px;}
}

@media screen and (max-width: 700px) {
    .inner {margin-right: 0px;}
    .movie section .body img {border: 1px solid #eee; padding: 3px; margin: 0 auto 0.7em auto; width:100%; height: auto}
    aside {position: relative; top:0;left:0;width: 90%;margin-top: 2em;}
    .location .google {height: 300px;}
    .welcome img {width: 50%; height: auto;}
}

@media screen and (max-width: 400px) {
    header h1 { font-size: 1.4em; background-size: 50px; padding: 10px 0 10px 70px;}
    header nav li {padding: 0.7em 1.2em; font-size: 0.9em;}
    h2 {font-size: 1.4em;}
    h3 {font-size: 1.3em;}
    h4 {font-size: 1.2em;}
    .welcome img {width: 100%; height: auto;}
    .latest ul {display: block;}
    .latest li {display: block;width: 95%;}
}