/* default tooltip */
.css-map li a,.css-map li a:hover,#map-tooltip{
    background: #111;
    background: rgba(0,0,0,.8);
    color: #eee;
    font: normal 13px 'Lucida Grande',Arial,sans-serif;
    padding: .5em 1.2em;
    text-align: center;
    text-shadow: 0 1px 0 #000;
    white-space: nowrap;
    -moz-border-radius: .5em;
    -ms-border-radius: .5em;
    -o-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: 0.5em;
    border: 2px solid white;
}

.m660 .css-map li a,.m500 .css-map li a{ font-size: 11px }
.m340 .css-map li a,.m240 .css-map li a{ font-size: 10px }
.m170 .css-map li a{ font-size: 9px }

/* tooltip arrow; when you change its size don't forget to set tooltipArrowHeight variable in the cssMap(); function */
.css-map li a .tooltip-arrow{
    bottom: -6px; /* must be the same as a border-width */
    border: solid;
    border-color: #fff transparent;
    border-width: 5px 5px 0 5px; /* this's a height of the arrow */
    margin-left: -5px; /* must be the same as a border-width */
}
.css-map li a.tooltip-right .tooltip-arrow{
    margin-right: -5px; /* must be the same as a tooltip-arrow border-width */
}
.css-map li a.tooltip-top .tooltip-arrow{ /* set tooltip under the arrow */
    border-width:0 5px 5px 5px;
    top: -5px;
}

/* links in the visible list of regions */
.map-visible-list a{
    /* color: #eee; */
}
.map-visible-list a:hover,.map-visible-list a:focus,.map-visible-list li.focus a{
    /* color: #fc0; */
}
.map-visible-list a:active,.map-visible-list li.active-region a{
    /* color: #cc3; */
}


/* default pre-loader */
.map-loader{
    background: #111;
    background: rgba(0,0,0,.8);
    color: #eee;
    font: normal 14px 'Lucida Grande',Arial,sans-serif;
    padding: .6em 1.2em;
    text-shadow: 0 1px 0 #000;
    -moz-border-radius: .6em;
    -ms-border-radius: .6em;
    -o-border-radius: .6em;
    -webkit-border-radius: .6em;
    border-radius: .6em;
}
.m500 .map-loader,.m340 .map-loader{font-size:12px}
.m240 .map-loader,.m170 .map-loader{font-size:10px}

/* link to the search engine - shown in the multipleClick mode */
.map-search-link{
    /* your rules goes here */
}
.map-search-link:hover,a.map-search-link:focus{
    /* selected link style */
}
.m340 .map-search-link,.m240 .map-search-link,.m170 .map-search-link{
    /* style for a specific map size, ex.:
    font-size: 1em;
    */
}

.css-map-container{margin:0 auto !important;overflow:hidden;padding:0 !important;position:relative} .css-map{display:block;left:0;margin:0 !important;list-style:none;padding:0 !important;position:relative} .css-map li{height:0;width:0} .css-map li a{height:auto;margin:-9999px 0 0 0;position:absolute;text-decoration:none;width:auto;z-index:89} .css-map li a:focus{outline:0 none} .css-map-container span{display:block;height:0;left:0;position:absolute;top:-9999px;width:0} .css-map li a.tooltip-right{left:auto;right:0;width:auto} .css-map li a .tooltip-arrow{left:50%;top:auto} .css-map li a.tooltip-middle .tooltip-arrow{display:none} .css-map li a.tooltip-top .tooltip-arrow{bottom:auto} .css-map li a.tooltip-right .tooltip-arrow{left:auto} #map-tooltip{position:absolute;z-index:999} .css-map-container .cities{top:0;z-index:88} .css-map .bg{padding:10px} .css-map .active-region .bg{z-index:87} .css-map .m{cursor:pointer;z-index:99} .css-map .m span{z-index:89} .map-visible-list{clear:both;overflow:hidden} span.map-loader{height:auto;position:absolute;text-align:center;width:auto;z-index:90}


/* Bulgaria size: 600 */
.m660{width:600px} 
.m660 .bulgaria,.m660 .bulgaria .bg,.m660 .bulgaria-cities{background:transparent url('map-bg-660px13.png') no-repeat -1330px 0} 
.m660 .bulgaria,.m660 .bulgaria-cities{height:390px;width:600px} 
.m660 .bulgaria{background-position:-20px -20px} 
.m660 .bulgaria-cities{background-position:0px 0px} 
.m660 .bulgaria .m{margin:10007px 0 0 7px} .m660 .bulgaria .m span{font-size:40px !important}

/* Sofia */
.bg1 .s1{left:70px;top:172px;width:38px; height:41px !important;} 

.m660 .bg1.focus .bg,.m660 .bg1.active-region .bg{left:70px;top:172px;width:38px; height:41px !important;} 
.m660 .bg1.focus .bg{background-position:-24px -449px} 
/*.m660 .bg1.active-region .bg{background-position:-24px -519px}*/
.m660 .bg1 a{left:100px;top:200px} 
.m660 .bg1 a.tooltip-left .tooltip-arrow{left:166px}

/* Veliko Tarnovo */
.bg2 .s1{left:265px;top:70px;width:35px; height:70px !important;}
.bg2 .s2{left:300px;top:105px;width:45px; height:70px !important;} 

.m660 .bg2.focus .bg,.m660 .bg2.active-region .bg{left:262px;top:70px;width:85px; height:104px !important} 
.m660 .bg2.focus .bg{background-position:-424px -451px} 
.m660 .bg2 a{left:315px;top:125px} 
.m660 .bg2 a.tooltip-left .tooltip-arrow{left:166px}

/* Plovdiv */
.bg3 .s1{left:192px;top:184px;width:77px; height:109px !important} 

.m660 .bg3.focus .bg,.m660 .bg3.active-region .bg{left:192px;top:184px;width:77px; height:109px !important} 
.m660 .bg3.focus .bg{background-position:-194px -447px;} 
.m660 .bg3 a{left:230px;top:240px} 
.m660 .bg3 a.tooltip-left .tooltip-arrow{left:166px}

/* Bourgas */
.bg4 .s1{left:400px;top:160px;width:123px; height:120px !important}

.m660 .bg4.focus .bg,.m660 .bg4.active-region .bg{left:400px;top:160px;width:123px; height:120px !important} 
.m660 .bg4.focus .bg{background-position:-22px -602px} 
.m660 .bg4 a{left:460px;top:220px} 
.m660 .bg4 a.tooltip-left .tooltip-arrow{left:166px}

/* Varna */
.bg5 .s1{left:460px;top:90px;width:66px; height:70px !important} 
.m660 .bg5.focus .bg,.m660 .bg5.active-region .bg{left:450px;top:81px;width:76px; height:81px !important} 
.m660 .bg5.focus .bg{background-position:-534px -448px} 
.m660 .bg5 a{left:500px;top:150px} 
.m660 .bg5 a.tooltip-left .tooltip-arrow{left:166px}

/* Stara Zagora */
.bg6 .s1{left:255px;top:185px;width:92px; height:80px !important} 
.m660 .bg6.focus .bg,.m660 .bg6.active-region .bg{left:255px;top:185px;width:92px; height:80px !important} 
.m660 .bg6.focus .bg{background-position:-299px -447px} 
.m660 .bg6 a{left:310px;top:230px} 
.m660 .bg6 a.tooltip-left .tooltip-arrow{left:166px}

/* Haskovo*/
.bg8 .s1{left:280px;top:265px;width:70px; height:45px !important;}
.bg8 .s2{left:350px;top:260px;width:40px; height:50px !important;}
.bg8 .s3{left:310px;top:310px;width:40px; height:15px !important;}
.bg8 .s4{left:325px;top:325px;width:32px; height:35px !important;}
.m660 .bg8.focus .bg,.m660 .bg8.active-region .bg{left:278px;top:260px;width:105px; height:90px !important;}
.m660 .bg8.focus .bg{background-position:-298px -705px} 
.m660 .bg8 a{left:340px;top:300px} 
.m660 .bg8 a.tooltip-left .tooltip-arrow{left:166px}

/* Pernik */
.bg7 .s1{left:10px;top:170px;width:63px;height:49px !important} 
.m660 .bg7.focus .bg,.m660 .bg7.active-region .bg{left:10px;top:170px;width:63px;height:49px !important} 
.m660 .bg7.focus .bg{background-position:-98px -450px} 
.m660 .bg7 a{left:50px;top:200px} 
.m660 .bg7 a.tooltip-left .tooltip-arrow{left:50px}



/* Asenovgrad */
.bg9 .s1{left:230px;top:265px;width:35px; height:35px !important} 

.m660 .bg9.focus .bg,.m660 .bg9.active-region .bg{left:230px;top:265px;width:35px; height:35px !important} 
.m660 .bg9.focus .bg{background-position:-366px -660px;} 
.m660 .bg9 a{left:260px;top:280px} 
.m660 .bg9 a.tooltip-left .tooltip-arrow{left:166px}

/* Shumen */
.bg10 .s1{left:410px; top:70px; width:55px; height:85px !important;} 
.m660 .bg10.focus .bg,.m660 .bg10.active-region .bg{left:397px;top:55px;width:70px; height:100px !important} 
.m660 .bg10.focus .bg{background-position:-440px -730px} 
.m660 .bg10 a{left:445px;top:120px} 
.m660 .bg10 a.tooltip-left .tooltip-arrow{left:166px}

/* Razgrad */
.bg14 .s1{left:370px; top:30px; width:50px; height:65px !important;} 
.m660 .bg14.focus .bg,.m660 .bg14.active-region .bg{left:353px;top:37px;width:75px; height:60px !important;} 
.m660 .bg14.focus .bg{background-position:-434px -863px;} 
.m660 .bg14 a{left:405px;top:80px}
.m660 .bg14 a.tooltip-left .tooltip-arrow{left:166px}

/* Targovishte */
.bg15 .s1{left:345px; top:90px; width:60px; height:55px !important;} 
.m660 .bg15.focus .bg,.m660 .bg15.active-region .bg{left:343px;top:86px;width:60px; height:58px !important;} 
.m660 .bg15.focus .bg{background-position:-426px -950px;} 
.m660 .bg15 a{left:385px;top:130px}
.m660 .bg15 a.tooltip-left .tooltip-arrow{left:166px}

/* Blagoevgrad */
.bg11 .s1{left:50px;top:265px;width:100px; height:90px !important} 
.m660 .bg11.focus .bg,.m660 .bg11.active-region .bg{left:50px;top:265px;width:100px; height:90px !important} 
.m660 .bg11.focus .bg{background-position:-180px -752px} 
.m660 .bg11 a{left:100px;top:320px} 
.m660 .bg11 a.tooltip-left .tooltip-arrow{left:166px}

/* Ruse */
.bg12 .s1{left:300px;top:30px;width:80px; height:70px !important} 
.m660 .bg12.focus .bg,.m660 .bg12.active-region .bg{left:297px;top:24px;width:85px; height:80px !important} 
.m660 .bg12.focus .bg{background-position:-130px -900px;} 
.m660 .bg12 a{left:350px;top:80px} 
.m660 .bg12 a.tooltip-left .tooltip-arrow{left:166px}

/* Pazardzhik */
.bg13 .s1{left:140px;top:210px;width:50px; height:100px !important;} 
.m660 .bg13.focus .bg,.m660 .bg13.active-region .bg{left:135px;top:205px;width:50px; height:100px !important;} 
.m660 .bg13.focus .bg{background-position:-344px -868px;} 
.m660 .bg13 a{left:180px;top:280px;} 
.m660 .bg13 a.tooltip-left .tooltip-arrow{left:166px; border: 1px solid yellow;}

/* Gabrovo */
.bg16 .s1{left:240px; top:130px; width:30px; height:55px !important;} 
.bg16 .s2{left:270px; top:145px; width:30px; height:40px !important;} 
.m660 .bg16.focus .bg,.m660 .bg16.active-region .bg{left:240px;top:132px;width:58px; height:45px !important;} 
.m660 .bg16.focus .bg{background-position:-10px -1018px;} 
.m660 .bg16 a{left:280px;top:170px}
.m660 .bg16 a.tooltip-left .tooltip-arrow{left:166px}

/* Vratsa */
.bg17 .s1{left:114px; top:54px; width:40px; height:90px !important} 
.bg17 .s2{left:100px; top:88px; width:16px; height:55px !important} 
.m660 .bg17.focus .bg,.m660 .bg17.active-region .bg{left:95px;top:54px;width:76px; height:88px !important} 
.m660 .bg17.focus .bg{background-position:-459px -1032px;} 
.m660 .bg17 a{left:140px;top:120px}
.m660 .bg17 a.tooltip-left .tooltip-arrow{left:166px}

/* Montana */
.bg18 .s1{left:39px; top:86px; width:54px; height:39px !important} 
.bg18 .s2{left:53px; top:45px; width:60px; height:41px !important} 
.m660 .bg18.focus .bg,.m660 .bg18.active-region .bg{left:39px;top:48px;width:66px; height:77px !important} 
.m660 .bg18.focus .bg{background-position:-95px -1006px} 
.m660 .bg18 a{left:80px;top:100px}
.m660 .bg18 a.tooltip-left .tooltip-arrow{left:166px}


/* Dobrich */
.bg19 .s1{left:460px;top:40px;width:20px; height:30px !important;} 
.bg19 .s2{left:480px;top:25px;width:50px; height:60px !important;} 
.bg19 .s3{left:500px;top:85px;width:30px; height:15px !important;} 
.bg19 .s4{left:530px;top:50px;width:50px; height:50px !important;} 
.m660 .bg19.focus .bg,.m660 .bg19.active-region .bg{left:460px;top:25px;width:120px;height:70px !important} 
.m660 .bg19.focus .bg{background-position:-297px -1102px;} 
.m660 .bg19 a{left:530px;top:90px} 
.m660 .bg19 a.tooltip-left .tooltip-arrow{left:166px}

/* --------------------------------------------------------
end of the maps */

/* SPLASH PAGE */

body { 
    background: transparent url('pure-football2-6.jpg') no-repeat center 0; 
    background-color: #870f01;
    font-family: Verdana, sans-serif;
}

#content {
    margin: 0px auto;
    width: 980px;
    height: 526px;
    margin-top: -21px;
    border: 0px solid white;
}

.clr {
    clear: both;
}

#logo {
    float: left;
    width: 200px;
    height: 200px;
    padding-left: 10px;
    border: 0px solid green; 
}

#slogan {
    text-align: center;
    width: 500px;
    height: 40px;
    font-family: "Open Sans";
    padding-top: 22px;
    line-height: 40px;
    font-size: 24px;
    font-weight: bold;
    float: right;
    text-transform: uppercase;
    color: #fff;
    border: 0px solid blue;
}

#map-bg {
    float: right;
    width: 550px;
    padding-top: 15px;
    border: 0px solid yellow; 
}


#academy {
    float: left;
    padding-top: 21px;
    border: 0px solid blue; 
}
#academy img {
/*    width: 180px;
    margin: 163px 0px -2px -196px;*/
        width: 240px;
    margin: 130px 0px 0px -200px;
}

#academy img:hover{
    opacity:0.9;
    filter:alpha(opacity=90);
}

#amfl {
    float: left;
    width: 220px;
    height: 157px;
    border: 0px solid blue; 
}
#amfl h4{
    font-size: 25px;
    line-height: 1px;
    color: #fff;
}
#amfl span{
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    color: #fff;
}

#header-brand {
/*    height: 225px;*/
    height: 181px;
    padding: 0;
    margin: -8px;
}

#footer-brand {
    height: 245px;
    padding: 0;
    margin: -8px;
}

#footer {
    float: left;
    width: 100%;
    height: 40px;
    border: 0px solid red;
    padding-top: 15px; 
}

#footer a {
    margin: 0 10px;
}