@import url("bootstrap.min.css");
@import url("bootstrap-responsive.min.css");
@import url("smoothness/jquery-ui-1.8.16.custom.css");

/* General styles */
body {
    /*font-family: 'Cardo', serif;*/
    background: #fff url(/img/bird-background.jpg) 0 0 repeat;
}
p { 
    font-size: 16px;
    font-family: 'Cardo', serif;
    line-height: 22px;
    color: black;
}
h2, #best-fits ul li, th, td, .slider-label, #by-me {
    font-family: 'Cardo', serif;
}
h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 48px;
    text-shadow: 1px 1px 2px darkgray;
    margin-top: 10px;
}
h2 {
    font-size: 1.5em;
    text-transform: uppercase;
}
a {
    color: #339BB9;
}
.display-none {
    display: none;
}

/* Page elements */
.container {
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: white;
    padding: 10px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding;
    background-clip: padding-box;
    border: 20px solid rgba(0, 0, 0, 0.5);
}
#options {
    margin: 10px 0 20px 0;
}
#country, #metric, #by-me {
    display: inline;
    float: right;
    margin-left: 30px;
}
#by-me { 
	font-size: 16px;
}
#by-me a { 
  text-decoration: underline;	
}

img {
    vertical-align: middle;
    border: 2px solid rgba(0, 0, 0, 0.5);
    margin-left: 5px;
}
img #self-promotion { 
    margin-right: 20px;    
}
#intro {
    margin-top: 10px;
    margin-bottom: 5px;
}
.divider {
    border-bottom: 1px solid #B7CBD5;
    margin: 8px 0;
}
#shop-buttons {
    margin-top: 5px;
}

/* Chart related styles */
#title, #subtitle {
    font-family: 'Cardo', serif;
}
#title {
    font-size: 1em;
    text-transform: uppercase;
    font-weight: bold;
}
#subtitle {
    font-size: 0.8em;
}
#chart-results {
    margin-right: 10px;
}
#vis {
    min-height: 500px;
    margin-left: 20px;
}
#vis div {
    font: 10px sans-serif;
    background-color: steelblue;
    text-align: right;
    padding: 3px;
    margin: 1px;
    color: white;
}
#blurb {
    border-bottom: 1px solid #e2e2e2;
    margin-bottom: 10px;
}
line {
    stroke: black;
}
text {
    font-family: 'Cardo', serif;
    font-size: 9pt;
}
path {
    position: relative;
    left: 0px;
    top: 0px;
    z-index: -1;
    stroke: #e2e2e2;
    fill: none;
}
path:hover, path.highlight {
    z-index: 1000 ! important;
    stroke-width: 2;
    padding: 1;
}
path.mysize, path.highlight.mysize {
    z-index: 1000 ! important;
    stroke: black;
    stroke-width: 2px;
}
.axis {
    stroke-width: 0.8;
    stroke: #000 ! important;
    z-index: 1000 ! important;
}
.xTicks, .yTicks {
    stroke-width: 0.6;
    stroke: #000;
}
.yLabel {
    font-size: 0.7em;
    margin-right: 5px;
}
.size-indicator {
    font-size: 0.6em;
    font-weight: bold;
}
.highlight {
    stroke-width: 3px;
    z-index: 1000;
}

/* UK colours */

.LKB.highlight {
    stroke: rgb(166, 206, 227);
}
.TOP.highlight {
    stroke: #1F78B4;
}
.REI.highlight {
    stroke: #33CC99;
}
.MKS.highlight {
    stroke: rgb(51, 160, 44);
}
.PHE.highlight {
    stroke: rgb(51, 160, 44);
}
.WHI.highlight {
    stroke: rgb(251, 154, 153);
}
.BAN.highlight {
    stroke: rgb(227, 26, 28);
}
.ZAR.highlight {
    stroke: rgb(253, 191, 111);
}
.OAS.highlight {
    stroke: rgb(255, 127, 0);
}
.WAR.highlight {
    stroke: #B235DB;
}
.FRN.highlight {
    stroke: rgb(106, 61, 154);
}
.JAE.highlight {
    stroke: #FFCC00;
}
.KNM.highlight {
    stroke: #00BBD6;
}
.NEX.highlight {
    stroke: #e25f82;
}
.ASO.highlight {
    stroke: #33AD33;
}
.MON.highlight {
    stroke: #4049F4;
}
.DOP.highlight {
    stroke: #4049F4;
}
.NWL.highlight {
    stroke: orangeRed;
}
.VER.highlight {
	stroke: #EC008C;
}
.HNM.highlight {
	stroke: #CD2026;
}
/* US colours */
.HOL.highlight {
    stroke: #1F78B4;
}
.GAP.highlight {
    stroke: #33CC99;
}
.ANN.highlight {
    stroke: rgb(51, 160, 44);
}
.JCW.highlight {
    stroke: rgb(251, 154, 153);
}
.OLD.highlight {
    stroke: rgb(227, 26, 28);
}
.HNM.highlight {
    stroke: rgb(253, 191, 111);
}
.ABF.highlight {
    stroke: rgb(255, 127, 0);
}
.EXP.highlight {
    stroke: #B235DB;    
}
.FOR.highlight {
    stroke: rgb(106, 61, 154);    
}
.AME.highlight {
    stroke: #FFCC00;    
}
.ANT.highlight {
    stroke: #00BBD6;    
}
.URB.highlight {
    stroke: #e25f82;    
}
.NYC.highlight {
    stroke: #33AD33;    
}
.TLM.highlight {
    stroke: #4049F4;    
}

/* Social button styles */
#social { 
    margin-top: 10px;
}

/* Slider styles */
.ui-slider {
    display: inline-block;
}
.ui-slider-horizontal {
    height: 0.4em ! important;
    top: -.2em ! important;
    margin-left: -.1em ! important;
}
.slider a.ui-state-active, .slider a.ui-state-focus {
    outline-style: none ! important;
}
.ui-slider .ui-slider-handle {
    height: 0.7em ! important;
    width: 0.7em ! important;
    top: -.2em ! important;
    margin-left: -.1em ! important;
}
.slider-label { 
    font-size: 1.2em;	
}
/* Sidebar styles */

#measuring-instructions {
    padding-top: 5px;
    margin-top: 10px;
}
#shops {
    border-top: 1px solid #e2e2e2;
    padding-top: 10px;
    margin-top: 15px;
}

/* Results table */

.best-size {
    background-color: #f3e1e2;
    padding: 0.3em;
    margin: 0.3em;
}
#best-fits {
    margin: 10px 5px;
}
#best-fits ul {
    margin: 10px 0;
    list-style: none;
    line-height: 2em ! important;
    font-size: 14px;
}
li { 
    line-height: 2em ! important;
}
#fit-intro-text {
    margin-top: 10px;
}
#table-results { 
    margin: 10px 0px;
} 
#results-table {
    width: 100%;    
    border-spacing: 0;
}
#results-table thead {
    padding: 10px;
    text-shadow: 0 1px 0 #EEE;
    background-color: #D2DCE2;   
    background: #CCC;
    background: -moz-linear-gradient(top, #E8E8E8 0%, #CCC 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E8E8E8), color-stop(100%,#CCC));
    background: -webkit-linear-gradient(top, #E8E8E8 0%,#CCC 100%);
    background: -o-linear-gradient(top, #E8E8E8 0%,#CCC 100%);
    background: -ms-linear-gradient(top, #E8E8E8 0%,#CCC 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8e8e8', endColorstr='#cccccc',GradientType=0 );
    background: linear-gradient(top, #E8E8E8 0%,#CCC 100%);
    border: 1px solid #9F9F9F;
}
#results-table td, #results-table th { 
    padding: 5px;  
    text-align: center;
}
#results-table td {
    border-bottom: 1px solid #CCC;
    border-right: 1px solid #CCC;
}
#results-table th {
    border-top: 1px solid #9F9F9F;
    border-bottom: 1px solid #9F9F9F;
    border-right: 1px solid #9F9F9F;
}
#results-table th.first {
    border-left: 1px solid #9F9F9F;
}
#results-table td {     
    width: 20%;
}
#results-table td.first {
    width: 40%;
    border-left: 1px solid #CCC;
}
.second-choice { 
    font-size: 0.7em;    
}

/********************************************
Some specific styles for responsive behaviour.
********************************************/

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    h1 {
        font-size: 2.0em;
    }
    #bust-slider-container, #waist-slider-container { 
        margin-bottom: 15px;    
    }
    #options { 
        text-align: left;
        margin-top: 15px;
        margin-bottom: 5px;
    }
    #by-me {
        display: none;
    }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
    #bust-slider-container, #waist-slider-container { 
        margin-bottom: 15px;    
    }   
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    #options img {
        display: none;
    } 
}

#shop-buttons a.btn { 
  margin-top: 3px;
  margin-right: 3px;
}

.btn-shop {
  background-color: #d5ada3;
  background-image: -moz-linear-gradient(top, #d5a6a3, #d5b7a3);
  background-image: -ms-linear-gradient(top, #d5a6a3, #d5b7a3);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#d5a6a3), to(#d5b7a3));
  background-image: -webkit-linear-gradient(top, #d5a6a3, #d5b7a3);
  background-image: -o-linear-gradient(top, #d5a6a3, #d5b7a3);
  background-image: linear-gradient(top, #d5a6a3, #d5b7a3);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d5a6a3', endColorstr='#d5b7a3', GradientType=0);
  border-color: #d5b7a3 #d5b7a3 #bd8d6e;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-shop:hover,
.btn-shop:active,
.btn-shop.active,
.btn-shop.disabled,
.btn-shop[disabled] {
  background-color: #d5b7a3;
}
.btn-shop:active, .btn-shop.active {
  background-color: #c59b80 \9;
}

/* Flag icons, if used */
.flag {
	width: 25px;
	height: 15px;
	background:url(/img/flags.png) no-repeat
}
.flag.flag-au {background-position: -25px 0}
.flag.flag-fr {background-position: -50px 0}
.flag.flag-gb {background-position: 0 -15px}
.flag.flag-us {background-position: -25px -15px}