@t1: white;
@t2: grey; /* sub-titles, descriptive text, grey */
@t3: lightgrey; /* titles */
@tFigure: rgb(164,169,172);

@axisLabels: grey;
@divRadius: 21px; 
@divColor: rgba(0,0,0,0.236);


 body {
        padding-top: 50px; /* 60px to make the container go all the way to the bottom of the topbar */
        -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
      }



#country_name_popup {
    color: black;
    border-radius: 5px;
    border: 1px solid #515151;
    background: lightgray;
    margin: 10px;
    padding: 10px;
    font-size:1.2em;
    position:fixed;
    display:none;
    z-index: 102;

}
#popup_country_name{
    display:block;
    font-size: 1.4em;
    padding-bottom:4px;
    margin-bottom:4px;
    border-bottom: 1px solid black;
    width:250px;

}

#country_name_popup th{
    text-align: right;
}
#country_name_popup th{
    text-align: left;
}

/* top row container */
#topRow { 
  position: absolute;
  top: 10px;
  left: 0px;
text-align: right;
float: right;
width: 100%;
z-index: 999999;
height: 80px;
padding-bottom: 50px;
}

/* total populaiton box */
#totalPopBox {
  position: absolute;
  top: 40px;
  left: 10px;
}

/* main year selector box box */
#yearSelectorBox {
  position: absolute;
  top: 40px;
  right: 5px;
}

/* population change boxes */
#popIncreasesBox {
  position: absolute;
  top: 40px;
  left: 250px;
}

/* population change boxes */
#popDecreasesBox {
  position: absolute;
  top: 40px;
  left: 580px;
}

.label_main1 {
  display: inline; color: @t3; padding-right: 10px; font-size: 12px; font-weight: bold;
  /* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
text-shadow:0px 1px 1px rgba(0,0,0,0.71);
}

.label_main2 {
display: inline; color: @t3; padding-right: 10px; font-size: 11px; line-height: 0.5; display: block; padding-top: 7px; font-weight: bold;
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
text-shadow:0px 1px 1px rgba(0,0,0,0.71);
}

.yearSelected {
  fill: red;
}

.yearUnselected {
  fill: green; 
}

.disclaimer1 {
    display: inline; color: @t2; font-size: 9px; font-weight: normal;
}

.disclaimer2 {
    display: inline; color: @t2; font-size: 9px; font-weight: normal;
}

.totalBars {
  stroke: green;
}


/* middle row container */
.middleRow { 
position: absolute;
top: 120px;
text-align: right;
float: right;
width: 100%;
z-index: 999999;
}

/* country of origin/asylum toggle button */
#switchContainer {
  position: relative;
  left: 10px;
  top: 5px;
  z-index: 99909;
}

.switchASY {
  display: inline; background: url(../img/switch.png); background-position: 0px 0px; width: 76px; height: 56px; padding: 5px;
  cursor: pointer;
}

.switchORI {
  display: inline; background: url(../img/switch.png); background-position: 0px 29px; width: 76px; height: 56px; padding: 5px;
  cursor: pointer;
}

.switchActive {color: @t3;font-weight: bold;
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
text-shadow:0px 1px 1px rgba(0,0,0,0.71);}

.switchInactive {color: @t2; font-weight: bold;
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
text-shadow:0px 1px 1px rgba(0,0,0,0.71);}

.active {color: @t1;}


/* select country box */
#countrySelector {
  position: absolute;
  right: 0px;
  top: 2px;
  z-index: 99909;
}




.country {
  fill: lightgrey;
  stroke: black;
  stroke-width: 0.2;
}

.country:hover{

}

#map {
  position: absolute;
  border: transparent 1px #000;
  top: 100px;
}

#map_tooltip {
position: relative;
display: none;
top: 0px;
left: 0px;
background-color: black;
opacity: 0.7;
color: @t1;
font-size: 10px;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
z-index: 9999999;
padding-top: 5px;
padding-bottom: 5px;
}

#map_info {
  color: @t1;
  position: absolute;
  height: 160px;
  width: 230px;
  top: 375px;
  left: 10px;
  padding: 3px;
  font-size: 9px;
  background-color: rgba(0,0,0,0.10);
  /* Firefox v1.0+ */
-moz-border-radius:15px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:15px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:15px;
/* Firefox v3.5+ */
-moz-box-shadow:inset -2px -2px 2px rgba(0,0,0,0.18) ,inset 2px 2px 2px rgba(237,237,237,0.1);
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-box-shadow:inset -2px -2px 2px rgba(0,0,0,0.18) ,inset 2px 2px 2px rgba(237,237,237,0.1);
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
box-shadow:inset -2px -2px 2px rgba(0,0,0,0.18) ,inset 2px 2px 2px rgba(237,237,237,0.1);

}

.ui-slider .ui-slider-handle{
    width:30px; 
    height:30px; 
    background:url('../img/sliderhandle.png') no-repeat; overflow: hidden; 
    position:absolute;
    top: -10px;
    border-style:none; 
}

.axis path, .totalYAxis path, .totalChangeAxis path,
.axis line, .totalYAxis line {
    fill: none;
    stroke: rgba(0,0,0,0.3);
    shape-rendering: crispEdges;
}

.axis text, .totalYAxis text, .totalChangeAxis text {
    font-family: Arial;
    font-size: 10px;
    fill: @axisLabels;
}

.axisLabel { 
color: @axisLabels;
}

.axisTitle { 
color: @t3;
}


.yTotalLabel {font-size: 10px; font-family: Arial; font-weight: normal; fill: grey;}

.totalLabel {font-size: 10px; font-family: Arial; font-weight: normal; fill: grey;}
.totalValue {font-size: 17px; font-family: Arial; font-weight: bold; fill: white;}

.changeLabel {font-size: 10px; font-family: Arial; font-weight: normal; fill: grey;}
.changeValue {font-size: 14px; font-family: Arial; font-weight: bold; fill: white;}

.changeUp {
position: relative;
top: -22px;
left: 442px;
z-index: 999999;
display: block;
width: 16px;
height: 18px;
background: url(../img/change_smaller.png) 0px 0px;
 }

.changeDown {
position: relative;
top: -30px;
left: 442px;
z-index: 999999;
display: block;
width: 16px;
height: 18px;
background: url(../img/change_smaller.png) 0px 17px 
 }

.changeNone {
position: relative;
top: -30px;
left: 442px;
z-index: 999999;
display: block;
width: 16px;
height: 18px;

 }

 .changeSmallUp {
  display: inline; background: url(../img/change_smaller.png); background-position: -1px 0px; width: 16px; height: 16px;
 }

 .changeSmallDown {
  display: inline; background: url(../img/change_smaller.png); background-position: -1px 10px; width: 16px; height: 16px;
 }

 .changeSmallNone {
  display: none; background: none; width: 16px; height: 16px;
 }

.text {
  display: inline;
font-family:"Arial";
font-size:13px;
font-weight:bold;
letter-spacing:0pt;
line-height:190%;
color: @t2;
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
text-shadow:0px 1px 1px rgba(0,0,0,0.71);

}


 .figure_box {
background-color:rgb(43,46,49);
width:140px;
height:33px;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* Firefox v3.5+ */
-moz-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.09) ,inset 0px 0px 1px 0px rgba(0,0,0,0.05) ,inset 0px 1px 3px 0px rgba(0,0,0,0.36);
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-box-shadow:0px 1px 0px 0px rgba(255,255,255,0.09) ,inset 0px 0px 1px 0px rgba(0,0,0,0.05) ,inset 0px 1px 3px 0px rgba(0,0,0,0.36);
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
box-shadow:0px 1px 0px 0px rgba(255,255,255,0.09) ,inset 0px 0px 1px 0px rgba(0,0,0,0.05) ,inset 0px 1px 3px 0px rgba(0,0,0,0.36);


 }

.figure_text {
  padding-top: 0px;
font-size:18px;
color:@tFigure;
}



.next {
background-color: green;
width: 10px;
display: inline;
background: url(../img/nextprev.png); background-position: 22px -13px;
cursor: pointer;
} 

.prev { 
background-color: green;
width: 10px;
display: inline;
background: url(../img/nextprev.png); background-position: 1px -13px;
cursor: pointer;
}

.nextCountry {
width: 10px;
display: inline;
background: url(../img/nextprev.png); background-position: 11px -2px;
cursor: pointer;
} 

.prevCountry { 
width: 10px;
display: inline;
background: url(../img/nextprev.png); background-position: 1px -2px;
cursor: pointer;
}

.totalGraphDiv {
  background-color:@divColor;
width:1100px;
height:110px;
/* Firefox v1.0+ */
-moz-border-radius:@divRadius;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:@divRadius;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:@divRadius;
/* Firefox v3.5+ */
-moz-box-shadow:inset -2px -2px 2px rgba(237,237,237,0.2) ,inset 5px 5px 4px rgba(0,0,0,0.18);
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-box-shadow:inset -2px -2px 2px rgba(237,237,237,0.2) ,inset 5px 5px 4px rgba(0,0,0,0.18);
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
box-shadow:inset -2px -2px 2px rgba(237,237,237,0.2) ,inset 5px 5px 4px rgba(0,0,0,0.18);
padding-top: 3px;
position: relative;
top: -12px;



}

.map_info_title {
  background-color:rgba(255,255,255,0.1);
width:202px;
height:20px;
/* Firefox v1.0+ */
-moz-border-radius:10px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:10px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:10px;
margin-left: 2px;
padding-left: 25px;
padding-top: 0px;
font-family:"Arial";
font-size:13px;
font-weight:bold;
letter-spacing:0pt;
color:@t3;
text-align:left;
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
text-shadow:0px 1px 1px rgba(0,0,0,0.71);

}

.totalGraphTitle {
  background-color:rgba(255,255,255,0.1);
width:120px;
height:20px;
/* Firefox v1.0+ */
-moz-border-radius:10px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:10px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:10px;
margin-left: 4px;
padding-left: 25px;
padding-top: 0px;
font-family:"Arial";
font-size:13px;
font-weight:bold;
letter-spacing:0pt;
color:@t3;
text-align:left;
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
text-shadow:0px 1px 1px rgba(0,0,0,0.71);

position: relative;
}

.tip {
  position: absolute;
  left: 3px;
  top: 2px;
background: url(../img/tip.png); background-position: -5px -1px no-repeat;
width:14px;
height:0px;
margin: 0px;
padding-top: 20px;
padding-left: 4px;
opacity: 0.2;
}

.changeGraphDiv {
  background-color:@divColor;
width:1100px;
height:115px;
position: absolute;
top: 118px;
/* Firefox v1.0+ */
-moz-border-radius:@divRadius;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:@divRadius;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:@divRadius;
/* Firefox v3.5+ */
-moz-box-shadow:inset -2px -2px 2px rgba(237,237,237,0.2) ,inset 5px 5px 4px rgba(0,0,0,0.18);
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-box-shadow:inset -2px -2px 2px rgba(237,237,237,0.2) ,inset 5px 5px 4px rgba(0,0,0,0.18);
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
box-shadow:inset -2px -2px 2px rgba(237,237,237,0.2) ,inset 5px 5px 4px rgba(0,0,0,0.18);
padding-top: 3px;
}

.changeGraphTitle {
  background-color:rgba(255,255,255,0.1);
width:140px;
height:20px;
/* Firefox v1.0+ */
-moz-border-radius:10px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:10px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:10px;
margin-left: 4px;
padding-left: 25px;
padding-top: 0px;
font-family:"Arial";
font-size:13px;
font-weight:bold;
letter-spacing:0pt;
color:@t3;
text-align:left;
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
text-shadow:0px 1px 1px rgba(0,0,0,0.71);

}



.mapDiv {
  background-color:@divColor;
width:1100px;
height:390px;
position: absolute;
top: 157px;
/* Firefox v1.0+ */
-moz-border-radius:@divRadius;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:@divRadius;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:@divRadius;
/* Firefox v3.5+ */
-moz-box-shadow:inset -2px -2px 2px rgba(237,237,237,0.2) ,inset 5px 5px 4px rgba(0,0,0,0.18);
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-box-shadow:inset -2px -2px 2px rgba(237,237,237,0.2) ,inset 5px 5px 4px rgba(0,0,0,0.18);
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
box-shadow:inset -2px -2px 2px rgba(237,237,237,0.2) ,inset 5px 5px 4px rgba(0,0,0,0.18);
padding-top: 3px;
}

.mapTitle {
  background-color:rgba(255,255,255,0.1);
width:80px;
height:20px;
/* Firefox v1.0+ */
-moz-border-radius:10px;
/* Safari v3.0+ and by Chrome v0.2+ */
-webkit-border-radius:10px;
/* Firefox v4.0+ , Safari v5.0+ , Chrome v4.0+ , Opera v10.5+  and by IE v9.0+ */
border-radius:10px;
margin-left: 4px;
padding-left: 25px;
padding-top: 0px;
font-family:"Arial";
font-size:13px;
font-weight:bold;
letter-spacing:0pt;
color:@t3;
text-align:left;
/* Firefox v4.0+ , Safari v5.1+ , Chrome v10.0+, IE v10+ and by Opera v10.5+ */
text-shadow:0px 1px 1px rgba(0,0,0,0.71);
}

.changeGraphSubTitle {
position: absolute;
top: 5px;
left: 180px;
}

.footer {
position: absolute;
top: 548px;
left: 0px;
padding-bottom: 10px;
padding-top: 8px;
font-size: 10px;
line-height: 1.2;
z-index: 999999;
}

.logo {
float: right;
z-index: 9999;

}

.socialmedia {
  position: absolute; 
  top: 5px;
  right: 160px;
z-index: 99999999;

}

.socialmedia img {
  padding: 2px;
}

.socialmedia img:hover {
  opacity: 0.7;
}

.brandRow { 
position: absolute;
top: 120px;
text-align: left;
float: left;
width: 100%;
z-index: 999999;
}