/*Constants End*/

* {
	list-style: none;
	margin: 0;
	padding: 0;
}
body {
	overflow:hidden;
}
h1 {
	font-size:22px;
	font-weight:bold;
	margin-bottom:-20px;
}
h2 {
	font-size:14px;
	font-weight:normal;
}
img {
	border:none;
}
ul li {
	font-size: 15px;
}
p {
	font-size: 15px;
	cursor: default;
}
.testClass{
	opacity: 0.5;
	background-color: red;
}
.blue {
	background-color: #03588C;
}
.middleblue {
	background-color: #38A5C2;
}
.lightblue {
	background-color: #79B8B5;
}
.lighterblue {
	background-color: #A5B5A6;
}
.neutral {
	background-color: #999;
}
.lighterred {

}
.lightred {

	background-color: #C3561A;
}
.middlered {
	background-color: #A9340D;
}
.red {
	background-color: #9C0413;
}
.textRed {
	color:#9C0413;
	font-size:14px;
}
.textBlue {
	color:#03588C;
	font-size:14px;
}
.textGrey {
	color:#aaa;
	font-size:12px;
}
.grey {
	background-color: #aaa;
}
.yellow {
	background-color: #DEBC34;
}

.inline {
	display:inline;
}

.textLeft {
	text-align: left;
}
.textRight {
	text-align: right;
}
.textCenter {
	text-align: center;
}
.bold {
	font-weight: bold;
}
.border {
	border: 1px solid #cccccc;
}
.left {
	left: 0;
}
.right {
	right: 0;
}
.boxshadow {
	box-shadow: 2px 2px 2px #888888;
	-moz-box-shadow: 2px 2px 2px #888888;
	-webkit-box-shadow: 2px 2px 2px #888888;
	-ms-box-shadow: 2px 2px 2px #888888;
}
.one-edge-shadow {
	-webkit-box-shadow: 0 8px 6px -6px #888888;
	-moz-box-shadow: 0 8px 6px -6px #888888;
	box-shadow: 0 8px 6px -6px #888888;
	-ms-box-shadow: 0 8px 6px -6px #888888;
}
.clear {
	clear: both;
}
.headline {
	font-size: 27px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	font-weight: normal;
	margin-left: 13px;
	margin-right: 13px;
}
.triangleUp {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid #333333;
}
.triangleDown {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid #333333;
}
.triangleRight {
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-left: 10px solid #333333;
	border-bottom: 5px solid transparent;
}
.triangleTopLeft {
	width: 0;
	height: 0;
	border-top: 10px solid #444444;
	border-right: 20px solid transparent;
}
.href {
	color: #999999;
	font-weight: 400;
	text-decoration: none;
}
.hrefUnderlined{
	text-decoration:underline;
}
.unselectable {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
/*	user-select: none;*/
}
/*Constants End*/

#wrapper {
	top: 0;
	left: 0;
	position: absolute;
	width: 560px;
	padding: 8px;
	height: auto;
	background-color: #ffffff;
	font-size: 37px;
	font-family: Arial, Helvetica, sans-serif;
}
#graphicHeadline {
	font-size: 37px;
	padding: 10px;
}
/*tabArea*/
#tabArea {
	/*	height:543px;*/
	position: relative;
}
/*tabs*/
#tabs {
	height: auto;
	position: relative;
}
#tabWrapper {
	top: 41px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	position: relative;
}
.tabHeadline {
	height: 40px;
	float: left;
	margin-right: 20px;
	padding-left: 20px;
	padding-right: 20px;
	cursor: pointer;
}
.tabHeadline h2 {
	font-size: 15px;
	line-height: 40px;
}
#tab1 {
	/*	width: 248px;*/
	width: auto;
}
#tab2 {
	/*	width: 674px;*/
	width: auto;
}
#tab2 h2 {
	/*	padding-left: 20px;*/
}
.tabActive {
	background-color: white;
	border-bottom: 0 !important;
	position: relative;
}
.tabInactive {
	background-color: #ebece6;
	height: 41px;
}
.tabInactive h2 {
	/*	margin-top: -5px;*/
}
/*tabs end*/

/*tabContent*/
#tabContent {
	border-top: 0;
	position: relative;
}
.tabContent {
	top: 0;
	left: 0;
	width: 560px;
	/*	height: 600px;*/
	position: relative;
}
/*presidentailElection*/
#presidentialElection {
}
#currentOptionHeadline {
	height: 45px;
	margin-left: 15px;
	margin-right: 15px;
	padding-top: 8px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	/*	text-align: center;*/
	position: relative;
}
#currentOptionHeadline h2 {
	padding-top: 13px;
	line-height: 30px;
	font-size: 23px;
	font-weight: normal;
}
#mapContainer {
	width: 660px;
	margin-top: 15px;
	/*	height: 482px;*/
	/*	display: inline-block;*/
	float: left;
	position: relative;
}
.mapSVG {

}
#linkArea {
	position:absolute;
	width:270px;
	height:200px;
	left:290px;
	top:0px;
	z-index:1000;
	display:none;
}
#linkArea #button {
	margin:180px 0 0 30px;
}

#map {
	/*	top: 50px;*/
	/*	left: 10px;*/
}
#heatMap {
	display: none;
}
#votesMap {
	/*	top: 70px;*/
	margin-left: 10px;
	display: none;
}
#votesMap2008 {
	margin-left: 10px;
	display: none;
}
#smallMapWrapper {
	left: 280px;
	top: -220px;
	background-color: white;
	opacity: 1;
	display: none;
	position: absolute;
}
#smallMap {

}
#smallMapOverlay {
	top: 0;
	left: 0;
	width: 99%;
	height: 98%;
	background-color: white;
	opacity: 0.5;
	position: absolute;
}
#smallMap2008Wrapper {
	right: 0px;
	bottom: 30px;
	background-color: white;
	opacity: 0.5;
	display: block;
	position: absolute;
}
/*toolTip*/
#toolTip {
	min-width: 110px;
	display: none;
	z-index: 1000;
	position: fixed;
}
#toolTip p {
	padding: 11px;
	padding-top: 1px;
	padding-bottom: 1px;
	font-size: 13px;
	background-color: #444444;
	color: white;
}
#toolTip p.border {
	padding-top: 5px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}
.toolTipTop {
	padding-top: 10px !important;
}
.toolTipBottom {
	padding-bottom: 7px !important;
}
.toolTipStatus {
	height: 5px;
	/*margin-left: 3px;
	 margin-right: 3px;*/
}
.toolTipCandidateName {
	position: absolute;
	display: inline-block;
}
.toolTipCandidatePercent {
	width: 100%;
	height: 10px;
	display: inline-block;
	position: relative;
}
.toolTipFilterColor {
	width: 10px;
	height: 10px;
	margin-right: 5px;
	display: inline-block;
}
#toolTipNotAvailable{	
	display: none;
}
#toolTipNotAvailable span{
	max-width: 120px;
	display: block;
}
/*toolTip end*/

/*mapBtnBox*/
#mapBtnBox {
	width: 250px;
	height: 537px;
	/*	padding-top: 15px;*/
	right: 0;
	/*	border-left: 1px solid #cccccc;*/
	/*	margin-top: 60px;*/
	overflow-x: hidden;
	overflow-y: auto;
	display: inline-block;
}
#mapBtnBox.gameModeActive {
	height: auto;
}
#mapBtnBox .headline {
	margin: 15px;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-bottom: 3px;
}
.mapOption {
	display: inline-block;
	margin-right: 15px;
	position: relative;
}
#electionOptions {
}
#mapOptions {
}
#gameModeOptions {
}
.radioBtn {
	/*	height: 30px;*/
	padding-left: 15px;
	padding-right: 15px;
}
.radioBtn .unit:hover {
	height: 32px;
	border: 0;
	color: white;
	/*	background-color: #375877;*/
	background-color: #444444;
}
.radioBtnInactive {
	/*	background-image: url(../img/radioBtnInactive.png);*/
	/*	cursor: default;*/
}
.radioBtnInactive.unclickable {
	cursor: default;
}
.radioBtnActive {
	/*	background-image: url(../img/radioBtnActive.png);*/
}
#filterOptions ul {
	padding-top: 15px;
	/*	padding-bottom: 15px;*/
	overflow-x: hidden;
}
.radioBtn .unit {
	width: 90%;
	margin-bottom: 10px;
	padding-left: 5%;
	padding-right: 5%;
	font-size: 13px;
	line-height: 30px;
	cursor: pointer;
}
.radioBtn.radioBtnActive .unit {
	width: 91%;
	line-height: 32px;
	background-color: #444444;
	color: white;
}
.filterBtn {

}
.filterBtnInfo {
	margin-bottom: 10px;
	padding: 5px;
	padding-top: 0;
	padding-bottom: 10px;
	font-size: 13px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	display: none;
}
.unclickable {
	color: #cccccc;
}
.mapBtn {
	height: 35px;
	padding-left: 15px;
	padding-right: 15px;
	float: left;
	background-color: white;
}
.mapBtn p {
	font-size: 15px;
	line-height: 35px;
}
.mapBtnActive {
	height: 37px;
	/*	background-color: #375877;*/
	background-color: #444444;
	color: white;
	cursor: default;
}
.mapBtnActive p {
	cursor: default;
}
.mapBtnInactive {
	cursor: pointer;
}
.mapBtnInactive p {
	cursor: pointer;
}
.mapBtnInactive.unclickable {
	box-shadow: 0px 0px 0px #888888;
	-moz-box-shadow: 0px 0px 0px #888888;
	-webkit-box-shadow: 0px 0px 0px #888888;
	-ms-box-shadow: 0px 0px 0px #888888;
}
#mapOptionGame {
	cursor: pointer !important;
}
#mapOptionGame p {
	cursor: pointer !important;
}
#explainText {
	max-width: 594px;
	margin-left: 15px;	
}
#explainText p {
	font-size: 15px;
}
/*gameMode*/
#gameMode {
	padding-left: 15px;
	padding-right: 15px;
	overflow-x: hidden;
}
#gameMode .mapBtn {
	width: 90%;
	height: 30px;
	margin-top: 15px;
	margin-bottom: 10px;
	padding-left: 5%;
	padding-right: 5%;
	font-size: 13px;
	line-height: 30px;
	cursor: pointer;
}
#gameMode .mapBtn:hover {
	height: 32px;
	border: 0;
	color: white;
	background-color: #444444;
}
.gameModeStateList {
	width: 50%;
	font-size: 13px;
	float: left;
	cursor: pointer;
}
.gameModeStateList.bold {
	width: 100%;
	padding-top: 2px;
	padding-bottom: 3px;
}
.gameModeStateList .colorBlock {
	top: 1px !important;
	margin-right: 3px;
}
/*gameMode end*/
/*mapBtnBox end*/

/*colorLegend*/
.colorLegend {
	bottom: 0;
	left: 0;
	margin:0px 15px;
	margin-bottom: 0;
	border-left: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	position: relative;
	height:50px;
}
.colorLegend div {
	/*margin-left: auto;
	 margin-right: auto;
	 width: auto;*/
	text-align: center;
	font-size: 0;
}
.colorLegend div span {
	width: 100%;
	margin: 4px;
	margin-top: 2px;
	margin-bottom: 2px;
	border-left: 0 !important;
	border-right: 0 !important;
	border-bottom: 0 !important;
	display: inline-block;
}
.colorArrayWrapper {
	display: inline-block;
	margin-bottom: 5px;
	margin-top:2px;
}
.colorArray {
	margin-top: 4px;
	margin-bottom: 2px;
}
.colorBlock {
	top: -1px;
	width: 8px;
	height: 8px;
	display: inline-block;
	position: relative;
	margin-right:5px;
}
.colorArray.colorBlockFilter {
	margin: 0;
}
.colorBlock.colorBlockFilter {
	height: 7.5px;
}
.colorLegend div span .colorArray p {
	padding-left: 5px;
	padding-right: 10px;
	font-size: 13px;
	display: inline-block;
}
.colorLegendFilterValue {
	min-width: 40px;
	top: -8px;
	margin-right: 8px;
	font-size: 13px;
	display: inline-block;
	position: relative;
}
.colorLegendOtherElectionStatus {
	max-width: 81px;
	text-align: left;
	vertical-align: top;
}
/*colorLegend end*/

/*presidentialElection end*/

/*otherElections*/
#otherElections {
	padding-top: 13px;
	display: none;
}
.tabContent .votebar {
	margin: 15px;
	margin-top: 25px;
}
.otherElectionInfo {
	margin-left: 13px;
	margin-right: 13px;
	margin-bottom: 10px;
	padding-top: 10px;
	font-size: 15px;
}
.otherElectionInfoText{
}
.otherElectionInfoSource{
	/*display: block;*/
}
#senatVotesBar{
	position: relative;
}
#senatVotesBar .votebarCenterPoiner .votebarPointerText {
	left: -6px;	
}
#gouverneurVotesBar {
	margin-top: 25px;
	position: relative;
}
#representativesVotesBar {
	margin-top: 25px;
	position: relative;
}

/*otherElections end*/

/*linkPage*/
#linkPage{	
	padding-top: 15px;
	font-size: 15px;
	display: none;
}
.linkPageFAQ{
	margin: 15px;
	margin-top: 0;
}
.linkPageQuestion{
	margin-bottom: 15px;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	line-height: 25px;
}
.linkPageAnswer a{
	color: #333333;
}
/*linkPage end*/
/*tabContent end*/

/*tabArea end*/

/*electoralVotesBar*/
#electoralVotesBar {
	width: 260px;
	/*	height: 47px;*/
	height: 200px;
	padding-top: 1px;
	padding-bottom: 3px;
	position: relative;
	border-bottom:none;
}
.votesNeededToWin {
	color:#7f7f7f;
	font-size: 12px;
	line-height: 15px;
	text-align: center;
	position:absolute;
	left:95px;
	top:80px;
}
.voteStatus {
	top: 0;
	font-size: 13px;
	line-height: 24px;
	position: absolute
}
.demVotes {
	left: 0;
	padding-left: 4px;
}
.repVotes {
	right: 0;
	padding-right: 4px;
}
.votebar {
	width: 260px;
	height: 47px;
	margin-bottom: 3px;
	margin-left: auto;
	margin-right: auto;
	color: white;
	position: relative;
}
.votebarWinnerSign {
	position:absolute;
	z-index:1000;
	width:30px;
	height:30px;
	top:-60px;
}
.demWinner {
	left:50px;
}
.repWinner {
	right:-10px;
}
#electoralVotesBar .votebar{
	margin:0 3px 0 3px;
	top:140px;
	position:absolute;
}
.votebarCenterPoiner {
	top: -10px;
	left: 50%;
	width: 1px;
	height: 40px;
	background-color: #333;
	position: absolute;
}
.votebarPointerText{
	top: -15px;
	left: -9px;
	font-size: 13px;
	color: #333333;
	position: absolute;
}
.candidateName {
	line-height: 47px !important;
	font-size: 20px;
	/*padding-left:10px;
	 padding-right:10px;*/
	padding: 0 !important;
	position: absolute;

}
.candidateName span{
	padding-left: 5px;
	padding-right: 5px;
}
.demCandidateName {
/*	left: 10px;*/
	text-align: left;
}
.repCandidateName {
/*	right: 10px;*/
	text-align: right;
}
.votebar ul li {
	height: 20px;
	margin: 0;
	padding: 0;
	float: left;
	box-shadow:3px 3px 3px #666;
}
.votebar ul li p {
	margin: 0;
	padding-left: 5px;
	padding-right: 5px;
}
.votebar a {
	font-size: 15px;
	color: #999999;
	text-decoration: none;
	right: 0;
	position: relative;
}
/*electoralVotesBar end*/

/*currentState*/
#currentState {
	height: auto;
	padding-top: 13px;
	/*	padding-left: 20px;*/
	position: relative;
	border-top: 0;
	display: none;
}
#stateName {
	width: 237px;
	float: left;
	position: relative;
	padding-top: 10px;
	padding-left: 13px;
}
/*#stateName h2{
 font-size: 27px;
 font-weight: normal;
 }*/
#stateName span {
	font-size: 15px;
	display: block;
	width: 100%;
	float: left;
	/*	margin-bottom: 20px;*/
}
#miniVotesbar{
	width: 238px;
	height: 15px;	
	color: white;	
}
#miniVotesbar span{
	font-size: 13px !important;
	padding: 3px;
}
#notAvailableLabel{
	display: none;
}
#stateMap {
	width: 200px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10px;
	margin-bottom: 10px;
	float: left;
	/*	background-color: #e3e2d6;*/
}
#stateInfo {
	width: 422px;
	position: relative;
	float: left;
}
#stateInfo ul {
	/*	max-height: 240px;*/
	/*	padding-top: 10px;*/
}
#stateInfo ul li {
	/*	float: left;*/
	/*	width: 300px;*/
	width: 100%;
	border-top: 0;
	border-left: 0;
	border-right: 0;
	cursor: pointer;
	position: relative;
}
#stateInfo ul li:last-child {
	border: 0;
}
#stateInfo ul li p {
	cursor: pointer;
	padding-left: 15px;
	padding-right: 15px;
}
.data {
	/*	width: 100%;*/
	padding-top: 10px;
	padding-bottom: 10px;
	position: relative;
}
.unit {
	display: inline-block;
	width: 250px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	float: left;
	/*	margin-bottom: 10px;*/
	position: relative;
}
.value {
	right: 0;
	text-align: right;
	position: relative;
}
.source {
	padding-left: 25px;
	display: none;
}
.currentSource {
	display: block;
}
.moreInfo {
	width: 10px;
	height: 19px;
	margin-left: 15px;
	float: left;
	display: inline-block;
}
.moreInfo .triangleDown {
	top: 5px;
	position: relative;
}
.moreInfo .triangleRight {
	top: 3px;
	position: relative;
}
#stateText {
	width: 250px;
	float: right;
	padding-top: 10px;
	font-size: 15px;
}
#stateText p {
	padding: 13px;
	padding-top: 0;
}
/*currentState end*/

/*loadingScreen*/
#loadingScreen {
	top: 0;
	left: 0;
	position: absolute;
	width: 100%;
/*	padding: 8px;*/
	height: 100%;
	text-align: center;
	line-height: 250px;
	background-color: white;
	z-index: 100;
}
/*loadingScreen end*/

/*backToMap*/
#backToTop {
	top: 0;
	left: 0;
	width: 940px;
	height: 25px;
	/*padding-left: 8px;
	 padding-right: 8px;*/
	background-color: white;
	font-size: 15px;
	line-height: 25px;
	text-align: center;
	cursor: pointer;
	position: fixed;
	display: none;
}
#backToTop span div {
	border-bottom: 5px solid #333333;
	margin-bottom: 2px;
	margin-left: 10px;
	margin-right: 10px;
	display: inline-block;
}
/*backToMap end*/