@import url(https://fonts.googleapis.com/css?family=Bree+Serif);


/* --------------------------
 BOOTSTRAP OVERRIDES 
 ----------------------------- */

/* normalize */
body { font-family: Verdana,Helvetica,Arial,sans-serif; font-size: 14px; line-height: 1.428571429; color: #4b4d4d; background-color: #ffffff; }
a { color: #008383; }
a:hover, a:focus { color: #008383; }
ul ul { padding-left: 20px; }

/* typography */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Bree Serif', Verdana,Helvetica,Arial,sans-serif; font-weight: 500; line-height: 1.1; color: #4b4d4d; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small { font-weight: normal; line-height: 1; color: #999999; }
h1, .h1 { font-size: 30px; }
h2, .h2 { font-size: 24px; }
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 14px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
h1, h2, h3 { margin-top: 10px; margin-bottom: 20px; }
small { font-size: 80%; }

/* dropdowns */
.main-nav .dropdown-menu { width: 100%; min-width: 100%; left: 0; margin: 7px auto 0 auto; border-radius: 0; }
.main-nav .dropdown-menu .arrow { width: 0; height: 0; display: block; margin: auto; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #FFF; position: absolute; top: -10px; left: 0; right: 0; padding: 0; }

.main-nav .dropdown-menu li { width: 100%; padding: 15px 0; margin: 0; border-bottom: 1px solid #d7d7d7; }
.main-nav .dropdown-menu li:last-child { border: none; }
.main-nav .dropdown-menu a { height: auto; line-height: normal; margin: 0; padding: 0 5px; font-size: 15px; white-space: normal; color: #008383; font-weight: bold; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: transparent; color: #008383; text-decoration: underline; }

/* navs and tabs */
.nav-tabs { border: none; }
.nav-tabs > li { margin: 0; padding: 0; }
.nav-tabs a { color: #4b4d4d; background-color: #eee; font-size: 15px; font-weight: bold; background: #eeeeee; /* Old browsers */ background: -moz-linear-gradient(top, #eeeeee 0%, #e3e3e3 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#e3e3e3)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #eeeeee 0%,#e3e3e3 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #eeeeee 0%,#e3e3e3 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #eeeeee 0%,#e3e3e3 100%); /* IE10+ */ background: linear-gradient(to bottom, #eeeeee 0%,#e3e3e3 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#e3e3e3',GradientType=0 ); /* IE6-9 */ }
.nav-tabs li a { border-color: #d4d4d4; border-radius: 0; padding: 5px 10px; margin-right: 5px;text-decoration: none;}
.nav-tabs a:hover, .nav li a:hover, .nav li a:focus { border-radius: 0; border-color: #d4d4d4; background: #fff; /* Old browsers */ background: -moz-linear-gradient(top, #ffffff 0%, #f0f0f0 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#f0f0f0 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%,#f0f0f0 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f0f0f0',GradientType=0 ); /* IE6-9 */ }
.nav-tabs li.active a, .nav-tabs li.active a:hover { background: #fff; filter: none; border-color: #fff; }
.mh-tabs li { margin-bottom: -1px; }

/* navbar */
.navbar-header .navbar-toggle { background: #008383; margin-top: 15px; margin-bottom: 0; }
.navbar-header .icon-bar { background: #fff; }
/* popover */
.popover { border: none; box-shadow: 0 0 15px #666; }
/* modals */
.modal-backdrop { background: transparent; background: rgb(255,255,255); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#50FFFFFF,endColorstr=#50FFFFFF); zoom: 1; background: rgba(255,255,255,0.7); }
.modal-dialog { padding-top: 5%; padding-bottom: 5%; }
body.modal-open, .modal-open .navbar-fixed-top, .modal-open .navbar-fixed-bottom { margin-right: 0; }
.modal-content { border-color: #dcdcdc; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); }

@media screen and (min-width: 768px) {
    .modal-dialog { padding-top: 5%; padding-bottom: 5%; }
}

@media screen and (min-width: 768px) {
    .modal-dialog { width: auto; }
}

/* ================================================================
MAIN STYLES */
/*html{overflow-y:scroll;}*/
.alpha { margin-left: 0!important; }
.omega { margin-right: 0!important; }
.vertical { display: inline-block !important; vertical-align: middle !important; float: none!important; }
.placeholder { width: 100%; height: 400px; background: #eee; border-radius: 5px; }
.pull-right.inline-image { margin: 20px 0 20px 20px; }
.pull-left.inline-image { margin: 20px 20px 20px 0; }
.relative { position: relative; }
.loader { width: 60px; height: 60px; position: absolute; left: 0; right: 0; top: 20%; margin: auto; z-index: 999; -webkit-animation: rotation .6s infinite linear; -moz-animation: rotation .6s infinite linear; -o-animation: rotation .6s infinite linear; animation: rotation .6s infinite linear; border-left: 6px solid rgba(0,131,131,0); border-right: 6px solid rgba(0,131,131,.8); border-bottom: 6px solid rgba(0,131,131,0); border-top: 6px solid rgba(0,131,131,.8); border-radius: 100%; }

@-webkit-keyframes rotation {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(359deg); }
}

@-moz-keyframes rotation {
    from { -moz-transform: rotate(0deg); }
    to { -moz-transform: rotate(359deg); }
}

@-o-keyframes rotation {
    from { -o-transform: rotate(0deg); }
    to { -o-transform: rotate(359deg); }
}

@keyframes rotation {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

h2.blue, .h2.blue { display: inline; margin: 0; padding: 10px 5px 20px 0; color: #008383; background: #FFF; }
.title { font-size: 18px; font-weight: bold; margin: 15px 0; }
.underlined-title { margin-top: 10px; margin-bottom: 20px; }
.underlined-title i { width: 100%; height: 1px; position: absolute; bottom: 5px; right: 0; z-index: -1; background: #008383; }

body { background: url("../images/bg.jpg") repeat; }
nav { height: 63px; background: url("../images/nav-bg.png") repeat-x; font-size: 15px; font-weight: bold; position: relative; z-index: 999; }
nav .main-nav li { margin: 0 12px; padding: 0; }
nav .main-nav a { height: 44px; line-height: 44px; display: block; }
nav .main-nav a.active, nav .main-nav a.selected { padding: 0 0 5px 0; background: url("../images/active.jpg") bottom center no-repeat; }
nav #logo, nav .logo { width: 314px; height: 80px; display: block; left: 0; right: 0; top: 0; margin: auto; position: absolute; z-index: 99; background: url("../images/logo.png") no-repeat; }
nav .main-nav a.active:hover { text-decoration: none; }
nav .on-top { position: relative; z-index: 9999; }
main { margin: 90px 0 30px 0; }
main a { text-decoration: underline;}
main .background-image { position: absolute; z-index: 1; }
main .background-image.bird { top: -40px; right: -40px; }
main .background-image.car { top: 28px; right: -60px; }
main .background-image.hills { top: -11px; right: 25px; }
main .background-image.buildings { top: -112px; right: 20px; }

section.top, section.bottom { margin-bottom: 50px; background: #FFF; position: relative; z-index: 99; -webkit-box-shadow: 0 0 25px -5px #858585; -moz-box-shadow: 0 0 25px -5px #858585; box-shadow: 0 0 25px -5px #858585; }
section.top { padding: 40px 20px; }
section.bottom { padding: 20px 20px 60px 20px; }
footer { font-size: 12px; height: 127px; line-height: 120px; background-color: #dde8ed; border-top: 1px solid #cbd8de; }
footer a { color: #000; font-weight: bold; text-decoration: underline; }
footer a:hover, footer a:focus { color: #000; text-decoration: none; }
footer p, .footer-nav { line-height: normal; }
.footer-nav { margin-top: 40px; }

/* ================================================================
HOME PAGE */
.popover a { text-decoration: none;}
.popover-content { min-width: 260px;min-height: 230px;}
.modal .close-text { position: absolute;right: 25px;top: 5px;font-size: 12px;}
section#map { max-width: 940px; margin: 50px auto 100px auto; -webkit-box-shadow: 0 5px 80px #737373; -moz-box-shadow: 0 5px 80px #737373; box-shadow: 0 5px 80px #737373; }
section#map .border-hor, .border-ver { position: absolute; }
section#map .border-hor { background: url("../images/home/border-hor.png") no-repeat; }
section#map .border-ver { background: url("../images/home/border-ver.png") no-repeat; }
section#map .border-left { width: 27px; height: 100%; left: -27px; top: 0; background-position: 0 -3px; }
section#map .border-top { width: 105%; height: 39px; left: -22px; top: -39px; background-position: 0 1px; }
section#map .border-right { width: 29px; height: 100%; right: -33px; top: 0px; background-position: -37px -3px; }
section#map .border-bottom { width: 105%; height: 27px; left: -24px; bottom: -26px; background-position: 0 -50px; }

section#map .image-map { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
section#map .image-map .map-area { position: absolute; display: block; }
section#map .map-area.area1 { width: 35%; height: 28%; left: 0%; top: 0%; }
section#map .map-area.area2 { width: 28%; height: 32%; left: 69.65%; top: 8%; }
section#map .map-area.area3 { width: 28%; height: 35%; left: 35.5%; top: 6%; }
section#map .map-area.area4 { width: 26%; height: 29%; left: 31%; top: 55%; }

.map-hover { display: none; position: absolute; left: 0; top: 0; }
.close { width: 31px; height: 31px; display: block; position: absolute; top: -5px; right: -12px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border: 1px solid #cacaca; border-radius: 50%; box-shadow: 0 0 5px #bbb; background: #fff url("../images/icons/close.png") center center no-repeat; }
.modal iframe { width: 100%; height: 400px; }
h2.modal-title { margin: 20px 0; font-family: Verdana,Helvetica,Arial,sans-serif; font-size: 30px; }
#video_wrapper { width: 100%!important; }

/* ================================================================
LEARN ABOUT MAPS */
/* common */
.download-link { font-size: 15px; color: #005f5f; padding: 0 20px 0 0; font-weight: bold; background: url("../images/icons/download.png") right 4px no-repeat; }
.go-further { min-height: 250px; background-color: #c8cd97; border: 1px solid #a7ab7e; color: #000; padding: 20px 20px 60px 20px; }
.go-further h3 { color: #000; }
.go-further div.boots { width: 144px; height: 107px; background: url("../images/bg-boots.png") center no-repeat; position: absolute; bottom: -35px; right: -5px; z-index: 10; }
/* matching game */
.ver { width: 1px; height: 100%; background: #69b6b6; position: absolute; left: 0; right: 0; top: 0; margin: auto; }
.match-box .match-img div, #main-image div { width: 50px; height: 50px; text-align: center; background-color: #bdded6; border: 1px solid #98b8b0; border-radius: 50%; position: absolute; top: -10px; left: -10px; z-index: 99; }
.match-box div h3 { margin: 0; line-height: 46px; font-size: 24px; }
.match-img, #main-image { display: inline-block; position: relative; }
.match-img img { opacity: 0.5; filter: alpha(opacity=50); transition: opacity 0.5s; -webkit-backface-visibility: hidden; }
.match-img img:hover { opacity: 0.8; filter: alpha(opacity=80); transition: opacity 0.5s; }
.match-img.active img { opacity: 1; filter: alpha(opacity=100); }
.match-img .check, .match-img .error { width: 108px; height: 103px; position: absolute; bottom: -20px; right: -20px; }
.match-img .check { background: url("../images/match/check.png") no-repeat; z-index: 99; }
.match-img .error { width: 137px; height: 133px; background: url("../images/match/error.png") no-repeat; z-index: 99; }
.matching-game-result { display: none; }
/* compare different maps */
#map1, #map2 { width: 50%; height: 500px; float: left; }

/* step by step */
#steps { width: 100%; padding: 5px; display: table; background: #b2d8cf; overflow: hidden; }
#steps h3 { margin-bottom: 5px; }
#steps li { width: 14.28571428571429%; padding: 0; display: table-cell; vertical-align: top; position: relative; }
#steps div { min-height: 75px; display: block; position: relative; padding: 3px 0; background: #cbe5df; background: -moz-linear-gradient(top, #cbe5df 0%, #b2d8cf 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cbe5df), color-stop(100%,#b2d8cf)); background: -webkit-linear-gradient(top, #cbe5df 0%,#b2d8cf 100%); background: -o-linear-gradient(top, #cbe5df 0%,#b2d8cf 100%); background: -ms-linear-gradient(top, #cbe5df 0%,#b2d8cf 100%); background: linear-gradient(to bottom, #cbe5df 0%,#b2d8cf 100%); }
#steps div:before, #steps div:after { display: block; content: ""; position: absolute; z-index: 1; }
#steps div:after { width: 54px; height: 54px; border-radius: 2px 0 2px 2px; right: -15px; top: 0; bottom: 0; margin: auto; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); background: #cbe5df; background: -moz-linear-gradient(-45deg, #b2d8cf 0%, #cbe5df 100%); background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #b2d8cf), color-stop(100%, #cbe5df)); background: -webkit-linear-gradient(-45deg, #cbe5df 0%, #b2d8cf 100%); background: -o-linear-gradient(-45deg, #b2d8cf 0%, #cbe5df 100%); background: -ms-linear-gradient(-45deg, #b2d8cf 0%,#cbe5df 100%); background: linear-gradient(-45deg, #b2d8cf 0%, #cbe5df 100%); }

#steps div:before { width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid #b2d8cf; right: -38px; top: -12px; }
#steps li.active div { background: #fff; background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0)); background: -webkit-linear-gradient(top, #fff 0%,#f0f0f0 100%); background: -o-linear-gradient(top, #fff 0%,#f0f0f0 100%); background: -ms-linear-gradient(top, #fff 0%,#f0f0f0 100%); background: linear-gradient(to bottom, #fff 0%,#f0f0f0 100%); }
#steps li.active div:after { background: #fff; /* Old browsers */ background: -moz-linear-gradient(-45deg, top, #f0f0f0 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#ffffff), color-stop(100%,#f0f0f0)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(-45deg, top, #f0f0f0 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(-45deg, top, #f0f0f0 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(-45deg, top, #f0f0f0 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(-45deg, #f0f0f0 0%,#ffffff 100%); /* W3C */ }
#steps li:first-child a { padding: 0 0 0 30px; }
#steps li:last-child div:after, #steps li:last-child div:before { display: none; }
.lt-ie9 #steps div:after, .lt-ie9 #steps div:before { display: none; }
#steps a { margin-top: 3px; padding: 0 0 0 50px; display: block; position: relative; z-index: 9; font-size: 12px; font-weight: 700; color: #4b4d4d; cursor: default; }
#steps h3 { margin: 0 0 5px 0; }
#steps a, #steps a:hover { text-decoration: none; }
/* identify objects */
#identify-map { width: 100%; height: 400px; margin: 30px auto; overflow: hidden; border: solid 1px #000; position: relative; }

/* ================================================================
FOR TEACHERS */
#teachers-table table { width: 100%; border-collapse: separate; border-spacing: 10px; }
#teachers-table table tbody td { vertical-align: top; padding: 20px 15px; background: #b2d8cf; }
#teachers-table table tbody td:first-child { background: none; }
#teachers-table table tbody td p { color: #000; }


/* ================================================================
DOWNLOADS */
.download-box { margin-top: 60px; background: #f3f5f5; padding: 40px 20px; position: relative; }
.download-box img { position: absolute; }
.download-box img.bird { top: -70px; right: -30px; }
.download-box img.car { top: -30px; right: -10px; }
.download-box img.hills { top: -50px; right: -10px; }


/* ================================================================
COMPATIBILITY */
#subnav { display: none; }
.no-js .navbar-fixed-top, .navbar-fixed-bottom { position: static;}
.no-js .collapse { display: block;}
.no-js .modal { display: block;position: static;}
.nojs-popup {width: 85%; display: none;position: absolute;bottom: 0;left: 0;right: 0;margin: auto;background: #ffffff;opacity: 0.7;padding: 2px 4px;}
.no-js .nojs-popup { display: inline;}
.no-js .fade { opacity: 1;}
.no-js .tab-content>.tab-pane, .pill-content>.pill-pane { display: block;}
.no-js .nav-tabs { display: none;}
.no-js main { margin: 30px 0;}
.no-js nav.navbar ul.main-nav {margin-bottom: 0px;}
/*.no-js nav .main-nav a { padding: 0 10px;}*/
.no-js #subnav {height: 38px;line-height: 34px;display: block; background: #EDEDED;z-index: 9;box-shadow: 0 5px  10px #BABABA; }
.submenu { list-style: none;margin: 0;padding: 0 0 0 15px;}
.submenu li { width: auto;margin-right: 15px; display: block; float: left;}
.submenu li a {font-size: 11px;}
.no-js .submenu li.arrow { width: 0; height: 0; display: block; margin: auto; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #EDEDED; position: absolute; top: -10px; left:15%; padding: 0; }
.no-js .navbar-toggle { visibility: hidden;}