
/* Main content wrapper and content wrapper rules */

#wrapper
{
	overflow-x: hidden;
    width: 100%;
    height: 100%;
}

#mainContentWrapper
{
	width: 999px;
	background-color: #000;
	margin: auto;
	overflow-x: hidden;
}

#contentWrapper
{
	width: 999px;
	background-color: #fff;
	margin: auto;
	overflow-x: hidden;
}

header
{
	background-color: #00a2ff;
}




/*
    New Header rules
    Author: Erno Tuovinen
    Created: 3.5.2013
    Modified: 3.5.2013
*/

#headerWrapper
{
    background: #00a2ff;
}

#headerWrapper header
{
    position: relative;
    height: 80px;
    width: 1000px;
    margin: 0 auto;
    clear: both;
}

#mainLogo
{
    float: left;
    clear: left;
    margin-top: 15px;
}

#headerSome
{
    float: left;
    margin: 12px 0 0 126px;
}

#headerSome ul li
{
    display: inline;
    margin: 0 7px 0 0;
}

#headerSome ul li:hover
{
    opacity: 0.5;
}

#secondaryLogo
{
    float: right;
    width: 339px;
    height: 43px;
    margin: 17px 0 0 0;
}



/* Header area OLD rules */
/*#headerTopWrapper
{
	width: 999px;
	height: 100%;
	margin: 5px auto;
}

#socialMedia
{
	width: 160px;
	height: 100%;
}

#socialMedia ul
{
	width: 999px;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

#socialMedia ul li
{
	display: inline-block;
	margin-left: 5px;
}

#socialMedia ul li:hover
{
    opacity: 0.5;
}


#headerSearch
{
	width: 200px;
	height: 100%;

}

#headerSearch form
{
	width: 100%;
	text-align: right;
}

#headerSearch form input
{
	margin-top: 4px;
	background-color: #1a1c1e;
	border: none;
}

#dropDown
{
	width: 20px;
	height: 100%;
}

#dropDown span
{
	display: block;
	width: 100%;
	text-align: right;
	padding: 0;
	margin: 0;
}



#headerBottomWrapper
{
	width: 100%;
	height: 100%;
	margin: 20px auto 0;
}


#headerBrand
{
	width: 499px;
	height: 100%;
}

#headerBrand a
{
	display: block;
	width: 100%;
	text-align: right;
}

#headerLogo
{
	width: 499px;
	height: 100%;
	margin: 0 0 15px 0;
}

#headerLogo a
{
	display: block;
	width: 100%;
	text-align: left;
}*/



/* Header diveceScoreInfo rules*/

.deviceScoreInfo
{
    position: relative;
    float: left;
    top: 0;
    width: 243px;
    height: 84px;
    background-color: rgba(218,218,218,0.8);
    margin-right: 9px;
}

.deviceScoreInfo.last
{
    margin-right: 0;
}

.deviceScoreInfo h2:nth-of-type(1)
{

    display: block;
    float: left;
    color: #00a3ff;
    width: 163px;
    height: 10px;
    margin: 5px;
    text-align: right;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    height: 48px;
}



.deviceScoreInfo h3:nth-of-type(1)
{

    display: block;
    float: left;
    color: #00a3ff;
    width: 163px;
    height: 10px;
    margin: 0 5px 5px 5px;
    text-align: right;
    font-size: 16px;
    text-transform: uppercase;
}




/* Device score info spesific to Operator page*/


.operatorScoreInfo
{
    float: right;
    top: 0;
    width: 246px;
    height: 60px;
    background-color: rgba(218,218,218,0.8);
    margin: 5px;
    text-align: right;
}


.operatorScoreInfo h2:nth-of-type(1)
{
    display: block;
    float: left;
    color: #00a3ff;
    width: 240px;
    height: 10px;
    margin: 5px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    overflow: hidden;
    height: 23px;
}


.operatorScoreInfo h3:nth-of-type(1)
{
    display: block;
    float: left;
    color: #00a3ff;
    width: 163px;
    height: 10px;
    margin: -5px 5px 5px 42px;
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
}





/* Navigation */

nav
{
	width: 100%;
	background-color: #fff;
	text-transform: uppercase;
    margin: 20px 0 0 0;
}

nav ul
{
	list-style: none;
	text-align: left;
    width: 999px;
	margin: auto;
	padding: 10px;
	text-align: center;
    background-color: rgba(218,218,218,1);
    padding: 0 !important;
}

nav ul li
{
	display: inline-block;
}


nav a
{
	display: inline-block;
	width: auto;
    /*margin-top: 10px;*/
	text-align: left;
    text-decoration: none;
    color: #000;
    padding: 5px 30px 5px 10px;
}

nav a:hover
{
    background-color: #00a3ff;
    color: #222;
}


nav a:active
{
   color: red;
}

.selected
{
    display: inline-block;
    width: auto;
    text-align: left;
    text-decoration: none;
    padding: 5px 30px 5px 10px;
    background-color: #00a3ff;
    color: #222;
}






/* Middlecontent area */

#searchbox
{
    line-height: 72px;
}
#searchbox input[type=text]
{
    width: 200px;
    height: 40px;
    text-transform: uppercase;
    font-size: 16px;
    display: block;
    float: left;
    margin-top: 6px;
}

#searchbox input[type=submit]
{
    width: 130px;
    height: 46px;
    background-color: #dadada;
    outline: none;
    border: 0;
    text-transform: uppercase;
    font-size: 16px;
}

#searchbox input[type="submit"]:hover
{
    color: #fff;
    background-color: #00BCFF;
}

#searchbox #searchResult
{
    display: block;
    float: left;
    font-size: 18px;
    padding-left: 20px;
    text-decoration: underline;
    height: 72px;
    line-height: 24px;
}








/* Bottomcontent area */


#selectionWrapper
{
    position: relative;
    width: 999px;
    height: 80px;
    text-align: left;
    margin: 0 0 80px 0;
}

#selectionWrapper section p
{
    margin: 0 0 0 0;
    line-height: 36px;
    font-size: 22px;
}

[data-indicator="overall"]
{
    position: relative;
    width: 252px;
    height: 84px;
    text-transform: uppercase;
}

[data-indicator="game"]
{
    position: relative;
    width: 252px;
    height: 84px;
    text-transform: uppercase;
}

[data-indicator="web"]
{
    position: relative;
    width: 252px;
    height: 84px;
    text-transform: uppercase;
}

[data-indicator="ui"]
{
    position: relative;
    width: 243px;
    height: 84px;
    text-transform: uppercase;
}



#bottomContentWrapper section
{
    position: relative;
    width: 999px;
    text-align: center;
}


#bottomContentWrapper section h1
{
    text-transform: uppercase;
    font-size: 3em;
    font-weight: 700;
    text-align: left;
    line-height: 27px;
    margin: 48px 0 0 0;
}

#bottomContentWrapper section h1 span small
{
    font-size: 12px;
}

#bottomContentWrapper section footer
{
    position: relative;
    bottom: 0;
    width: 999px;
    height: 43px;
    background-color: #dadada;
}




#bottomContentWrapper section footer div
{
    float: right;
    width: 25%;
    height: 42px;
    text-transform: uppercase;
}

#bottomContentWrapper section footer div a
{
    display: block;
    width: 249px;
    height: 42px;
    line-height: 41px;
    font-size: 18px;
    color: #000;
    margin: 0;
}

#bottomContentWrapper section footer div a:hover
{
   background-color: #00BCFF;
   color: #fff;
}



#bottomContentWrapper section footer div:nth-child(1n+2)
{
    margin: 0 0 0 0; /*IF you need to separete sub navigation divs*/
}



#bottomContentWrapper section:nth-child(1n+0)
{
    margin: 4px 0 15px 0; /* Phones and Tables bottom margin to seperate them*/
}




[data-indicator="phones"]
{

}

[data-indicator="tablets"]
{

}


/*.grayOverlay
{
    position: relative;
    top: -83px;
    width: 329px;
    height: 79px;
    background-color: rgba(218,218,218, 0.7);
}*/

.sublinkSelected
{
    opacity: 0.5;
}


/* Table help classes*/


.score-slide
{
    clear: both;
    width: 400px;
    height: 20px;
    background-color: #00a2ff;
}

.score-slide div.percentage
{
    float: left;
    text-align: left;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    color: #000;
}

.score-slide div.score
{
    float: right;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 0;
    font-size: 18px;
    color: #000;
}

.score-slide div.percentage.zero
{
    background-color: rgba(255, 255, 255, 0);
}

.score-slide div.percentage.first
{
    background-color: rgba(255, 255, 255, 0.25);
}

.score-slide div.percentage.median
{
    background-color: rgba(255, 255, 255, 0.5);
}

.score-slide div.percentage.last
{
    background-color: rgba(255, 255, 255, 0.75);
}

.score-slide p
{
    position: relative;
    top: -2px;
    bottom: 0;
    left: 5px;
    margin: 0;
}


/*.score-slide
{
    float: left;
    width: 360px;
    max-width: 360px;
    height: 25px;
    background-color: #ffffff;
    overflow: hidden;
}


.score-slide span:nth-of-type(1)
{
    display: inline-block;
    float: left;
    height: 25px;
    max-width: 360px;
}


.scoreWrap
{
    float: left;
    clear: right;
    width: 100%;
    max-width: 40px;
    height: 25px;
    background-color: #ffffff;
    overflow: hidden;
}


.scoreWrap span:nth-of-type(2)
{
    display: inline-block;
    float: left;
    height: 25px;
    margin: 0 0 0 5px;
}
*/















/* Footer area*/


#footer-shadow
{
	width: 100%;
	min-width: 1019px;
	background: url(/images/footer_shadow.png) repeat-x;
}


#bottomWarapper
{
	color: #787979;
}

#footerBox1 ul li
{
	color: #FFF;
}

#footerBox1 ul li a
{
	color: #FFF;
}


#footerBox2 ul li a
{
	color: #787979;
}


#footerContainer
{
	width: 100%;
	background-color: #1a1c1e;
}


#footerContent
{
	width: 999px;
	margin: auto;
	overflow-x: hidden;
}

#footerContent ul
{
	width: 100%;
	text-align: right;
	padding: 0;
	margin: 0;
}

#footerContent ul li
{
	display: inline-block;

}

#footerBox1 ul
{
    position: relative;
    top: 14px;
}


#footerBox1
{
	width: 100%;
	height: 40px;
	text-align: right;
	padding-top: 4px;
    font-size: 11px;
}

#footerBox2
{
	width: 499px;
	height: 20px;
	text-align: right;
	margin-top: 4px;
    font-size: 11px;
}

#footerBox3
{
	width: 499px;
	height: 20px;
	display: table-cell; /*FireFox text-align right fix*/
	text-align: right;
    font-size: 11px;
}


#footerBox3 span
{
	display: block;
	width: 100%;
	margin-top: 4px;
}


#bottomWarapper
{
	width: 100%;
    margin: 0 0 10px 0;
}


#footerBox2 ul
{
	text-align: left;
}

#footerBox2 ul li
{
	display: inline-block;
}


#footerContent > hr
{
	margin: 8px 0 0 0;
}

/* Multi-use */
span.overlay
{
    width: 100%;
    height: 171px;
    position: relative;
    left: 0;
    top: -171px;
    z-index: 10;
    display: block;
}


.logoHolder
{
    width: 90px;
    height: 22px;
    float: left;
    clear: left;
    margin: 0 0 5px 0;
}








/* BEST SOMETHING BALL SMALL MEDIUM LARGE CLASSES*/

.bestDeviceRankFirstSmall
{
    display: block;
    float: left;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #00a3ff;
    color: #000;
    text-align: center;
    font-weight: lighter;
    font-size: 21px;
    padding: 0px;
}


.bestDeviceRankSecondSmall
{
    display: block;
    float: left;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #999999;
    color: #000;
    text-align: center;
    font-weight: lighter;
    font-size: 21px;
    padding: 0px;
}

.bestDeviceRankThirdSmall
{
    display: block;
    float: left;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #1a1c1e;
    color: #FFF;
    text-align: center;
    font-weight: lighter;
    font-size: 21px;
    padding: 0px;
}




.bestDeviceRankFirstMedium
{
   display: block;
    float: left;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #00a3ff;
    color: #000;
    text-align: center;
    font-weight: lighter;
    font-size: 24px;
    padding: 6px;
    margin: 21px 12px;
}


.bestDeviceRankSecondMedium
{
    display: block;
    float: left;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #999999;
    color: #000;
    text-align: center;
    font-weight: lighter;
    font-size: 24px;
    padding: 6px;
}

.bestDeviceRankThirdMedium
{
    display: block;
    float: left;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #1a1c1e;
    color: #FFF;
    text-align: center;
    font-weight: lighter;
    font-size: 24px;
    padding: 6px;
}



.bestDeviceRankFirstLarge
{
    display: block;
    float: left;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #00a3ff;
    color: #000;
    text-align: center;
    font-weight: lighter;
    font-size: 28px;
    padding: 12px;
}


.bestDeviceRankSecondLarge
{
    display: block;
    float: left;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #999999;
    color: #000;
    text-align: center;
    font-weight: lighter;
    font-size: 28px;
    padding: 12px;
}

.bestDeviceRankThirdLarge
{
    display: block;
    float: left;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    background-color: #1a1c1e;
    color: #FFF;
    text-align: center;
    font-weight: lighter;
    font-size: 28px;
    padding: 12px;
}



/*RANK H* Size and dimension helper class */


.h4ForLargeBall
{
    display: block;
    font-size: 26px;
    margin: -5px -7px;
    padding: 0;
}



.h4ForMediumBall
{
    display: block;
    font-size: 38px;
    margin: -12px;
}


.h3ForLargeBall
{
	display: block;
	font-size: 38px;
	margin: -12px;
	padding: 0;
}








ul.devicesList li,
ul.operatorsList li
{
    float: left;
    width: 108px;
    height: 168px;
    border: solid 1px #222;
    margin: 7px;
    padding-top: 5px;
}

ul.devicesList li:last-of-type,
ul.operatorsList li:last-of-type
{
    margin-right: 0;
}

ul.devicesList li div,
ul.operatorsList div
{
    position: relative;
}

ul.devicesList li div img,
ul.operatorsList li div img
{
    position: absolute;
    left: 4px;
    z-index: 1;
}

ul.devicesList li span,
ul.operatorsList li span
{
    position: absolute;
    z-index: 10;
    width: 108px;
    top: 120px;
    height: 24px;
    line-height: 24px;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    background-color: rgba(5,165,255,0.8);
    overflow: hidden;
}

ul.operatorsList li
{
    width: 243px;
    height: 238px;
}

ul.operatorsList li span
{
    width: 243px;
    top: 200px;
}





/* GENERAL Help classes*/


.hrBlack
{
    border-width: 0;
    background-color: #000;
    height: 1px;
    width: 100%;
    margin: 0;
    padding: 0;
}

.boldText
{
    font-weight: bold;
}

.uppercaseText
 {
    text-transform: uppercase;
 }

.zIndexBottom
{
    z-index: 99;
}

.zIndexTop
{
    z-index: 1;
}



.ui-widget
{
    width: 161px !important;
}





/* AJAX overlay during load */
#ajax-overlay
{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 100;
}

#ajax-overlay p
{
    display: block;
    width: 160px;
    margin: auto;
    padding-top: 200px;
    text-align: center;
    color: #fff;
}


/* Rank ball color change*/

.h4White
{
	color: #fff;
}

.h4Black
{
	color: #fff;
}



/* Footer*/

.hrLighGray
{
	background-color:rgb(145, 145, 145);
}


/*Operator page*/

.backgroundWhite
{
	background-color: #fff !important;
}


.flexbox
{
	display: box;
	display: -moz-box;
	display: -webkit-box;
	display: -ms-flexbox;
}



/*Box Flex order*/

.flexBox0
{
	box-flex: 0;
	-moz-box-flex: 0;
	-webkit-box-flex: 0;
	-ms-flex-order: 0;
}



.flexBox1
{
	box-flex: 1;
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
}

.flexBox2
{
	box-flex: 2;
	-moz-box-flex: 2;
	-webkit-box-flex: 2;
}

.flexBox3
{
	box-flex: 3;
	-moz-box-flex: 3;
	-webkit-box-flex: 3;
}

.flexBox4
{
	box-flex: 4;
	-moz-box-flex: 4;
	-webkit-box-flex: 4;
}


.last {
    margin-right: 0;
}





/*IE Flex Helpper classes*/
/*ATTN! ALL IE Felx rules has to have/or inherit display: -ms-flexbox; */

.IE-Flex
{
	-ms-flex: 1;	
}

.IE-Flex-NoFlex
{
	-ms-flex: 0;	
}









/*Box Orient*/


.orientVertical
{
	box-orient: vertical;
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
	-ms-flex-direction: column;
}

.orientHorizontal
{
	box-orient: horizontal;
	-moz-box-orient: horizontal;
	-webkit-box-orient: horizontal;
	-ms-flex-direction: row;
}




/* box-align */

.boxStretch
{
	box-align: stretch;
	-moz-box-align: stretch;
	-webkit-box-align: stretch;	
}

.boxAlignRight
{
	box-align: start;
	-moz-box-align: start;
	-webkit-box-align: start;
	-ms-flex-align: start;
}


.boxAlignleft
{
	box-align: end;
	-moz-box-align: end;
	-webkit-box-align: end;
	-ms-flex-align: end;
}

.boxAligncenter
{
	box-align: center;
	-moz-box-align: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
}





/*Box-Pack*/

.boxPackMain 
{
	box-pack: justify;
	-moz-box-pack: justify;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
}

.packBoxCenter 
{
	box-pack: center;
	-moz-box-pack: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
}

.packBoxStart
{
	box-pack: start;
	-moz-box-pack: start;
	-webkit-box-pack: start;
	-ms-flex-pack: start;

}

.packBoxEnd
{
	box-pack: end;
	-moz-box-pack: end;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
}





/* CLEAR FLOATS */

.group:before,
.group:after 
{
	content: "";
	display: table;
}
.group:after 
{
	clear: both;
}
.group 
{
	zoom: 1; /* IE6&7 */
}

/*! fancyBox v2.1.4 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
	padding: 0;
	margin: 0;
	border: 0;
	outline: none;
	vertical-align: top;
}

.fancybox-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8020;
}

.fancybox-skin {
	position: relative;
	background: #f9f9f9;
	color: #444;
	text-shadow: none;
	-webkit-border-radius: 4px;
	   -moz-border-radius: 4px;
	        border-radius: 4px;
}

.fancybox-opened {
	z-index: 8030;
}

.fancybox-opened .fancybox-skin {
	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	   -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
	position: relative;
}

.fancybox-inner {
	overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
	-webkit-overflow-scrolling: touch;
}

.fancybox-error {
	color: #444;
	font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	margin: 0;
	padding: 15px;
	white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
	display: block;
	width: 100%;
	height: 100%;
}

.fancybox-image {
	max-width: 100%;
	max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
	background-image: url('fancybox_sprite.png');
}

#fancybox-loading {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -22px;
	margin-left: -22px;
	background-position: 0 -108px;
	opacity: 0.8;
	cursor: pointer;
	z-index: 8060;
}

#fancybox-loading div {
	width: 44px;
	height: 44px;
	background: url('fancybox_loading.gif') center center no-repeat;
}

.fancybox-close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;
}

.fancybox-nav {
	position: absolute;
	top: 0;
	width: 40%;
	height: 100%;
	cursor: pointer;
	text-decoration: none;
	background: transparent url('blank.gif'); /* helps IE */
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	z-index: 8040;
}

.fancybox-prev {
	left: 0;
}

.fancybox-next {
	right: 0;
}

.fancybox-nav span {
	position: absolute;
	top: 50%;
	width: 36px;
	height: 34px;
	margin-top: -18px;
	cursor: pointer;
	z-index: 8040;
	visibility: hidden;
}

.fancybox-prev span {
	left: 10px;
	background-position: 0 -36px;
}

.fancybox-next span {
	right: 10px;
	background-position: 0 -72px;
}

.fancybox-nav:hover span {
	visibility: visible;
}

.fancybox-tmp {
	position: absolute;
	top: -99999px;
	left: -99999px;
	visibility: hidden;
	max-width: 99999px;
	max-height: 99999px;
	overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
	overflow: hidden;
}

.fancybox-overlay {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
	z-index: 8010;
	background: url('fancybox_overlay.png');
}

.fancybox-overlay-fixed {
	position: fixed;
	bottom: 0;
	right: 0;
}

.fancybox-lock .fancybox-overlay {
	overflow: auto;
	overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
	visibility: hidden;
	font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
	position: relative;
	text-shadow: none;
	z-index: 8050;
}

.fancybox-opened .fancybox-title {
	visibility: visible;
}

.fancybox-title-float-wrap {
	position: absolute;
	bottom: 0;
	right: 50%;
	margin-bottom: -35px;
	z-index: 8050;
	text-align: center;
}

.fancybox-title-float-wrap .child {
	display: inline-block;
	margin-right: -100%;
	padding: 2px 20px;
	background: transparent; /* Fallback for web browsers that doesn't support RGBa */
	background: rgba(0, 0, 0, 0.8);
	-webkit-border-radius: 15px;
	   -moz-border-radius: 15px;
	        border-radius: 15px;
	text-shadow: 0 1px 2px #222;
	color: #FFF;
	font-weight: bold;
	line-height: 24px;
	white-space: nowrap;
}

.fancybox-title-outside-wrap {
	position: relative;
	margin-top: 10px;
	color: #fff;
}

.fancybox-title-inside-wrap {
	padding-top: 10px;
}

.fancybox-title-over-wrap {
	position: absolute;
	bottom: 0;
	left: 0;
	color: #fff;
	padding: 10px;
	background: #000;
	background: rgba(0, 0, 0, .8);
}

/* Selectmenu
----------------------------------*/
.ui-selectmenu { display: block; display: inline-block; position: relative; height: 40px; vertical-align: middle; text-decoration: none; overflow: hidden; zoom: 1; }
.ui-selectmenu-icon { position:absolute; right:6px; margin-top:-8px; top: 50%; }
.ui-selectmenu-menu { padding:0; margin:0; position:absolute; top: 0; display: none; z-index: 99 !important;} /* z-index: 1005 to make selectmenu work with dialog */
.ui-selectmenu-menu  ul { padding:0; margin:0; list-style:none; position: relative; overflow: auto; overflow-y: auto ; overflow-x: hidden; -webkit-overflow-scrolling: touch;}
.ui-selectmenu-open { display: block; }
ul.ui-selectmenu-menu-popup { margin-top: -1px; }
.ui-selectmenu-menu li { padding:0; margin:0; display: block; border-right-width: 0 !important; border-left-width: 0 !important; }
.ui-selectmenu-menu li a,.ui-selectmenu-status {height: 40px; background-color: rgba(0,163,255,0.8); text-align: left; font-size: 15px; line-height: 100%; display: block; padding: 0 0 0 5px; vertical-align: middle; outline:none; text-decoration:none; font-weight: normal; color: #212121 }
.ui-selectmenu-menu li.ui-state-disabled a, .ui-state-disabled { cursor: default; }
.ui-selectmenu-menu li.ui-selectmenu-hasIcon a,
.ui-selectmenu-hasIcon .ui-selectmenu-status { padding-left: 20px; position: relative; margin-left: 5px; }
.ui-selectmenu-menu li .ui-icon, .ui-selectmenu-status .ui-icon { position: absolute; top: 1em; margin-top: -8px; left: 0; }
.ui-selectmenu-status { line-height: 1.4em; }
.ui-selectmenu-menu li span,.ui-selectmenu-status span { display:block; margin-bottom: .2em; }
.ui-selectmenu-menu li .ui-selectmenu-item-header { font-weight: bold; }
.ui-selectmenu-menu li .ui-selectmenu-item-footer { opacity: .8; }
/* for optgroups */
.ui-selectmenu-menu .ui-selectmenu-group { font-size: 1em; }
.ui-selectmenu-menu .ui-selectmenu-group .ui-selectmenu-group-label { line-height: 1.4em; display:block; padding: .6em .5em 0; font-weight: bold; }
.ui-selectmenu-menu .ui-selectmenu-group ul { margin: 0; padding: 0; }
/* IE6 workaround (dotted transparent borders) */
* html .ui-selectmenu-menu li { border-color: pink; filter:chroma(color=pink); width:100%; }
* html .ui-selectmenu-menu li a { position: relative }
/* IE7 workaround (opacity disabled) */
*+html .ui-state-disabled, *+html .ui-state-disabled a { color: silver; }

/*! normalize.css v1.0.1 | MIT License | git.io/normalize */
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
audio:not([controls]){display:none;height:0}
[hidden]{display:none}
html{font-size:100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
html,button,input,select,textarea{font-family:sans-serif}
body{margin:0}
a:focus{outline:thin dotted}
a:active,a:hover{outline:0}
h1{font-size:2em;margin:.67em 0}
h2{font-size:1.5em;margin:.83em 0}
h3{font-size:1.17em;margin:1em 0}
h4{font-size:1em;margin:1.33em 0}
h5{font-size:.83em;margin:1.67em 0}
h6{font-size:.75em;margin:2.33em 0}
abbr[title]{border-bottom:1px dotted}
b,strong{font-weight:bold}
blockquote{margin:1em 40px}
dfn{font-style:italic}
mark{background:#ff0;color:#000}
p,pre{margin:1em 0}
code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}
pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}
q{quotes:none}
q:before,q:after{content:'';content:none}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sup{top:-0.5em}
sub{bottom:-0.25em}
dl,menu,ol,ul{margin:1em 0}
dd{margin:0 0 0 40px}
menu,ol,ul{padding:0 0 0 40px}
nav ul,nav ol{list-style:none;list-style-image:none}
img{border:0;-ms-interpolation-mode:bicubic}
svg:not(:root){overflow:hidden}
figure{margin:0}
form{margin:0}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
legend{border:0;padding:0;white-space:normal;*margin-left:-7px}
button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}
button,input{line-height:normal}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}
button[disabled],input[disabled]{cursor:default}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
textarea{overflow:auto;vertical-align:top}
table{border-collapse:collapse;border-spacing:0}

*
{
	margin: 0;
	padding: 0;
}

a 
{
	outline: none !important;
}

a:active
{
	color: #fff !important;
}

:focus
{
	outline: 0;
}

:active
{
	outline: 0;
}

body
{
	display: block;
	background-color: #FFF;
	font: lighter 13px 'Open Sans', Helvetica;
	color: #000;
}

h1,h2,h3,h4,h5,h6
{
	font-weight: lighter;
}

a
{
	text-decoration: none;
}


ol, ul
{
	list-style: none;
}


hr
{
	border-width: 0;
	background-color: #fff;
	height: 1px;
	width: 100%;
	margin: 0;
	padding: 0;
}

a img
{
	display: inline;
	border-right: 0;
	z-index: auto;
}

/*** adding the class sf-navbar in addition to sf-menu creates an all-horizontal nav-bar menu ***/
.sf-navbar {
	background: #BDD2FF;
	position: relative;
	margin-bottom: 5em;
}
/* provide background colour for submenu strip */
/* you should just set the menu's container bg colour rather than use pseudo-elements */
.sf-navbar:before {
	content: '';
	position: absolute;
	left: 0;
	z-index: -1;
	background-color: #BDD2FF;
	height: 200%;
	width: 100%;
}
.sf-navbar ul {
	box-shadow: none;
}
.sf-navbar li {
	background: #AABDE6;
	position: static;
}
.sf-navbar > li > a,
.sf-navbar > li > ul > li > a {
	border: none;
}
.sf-navbar > li > ul {
	min-width: 36em; /* set this to whatever suits your design */
}
.sf-navbar ul li {
	background: #BDD2FF;
	position: relative;
}
.sf-navbar ul ul {
	left: 0;
	top: 100%;
}
.sf-navbar ul ul li {
	width: 100%;
}
.sf-navbar > li > ul > li {
	float: left;
}
.sf-navbar li.current {
	background: #BDD2FF;
}
.sf-navbar li:hover,
.sf-navbar li.sfHover,
.sf-navbar ul li.current {
	background: #BDD2FF;
}
.sf-navbar ul li:hover,
.sf-navbar ul li.sfHover,
.sf-navbar ul ul li {
	background: #D1DFFF;
}
.sf-navbar ul ul li:hover,
.sf-navbar ul ul li.sfHover,
.sf-navbar ul ul li.current {
	background: #E6EEFF;
}
.sf-navbar ul li.current > a {
	font-weight: bold;
}

/*** point all arrows down ***/
.sf-arrows.sf-navbar ul .sf-with-ul:after {
	margin-top: -3px;
	margin-right: 0;
	border-color: transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}

.sf-arrows.sf-navbar ul > li > .sf-with-ul:focus:after,
.sf-arrows.sf-navbar ul > li:hover > .sf-with-ul:after,
.sf-arrows.sf-navbar ul > .sfHover > .sf-with-ul:after {
	border-color: transparent;
	border-top-color: white;
}


/* adding sf-vertical class in addition to sf-menu creates a vertical menu */
/* eg. <ul class="sf-menu sf-vertical"> ... */
.sf-vertical {
  width: 12em;
  /* If you want the width of the closed menu to expand to its
  widest top-level menu item (like its "Supersubs" submenus do),
  replace the width rule above with the following two rules. */

  /*
  min-width: 12em;
  *width: 12em;
  */
}
.sf-vertical ul {
	left:	100%;
	top: 0;
}
.sf-vertical > li {
  float: none;
}
.sf-vertical li {
  width: 100%;
}

/*** alter arrow directions ***/
.sf-vertical.sf-arrows > li > .sf-with-ul:after {
  margin-top: -5px;
  margin-right: -3px;
  border-color: transparent;
  border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
  border-left-color: rgba(255,255,255,.5);
}
.sf-vertical.sf-arrows li > .sf-with-ul:focus:after,
.sf-vertical.sf-arrows li:hover > .sf-with-ul:after,
.sf-vertical.sf-arrows .sfHover > .sf-with-ul:after {
  border-left-color: white;
}


/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}


/*** DEMO SKIN ***/
.sf-menu {
	float: left;
	margin-bottom: 1em;
}
.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	min-width: 12em; /* allow long menu items to determine submenu width */
	*width: 12em; /* no auto sub width for IE7, see white-space comment below */
	width: 100%;
}
.sf-menu a {
	/*border-left: 1px solid #fff;*/
	border-top: 1px solid #dFeEFF; /* fallback colour must use full shorthand */
	border-top: 1px solid rgba(0,163,255,0.8);
	padding: .75em 0.1em;
	text-decoration: none;
	zoom: 1; /* IE7 */
	background-color: rgba(0,163,255,0.8);
	height: 19px;
}
.sf-menu a {
	color: #000;
}
.sf-menu li {
	background: #BDD2FF;
	white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background .2s;
	width: 100%;
}
.sf-menu ul li {
	background: #AABDE6;
}
.sf-menu ul ul li {
	background: #9AAEDB;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	background: #CFDEFF;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}

/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right: 2.5em;
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -3px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 5px solid transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: white;
}


/*plugin styles*/
.visualize { margin: 20px auto; border: 1px solid #888; position: relative; background: #fafafa; }
.visualize canvas { position: absolute; border: 1px solid #888; margin: -1px; background: #dadada; }
.visualize ul,.visualize li { margin: 0; padding: 0;}

/*table title, key elements*/
.visualize .visualize-info { padding: 3px 5px; background: #fafafa; border: 1px solid #888; position: absolute; top: -20px; right: 10px; opacity: .8; display: none; }
.visualize .visualize-title { display: block; color: #333; margin-bottom: 3px;  font-size: 1.1em; display: none; }
.visualize ul.visualize-key { list-style: none; display: none;  }
.visualize ul.visualize-key li { list-style: none; float: left; margin-right: 10px; padding-left: 10px; position: relative;}
.visualize ul.visualize-key .visualize-key-color { width: 6px; height: 6px; left: 0; position: absolute; top: 50%; margin-top: -3px;  }
.visualize ul.visualize-key .visualize-key-label { color: #000; }

/*pie labels*/
.visualize-pie .visualize-labels { list-style: none; }
.visualize-pie .visualize-label-pos, .visualize-pie .visualize-label { position: absolute;  margin: 0; padding:0; }
.visualize-pie .visualize-label { display: block; color: #fff; font-weight: bold; font-size: 1em; }
.visualize-pie-outside .visualize-label { color: #000; font-weight: normal; }

/*line,bar, area labels*/
.visualize-labels-x,.visualize-labels-y { position: absolute; left: 0; top: 0; list-style: none; }
.visualize-labels-x li, .visualize-labels-y li { position: absolute; bottom: 0; }
.visualize-labels-x li span.label, .visualize-labels-y li span.label { position: absolute; color: #555;  }
.visualize-labels-x li span.line, .visualize-labels-y li span.line {  position: absolute; border: 0 solid #ccc; }
.visualize-labels-x li { height: 100%; margin-left: 0 }
.visualize-labels-x li:first-of-type { left: -14px !important; }
.visualize-labels-x li:last-of-type { margin-left: 7px !important; }
.visualize-labels-x li span.label { top: 100%; margin-top: 5px; display: inline-block; width: 80px; }
.visualize-labels-x li span.line { border-left-width: 1px; height: 100%; display: block; }
.visualize-labels-x li span.line { border: 0;} /*hide vertical lines on area, line, bar*/
.visualize-labels-y li { width: 100%;  }
.visualize-labels-y li span.label { right: 100%; margin-right: 5px; display: block; width: 100px; text-align: right; }
.visualize-labels-y li span.line { border-top-width: 1px; width: 100%; }
.visualize-bar .visualize-labels-x li span.label { width: 100%; text-align: center; }

