@font-face {
	font-family: quicksandBold;
	src: url('../fonts/fontes_eot/Quicksand-Bold.eot?') format('eot'),
		url('../fonts/fontes_otf/Quicksand-Bold.otf') format('opentype');
}

body {
	/*background: url("/InTheCards/resources/visual/backgrounds/background.jpg") no-repeat; 
	background-size: 100%;*/
	font-family: quicksandBold, sans-serif;
	cursor: auto;
}
#fullScreen{
	background-image: url("../resources/visual/backgrounds/fullscreen.png");
	background-repeat: no-repeat;
	position: absolute;
	height: 45px;
	width: 45px;
	left: 1215px;
	top: 4px;
	z-index: 10;
	cursor: pointer;
}
#fullScreenExit{
	background-image: url("../resources/visual/backgrounds/fullscreen-exit.png");
	background-repeat: no-repeat;
	position: absolute;
	height: 45px;
	width: 45px;
	right: 1em;
	top: .5em;
	z-index: 10;
	cursor: pointer;
}

@media screen {
	div#preloader {
		position: absolute;
		left: -9999px;
		top:  -9999px;
		}
	div#preloader img {
		display: block;
		}
	}
@media print {
	div#preloader, 
	div#preloader img {
		visibility: hidden;
		display: none;
		}
	}
:-webkit-full-screen {
}

:-moz-full-screen {
  /* properties */
}

:-ms-fullscreen {
  /* properties */
}

:full-screen {
}

:fullscreen { /* spec */
  /* properties */
}


.ui-draggable {
	cursor: move;
}

div {
	font-family: quicksandBold;
}

/*
 * Removing the outline/border around the icons when a user clicks on them
 */
input {
	outline: none;
}

/*
 * CSS for showing warning message if user uses potrait mode on an iPad
 */
#warning-message {
	display: none;
	color: white;
	background: url("../resources/visual/backgrounds/background_status.jpg");
	position: absolute;
	height: 100%;
	top: 0;
	width: 100%;
	left: 0;
	overflow: auto;
	text-align: center;
}

@media only screen and (orientation: portrait) {
	#main {
		display: none;
	}
	#warning-message {
		display: block;
	}
}

@media only screen and (orientation: landscape) {
	#warning-message {
		display: none;
	}
}
/*
 * HTML styling
 */
#main {
	background: url("../resources/visual/backgrounds/background_status.jpg");
	position: absolute;
	height: 100%;
	top: 0;
	width: 100%;
	left: 0;
	overflow: auto;
	cursor: auto;
}

#main #main-content {
	border-radius: 25px;
	width: 76%;
	min-width: 945px;
	margin-left: 270px;
	height: 85%;
	top: 0.1%;
	bottom: 2.5%;
	color: white;
	background: url("../resources/visual/backgrounds/background_main.jpg");
	min-height: 885px;
	padding: 1%;
	cursor: auto;
	border: 1px solid wheat;
}

/* for end of the game background*/
#main .main-content {
	border-radius: 25px;
	width: 96%;
	min-width: 945px;
	height: 90%;
	top: 0.1%;
	bottom: 2.5%;
	color: white;
	background: url("../resources/visual/backgrounds/background_main.jpg");
	min-height: 885px;
	padding: 1%;
	border: 1px solid wheat;
	cursor: auto;
	margin: auto;
}

/*
 * Tutorial 	
 */
#main #tutorial .tutorial-image {
	text-align: center;
	margin: 3em;
}

#main #tutorial .tutorial-image img.active {
	display: inline-block;
}

#main #tutorial .tutorial-image img {
	display: none;
}

#main #tutorial #tutorial-nav,
#main #navButtons {
	text-align: center;
	min-width: 750px;
	max-width: 1200px;
	margin: auto;
}

#main #tutorial #tutorial-nav div {
	width: 33%;
	float: left
}

#main #interlude-gallary {
	text-align: center;
	width: 100%;
	padding-top: 2.5%;
}

#main #interlude-gallary,#main #interlude-gallary-text {
	text-align: center;
	width: 50%;
	margin: auto;
	padding-top: 2%;
	color: white;
}

#main #interlude-gallary img,#main #interlude-gallary-text p {
	display: none;
}

#main #interlude-gallary-text p{
	height: 75px;
}

#main #interlude-gallary img.active,#main #interlude-gallary-text p.active
	{
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}

img.active {
	box-shadow: 5px 5px 20px black;
}

#navButtons #back-button {
	float: left;
	display: none;
}

#navButtons #next-button {
	float: right;
}

#main #stats {
	/*position:fixed;
	border: 1px dotted #333;
	height:100%;
	width:250px;*/
	/*text-align: center;*/
	width: 260px;
	height: 50px;
	float: left;
}

#main #round {
	position: fixed;
	left: 18%;
	display: block;
	overflow: auto;
}

#main #stats #stats-header,#main #stats #stats-footer {
	height: 120px;
}

#main #stats #stats-content {
	/*background: url("../resources/visual/backgrounds/scorecard_bg.png") no-repeat center center ; */
	/*background: #b3d4fc ;*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	height: 500px;
}

#stats-test {
	border-radius: 10px;
	background: #6CA8A8;
	margin-left: 5px;
	margin-right: -3px;
	behavior: url(PIE.htc);
}

#stats #stats-footer img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.crystal-background {
	width: 250px;
}

.crystal-future {
	width: 230px;
	margin-top: -265px;
}

.crystal-future-goals {
	text-align: center;
	margin: -12em 3em 3em;
	background:rgba(163, 77, 42, 0.81);
	background-color:rgb(163, 77, 42)\9;
	position: relative;
	color: white;
	display: none;
	border-radius: 10px;
	behavior: url(PIE.htc);
}

#main #stats #stats-content .section {
	height: 110px;
}

#main #stats #stats-content .section .heading {
	font-size: 18pt;
	border-radius:5px 5px 0px 0px;
	color: white;
	behavior: url(PIE.htc);
}

#main #stats #stats-content .section .heading.fun {
	background-color: #5D8637;
}

#main #stats #stats-content .section .heading.flflmnt {
	background-color: #9DBB49;
}

#main #stats #stats-content .section .heading.cash {
	background-color: #1F3d47;
}

#main #stats #stats-content .section .text,#main #stats #stats-content .section .borrow
	{
	float: left;
	width: 40%;
}

#main #stats #stats-content .section .borrow .borrow-info {
	font-size: 11pt;
}

#main #stats #stats-content .section .values .amount {
	float: left;
	font-size: .7em;
}

#main #stats #stats-content .section .values .current .value {
	font-size: 18pt;
	color: #f56600;
	background-color: white;
	margin: 5px 5px 0px 5px;
}

#main #stats #stats-content .section .values .projected .value {
	font-size: 18pt;
	background-color: white;
	margin: 5px 5px 0px 5px;
}

#main #stats #stats-content .section .values {
	width: 55%;
	float: right;
	text-align: center;
}

#main #stats #stats-content .section .values .current,#main #stats #stats-content .section .values .projected
	{
	width: 50%;
	float: left;
}

#main #stats #stats-content .section .cash-row1,#main #stats #stats-content .section .cash-row2
	{
	height: 50px;
	padding-left: 5px;
}

#main #stats #stats-content .section .cash-row3 {
	height: 75px;
	padding-left: 5px;
}

#main #stats #stats-content .fatigue-minimum {
	text-align: center;
	border: 1px solid;
	border-radius: 10px;
	color: white;
	margin-bottom: .5em;
}

#characters {
	text-align: center;
	width: 100%;
	height: 100%;
}

#characters h1 {
	margin: 0;
	height: 5%;
	padding: .5em 0 .5em 0;
	min-width: 450px;
}

#character_selection {
	height: 80%;
}

#character_selection div {
	display: inline-block;
	padding: 20px;
	padding-top: 0;
}

#character_selection div img {
	border: 1px dotted #333;
}

#character_selection .character-attr,#characters h1,#character_selection .character-attr label
	{
	display: block;
	color: white;
}

#character_selection .character-attr .character-flavor-text {
	width: 350px;
	margin: 0;
}

#first-button {
	position: relative;
	float: right;
	font-size: 18pt;
	top: -130px;
}

/* TABS CSS */
#main #main-content .ui-tabs-nav {
	background: transparent;
	border: none;
	min-width: 750px;
}

#main #main-content .ui-tabs-nav li {
	line-height: 4.5;
	border: none;
	text-align: center;
	margin-right: 0;
	height: 108px;
	background: transparent;
}

#main #main-content .ui-tabs-nav li a {
	width: 100%;
	padding: 0;
	height: 100px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor{
	cursor: pointer !important;
}

#main #main-content .ui-state-default {
	width: 25%;
}

#main #main-content .ui-state-active {
	width: 25%;
}

#main #main-content .ui-tabs-nav li.ui-state-default a.house-tab {
	background: url("../resources/visual/backgrounds/arrow_house_off.png")
		no-repeat center center;
}

#main #main-content .ui-tabs-nav li.ui-state-active a.house-tab {
	background: url("../resources/visual/backgrounds/arrow_house_on.png")
		no-repeat center center;
}

#main #main-content .ui-tabs-nav li.ui-state-default a.job-tab {
	background: url("../resources/visual/backgrounds/arrow_career_off.png")
		no-repeat center center;
}

#main #main-content .ui-tabs-nav li.ui-state-active a.job-tab {
	background: url("../resources/visual/backgrounds/arrow_career_on.png")
		no-repeat center center;
}

#main #main-content .ui-tabs-nav li.ui-state-default a.other-tab {
	background: url("../resources/visual/backgrounds/arrow_other_off.png")
		no-repeat center center;
}

#main #main-content .ui-tabs-nav li.ui-state-active a.other-tab {
	background: url("../resources/visual/backgrounds/arrow_other_on.png")
		no-repeat center center;
}

#main #main-content .ui-tabs-nav li.ui-state-default a.commit-tab {
	background: url("../resources/visual/backgrounds/arrow_commit_off.png")
		no-repeat center center;
}

#main #main-content .ui-tabs-nav li.ui-state-active a.commit-tab {
	background: url("../resources/visual/backgrounds/arrow_commit_on.png")
		no-repeat center center;
}
/* END OF TABS CSS */

/*#main #main-content .house-tab.ui-state-default {
	background: url("../resources/visual/backgrounds/arrow_house_off.png")
		no-repeat center center;
	width: 25%;
}

#main #main-content .job-tab.ui-state-default {
	background: url("../resources/visual/backgrounds/arrow_career_off.png")
		no-repeat center center;
	width: 25%;
}

#main #main-content .other.ui-state-default {
	background: url("../resources/visual/backgrounds/arrow_other_off.png")
		no-repeat center center;
	width: 25%;
}

#main #main-content .commit.ui-state-default {
	background: url("../resources/visual/backgrounds/arrow_commit_off.png")
		no-repeat center center;
	width: 25%;
}

#main #main-content .house-tab.ui-state-active {
	background: url("../resources/visual/backgrounds/arrow_house_on.png")
		no-repeat center center;
	width: 25%;
}

#main #main-content .job-tab.ui-state-active {
	background: url("../resources/visual/backgrounds/arrow_career_on.png")
		no-repeat center center;
	width: 25%;
}

#main #main-content .other.ui-state-active {
	background: url("../resources/visual/backgrounds/arrow_other_on.png")
		no-repeat center center;
	width: 25%;
}


#main #main-content .commit.ui-state-active {
	background: url("../resources/visual/backgrounds/arrow_commit_on.png")
		no-repeat center center;
	width: 25%;
}*/
#main #main-content #description {
	width: 100%;
	text-align: center;
	min-width: 750px;
	height: 26px;
}

#main #main-content #description div {
	width: 25%;
	float: left;
	color: white;
	font-size: 12pt;
	font-family: quicksandbold;
}

#main #main-content #continue-button {
	position: relative;
	width: 208px;
	height: 100px;
	float: right;
	font-size: 18pt;
}

#continue-button {
	opacity: 1;
}

#continue-button:hover {
	opacity: 0.8;
}

#main #main-content #continue-button label {
	position: absolute;
	top: 35%;
	left: 25%;
	color: white;
}

/*
#first-button label {
	position: absolute;
	top: 35%;
	left: 25%;
	color: white;
}
*/

/* for character selection temp */
#character_selection #continue-button {
	position: relative;
	width: 208px;
	float: right;
	font-size: 18pt;
	top: 508px;
	left: -225px;
}

#continue-button label {
	position: absolute;
	top: 35%;
	left: 25%;
	color: white;
}

#main #houses .house,#main #jobs .job,#main #actions .action,#main #actions .actionClone,.majorChoice,#main .roundSummary div
	{
	display: inline-block; /* hijacked */
	text-align: center;
	width: 275px;
	height: 175px;
	border: 1px dotted #333;
	padding: 5px;
	margin: 15px;
	/* float:left; */
	background: white;
	color: black;
	font-family: quicksandBold;
	box-shadow: 5px 5px 20px black;
	/*     top: 10px;
	left: 10px;
 */
}

#main #actions .loan-action {
	display: inline-block;
	text-align: center;
	width: 275px;
	height: 175px;
	border: 1px dotted #333;
	padding: 5px;
	margin: 15px;
	/* float: left; */
	background: white;
	color: black;
	font-family: quicksandBold;
	box-shadow: 5px 5px 20px black;
	width: 228px;
	height: 125px;
	font-size: 11pt;
}

#main #actions .action {
	width: 228px;
	height: 125px;
	font-size: 11pt;
}

#main #actions .actionClone {
	width: 228px;
	height: 125px;
	font-size: 11pt;
}

#main #main-content #debts {
	text-align: center;
}

#main #loanRepayment div
#main #loanRepayment .resolution,#main #401kRepayment .resolution,#main #unexpectedEventPayment .resolution
	{
	text-align: center;
	width: 150px;
	height: 175px;
	border: 1px dotted #333;
	padding: 5px;
	margin: 5px;
	float: left;
}

/*Unexpected event repayment sceen*/
#main #main-content #content {
	width: 100%;
	/* height: 75%; */ /* 87%; */
	position: relative;
	padding-top: 1%;
	box-sizing: border-box;
	/* min-height: 747px; */
	min-height: 400px;
}

#main #main-content #content .heading,#main #main-content #content #resolutions
	{
	margin: 3em;
}

#main #main-content #content .heading {
	margin: auto;
	text-align: center;
	font-size: 2em;
}

#main #main-content #content .heading-text {
	text-align: center;
	font-size: 16pt;
	padding: 1.5em;
	width: 75%;
	margin: auto;
}

#main #main-content #resolutions {
	width: 90%;
	height: 100px;
	background: white;
	color: #455d65;
	border-radius: 25px;
	padding-bottom: 3em;
	padding-top: 3em;
	margin: auto;
}

#main #main-content .resolution {
	float: left;
	width: 19%;
	text-align: center;
	height: 100px;
	border-right: solid #455d65;
}

#main #main-content .resolution .account {
	width: 97px;
	margin: auto;
	height: 50px;
}

#main #main-content .resolution .input {
	position: relative;
	background: #b0edf1;
	height: 50px;
}

#main #main-content .resolution .input input {
	height: 30px;
	margin-top: 5px;
}

#main #main-content #resolutions .insured {
	text-align: center;
	font-size: 18pt;
	margin: 0 3.5em 0 3.5em;
}

/*Round Summaray Screen*/
/*
#main #main-content #content .house,
#main #main-content #content .job,
#main #main-content #content .action{
	margin: 2em;
	padding:1em;
	color: black;
	background:white;
	float:left;
} */

/*Summary screen */
#main #main-content #main-Summery #content {
	/*height: initial;*/
	/*overflow: hidden;*/
}

div#main-Summery {
	width: 100%;
	height: 100%;
}

#main #main-content #content .card-summary {
	overflow: hidden;
	margin: auto;
	width: 99%;
	min-width: 947px;
	text-align: center;
}

.roundSummery {
	text-align: center;
	width: 300px;
	height: 175px;
	border: 1px dotted #333;
	padding: 1px;
	margin: 5px;
	background: white;
	color: black;
	font-family: quicksandBold;
	display: inline-block;
}

#main #houses .house.disabled,#main #jobs .job.disabled,#main #actions .action.disabled,#main #actions .actionClone.disabled
	{
	border: 1px dotted #EEE;
	color: #ccc;
}

input[type=number] {
	width: 55px;
	border: none;
	border-radius: 3px;
	padding: 5px 0px 5px 0px;
	box-shadow: 1px 1px 5px #888888 inset;
	font-size: 18pt;
	color: #f56600;
	font-weight: bold;
	text-align: center;
}

.ui-dialog-titlebar-close {
	visibility: hidden;
}

.ui-dialog {
	height: 400px;
	width: 500px;
}

#main #loanRepayment div {
	float: left;
	padding: 10px;
	text-align: center;
}

#content #debt {
	width: 90%;
	background: white;
	color: #455d65;
	padding-bottom: 3em;
	padding-top: 3em;
	margin: auto;
	border-radius: 25px;
	overflow: auto;
}

#content #debt .resolution-col-debt,
#content #debt .resolution-col-min,
#content #debt .resolution-col-cash,
#content #debt .resolution-col-emergencyFund,
#content #debt .resolution-col-401k {
	width: 16%;
	float: left;
	text-align: center;
	height: 100%;
	border-right: 4px solid;
}

#content #debt .resolution-col-debt h4,
#content #debt .resolution-col-min h4,
#content #debt .resolution-col-cash h4,
#content #debt .resolution-col-emergencyFund h4,
#content #debt .resolution-col-401k h4, 
#content #debt .resolution-col-loan h4{
    font-size: 1em;  
	/* width: 5em;   *//* it had to beaken out cause the loan amount was dropping to the new line */
	height: 3em;  
	margin-left: auto;  
	margin-right: auto;
}

#content #debt .resolution-col-debt h4{
	line-height:3em;
}

#content #debt .resolutionType,
#content #debt .resolutionMinimum,
#content #debt .resolutionInput{
height: 40px;
margin-bottom: 10px;
background: #b3d4fc;
padding: 10px 0 10px 0;
line-height: 40px;
}

#content #debt .resolutionMinimum{
	font-size: 18pt;
	color: #f56600;
}

div#debt div#regularLoan,div#debt div#otherLoan {
	background: #b0edf1;
	margin: 5px;
	height: 50px;
}

#debt #regularLoan .resolutionType label,#debt #otherLoan .resolutionType label
	{
	color: #455d65;
}

#debt #regularLoan .resolutionMinimum label,#debt #otherLoan .resolutionMinimum label
	{
	font-size: 18pt;
	color: #f56600;
}

#debt #regularLoan div,#debt #otherLoan div,#debt #resolutionHeadings h4
	{
	display: inline-block;
	width: 16%;
	text-align: -webkit-center;
	margin-top: 0;
}

/**
 * 	Styling for the Action Cards
 */
/*
 * Career action cards
 */ /* 
#main #main-content #jobs .job .col1{
	width: 65%;
	float: left;
}

#main #main-content #jobs .job .col1 p{
	font-size: small;
	text-align: left;
}
#main #main-content #jobs .job .col2 {
	text-align: right;
}
 */
/*
 * CARDS CSS
 */
.row1 {
	height: 40%;
}

.row2 {
	height: 60%;
}

.row1>span {
	float: left;
	width: 26%;
	background-color: #691f02;
	color: white;
	padding: 2%;
	font-size: 11pt;
}

span.name {
	background-color: #a34d2a;
	width: 66%;
	font-size: 11pt;
}

.row1>div {
	background-color: #ffc1ab;
}

label {
	/* color: #ab5432; */
	color: white;
}

.row2>.col1 {
	width: 70%;
	height: 100%;
	float: left;
	font-size: 12pt;
	font-style: italic;
	text-align: left;
	padding-right: 2%;
	/* padding-top: 10%; */
}

.row2>.col2 {
	width: 28%;
	float: right;
}
/*
 * End CARDS CSS
 */

/* 
#main #main-content #houses .house .col2 .row1{
	height: 50%;
}
#main #main-content #houses .house .col2 .row1 p{
	font-size: small
}

#main #main-content #houses .house .row2{
	height: 50%;
	text-align: right;
}
*/
.house div,.job div,.actionClone div,.action div,.loan-action div {
	color: black;
	float: left;
}

.house .effects,.job .effects,.actionClone .effects,.action .effects,.loan-action .effects
	{
	width: 100%;
}

.house .effects .card-finance,.job .effects .card-finance,.actionClone .effects .card-finance,.action .effects .card-finance,.loan-action .effects .card-finance
	{
	width: 35%;
	background-color: #1F3d47;
	color: white;
}

.house .effects .card-fulfillment,.job .effects .card-fulfillment,.actionClone .effects .card-fulfillment,.action .effects .card-fulfillment,.loan-action .effects .card-fulfillment
	{
	width: 40%;
	background-color: #9DBB49;
	color: white;
}

.house .effects .card-fun,.job .effects .card-fun,.actionClone .effects .card-fun,.action .effects .card-fun,.loan-action .effects .card-fun
	{
	width: 25%;
	background-color: #5D8637;
	color: white;
}

/*.effects div:nth-child(1) {
	background-color: #5D8637;
}

.effects div:nth-child(3) {
	background-color: #1F3d47;
}*/
/* card different font color */
/* .effects div:nth-child(1)>label {
color: blue;
}
.effects div:nth-child(3)>label {
color: yellowgreen;
}
 */
.house-dropZone,.job-dropZone,.family-dropZone {
	background-image:
		url('../resources/visual/backgrounds/drag_space_big.png') !important;
	background-repeat: no-repeat;
	opacity: 1 !important;
	width: 310px;
	height: 210px;
	float: right;
	margin-top: 5%;
	/* 	background:gray;
	border: 10px solid brown; */
	padding: 5px;
	text-align: center;
	color: white;
	font-family: quicksandBold;
	z-index: -1;
}

div#loanDialog>label {
color: #f56600;
}
.action-dropZone{
	background-image:
		url('../resources/visual/backgrounds/drag_space_Rsize.png') !important;
	background-repeat: no-repeat;
	opacity: 1 !important;
	float: left;
	margin: 2px 10px 5px 5px;
	padding: 2px;
	color: white;
	font-family: quicksandBold;
}
.card-holder-other {
	background-image:
		url('../resources/visual/backgrounds/drag_space_Rsize.png') !important;
	background-repeat: no-repeat;
	opacity: 1 !important;
	float: left;
	margin: 2px 10px 5px 5px;
	padding: 2px;
	color: white;
	font-family: quicksandBold;
}

.ui-droppable>p {
	padding: 0% 10% 10% 10%;
	font-size: .95em;
}

div#dragZone {
	float: left;
}

.action-dropZone {
	width: 275px;
	height: 175px;
	margin-left: 2%;
	float: right;
}

/*
.loan-action>div.row2>.col1{
	display: none;
}
.loan-action>div.row2>.col1::after{
	content: "Its Taken";
}
.loan-action>div::after{
	content: "Its Taken";
	color: red;
} */
.action-dropZone h4 {
	margin: .5em .5em;
	position: relative;
	top: 10px;
}

.cardZone {
	float: left;
	margin-right: 10px;
}

.card-zone-other {
	float: left;
	width: 65%;
	z-index: -1;
}

.dropZone {
	z-index: -1;
	width: 35%;
	float: right;
	border-left-width: 2px;
	text-align: center;
}

.cardHolder {
	background-image:
		url('../resources/visual/backgrounds/drag_space_big.png');
	background-repeat: no-repeat;
	/* background-size: 310px 210px; */
	border: 1px solid black;
	width: 320px;
	height: 220px;
	margin: 5px;
}

/* remove it later */
/* .card-holder-other{
	width: 260px;
	height: 165px;
	float: left;
	margin: 5px;
	top: 10px;
	left: 10px;
} */

/*
 * Other Spending action cards
 */
/* 
#main #main-content #actions .action .row1 {
	width: 100%;
	height: 35%;
}

#main #main-content #actions .action .row1 .col1{
	width: 65%;
	height: 100%;
	float: left;
}

#main #main-content #actions .action .row2 {
	width: 100%;
	height: 50%;
}
#main #main-content #actions .action .row2 .col1 {
	width: 50%;
	float: left;
	height: 100%;
}
#main #main-content #actions .action .row2 .col2 {
	width: 50%;
	float: left;
	text-align: right;
}
 */

/*
* All for the fonts
*/

/* for the tabs*/
ul {
	font-family: quicksandBold;
	font-size: 24pt;
	text-transform: uppercase;
}

/*Remove backround behind dialogu*/
body .ui-widget-overlay {
	background: none;
}

/*CSS for Alert dialog boxes*/
.ui-dialog.ok-dialog,.ui-dialog.loan-dialog,.ui-dialog.borrow-dialog,.ui-dialog.bankrupcty-dialog, .ui-dialog.borrow401k-dialog
	{
	background: url(../resources/visual/backgrounds/message_panel_base.png)
		no-repeat;
}

.ui-dialog.ok-dialog .ui-dialog-titlebar,.ui-dialog.loan-dialog .ui-dialog-titlebar,.ui-dialog.borrow-dialog .ui-dialog-titlebar,.ui-dialog.bankrupcty-dialog .ui-dialog-titlebar,.ui-dialog.borrow401k-dialog .ui-dialog-titlebar
	{
	margin: auto;
	text-align: center;
}

.ui-dialog.loan-dialog .ui-dialog-titlebar .ui-dialog-title,.ui-dialog.ok-dialog .ui-dialog-titlebar .ui-dialog-title,.ui-dialog.borrow-dialog .ui-dialog-titlebar .ui-dialog-title,.ui-dialog.bankrupcty-dialog .ui-dialog-titlebar .ui-dialog-title
	{
	float: none;
}

#dialog-confirm, #borrow401k-dialog {
	text-align: center;
	color: #f56600;
	padding-left: 2em;
	padding-right: 2em;
	overflow: hidden;
}

#dialog-confirm p {
	margin-top: -12px;
}

.ui-dialog.ok-dialog .ui-dialog-titlebar,.ui-dialog.loan-dialog .ui-dialog-titlebar,.ui-dialog.borrow-dialog .ui-dialog-titlebar,.ui-dialog.bankrupcty-dialog .ui-dialog-titlebar,.ui-dialog.borrow401k-dialog .ui-dialog-titlebar
	{
	background: transparent;
	border: none;
	color: #f56600;
	padding: 1.5em 3em 0 3em;
	font-size: 18pt;
	padding-top: 2em;
}

.ui-dialog.ok-dialog .ui-dialog-buttonpane,.ui-dialog.loan-dialog .ui-dialog-buttonpane,.ui-dialog.borrow-dialog .ui-dialog-buttonpane,.ui-dialog.bankrupcty-dialog .ui-dialog-buttonpane,.ui-dialog.borrow401k-dialog .ui-dialog-buttonpane
	{
	margin: auto;
	text-align: center;
	padding: 0;
	background: transparent;
	border: none;
	padding-left: 3em;
	padding-right: 3em;
	padding-bottom: 3em;
}

.ui-dialog.borrow-dialog .ui-dialog-buttonpane {
	padding-left: 6em;
	padding-right: 6em;
}

.ui-dialog.ok-dialog .ui-dialog-buttonpane .ui-dialog-buttonset,.ui-dialog.loan-dialog .ui-dialog-buttonpane .ui-dialog-buttonset,.ui-dialog.borrow-dialog .ui-dialog-buttonpane .ui-dialog-buttonset,.ui-dialog.bankrupcty-dialog .ui-dialog-buttonpane .ui-dialog-buttonset, .ui-dialog.borrow401k-dialog .ui-dialog-buttonpane .ui-dialog-buttonset
	{
	float: none;
}

.ui-dialog.ok-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button,.ui-dialog.loan-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button,.ui-dialog.bankrupcty-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button,.ui-dialog.borrow401k-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button
	{
	color: white;
	background: #f56600;
	width: 150px;
	border: none;
}

.ui-dialog.bankrupcty-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button
	{
	height: 70px;
}

.ui-dialog.borrow-dialog .ui-dialog-buttonpane .ui-dialog-buttonset button
	{
	color: white;
	background: #f56600;
	width: auto;
	border: none;
	float: left;
	margin-top: 0;
}

.ui-dialog.borrow-dialog .ui-dialog-buttonpane .ui-dialog-buttonset div
	{
	margin: -.5em 0em 0em 0em;
}

.ui-dialog.borrow-dialog .ui-dialog-buttonpane .ui-dialog-buttonset div label
	{
	font-size: 10pt;
	color: #f56600;
}

.ui-dialog.borrow-dialog .ui-dialog-buttonpane .ui-dialog-buttonset div input
	{
	width: 50px;
}

/*CSS for Loan dialog*/
.ui-dialog.loan-dialog .ui-dialog-content,.ui-dialog.borrow-dialog .ui-dialog-content
	{
	text-align: center;
	color: #f56600;
	overflow: hidden;
	padding-left: 2em;
	padding-right: 2em;
	padding-top: 0em;
}

.ui-dialog.borrow-dialog .ui-dialog-content p{
	margin-top:0;
}

.ui-dialog.loan-dialog .ui-dialog-content p {
	margin: 0px;
	margin-right: .4em;
	margin-left: .4em;	
}

/* end of css for dialog */

/*CSS for Round Summary screen*/
#main-Summery .performance-401k {
	text-align: center;
	width: 99%;
	margin: auto;
	background-color: white;
	color: black;
	border-radius: 20px;
	padding-bottom: 25px;
}

#main-Summery .performance-401k .col {
	float: left;
	width: 33%;
	border-right: 4px solid;
}

/*
#main-Summery .performance-401k .difference {
	padding: 1%;
	clear: both;
}
*/
.col h4 {
	width: 100%;
	display: block;
	height: 25px;
}

div.row {
	background-color: #b0edf1;
	height: 50px;
	font-size: 2em;
}

/**
 * 	NOT SURE WHAT ITS DOING SO REMOVED
 */
/**
div#content {
background-color: rgba(36, 75, 42, 0.3);
border-radius: 2%;
// opacity: 0.5;
}
*/

/*CSS for Interlude screen*/
.interlude img {
	display: block;
	margin: auto;
	box-shadow: 5px 5px 20px black;
}

/* Star:Spinner */
#spinnerBase {
	width: 100%;
	/* height: 73%; */
	display: block;
	top: 100%;
	left: 100%;
	box-sizing: border-box;
}

#spinnerBase h1 {
	text-align: center;
}

div#detials {
	position: absolute;
	float: right;
	top: 38px;
	z-index: 4;
	/* left: -130px; */
	font-size: 1em;
	width: 150px;
	text-align: right;
	right: 1px;
}

.spingArrow {
	position: absolute;
	float: right;
	top: 29px;
	left: 326px;
	z-index: 3;
	right: 47px;
}

/* .spingArrow>img {
	height: 100%;
} */

#board {
	position: relative;
	width: 680px;
	/* left: 10%;
	top: 10%;
	left: 10%; */
	margin: auto;
}

/* End:Spinner */
/* Start input[type=number] css modification*/
/* hid the defaul spinner button for the inputs*/
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button
	{
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
	border: 3px solid #B6B5B4\9;
}

.up {
	width: 0;
	height: 0;
	border-bottom: 1em solid #f56600;
	border-left: 1em solid transparent;
	border-right: 1em solid transparent;
	border-radius: 3px;
	position: relative;
	top: -30px;
	left: 7px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.down {
	width: 0;
	height: 0;
	border-top: 1em solid #f56600;
	border-left: 1em solid transparent;
	border-right: 1em solid transparent;
	border-radius: 3px;
	position: relative;
	top: 30px;
	left: -25px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
}
/* .down:active {
	border-top: .95em solid #f56600;
	border-left: .95em solid transparent;
	border-right: .95em solid transparent;
}
.up:active {
	border-top: .95em solid #f56600;
	border-left: .95em solid transparent;
	border-right: .95em solid transparent;
} */
div#loanDialog .up,div.borrow-amount .up {
	width: 0;
	height: 0;
	border-bottom: 1em solid #f56600;
	border-left: 1em solid transparent;
	border-right: 1em solid transparent;
	border-radius: 3px;
	position: relative;
	top: -30px;
	left: 9px;
	cursor: pointer;
}
/* End input[type=number] css modification*/
/* 401k borrow sidebar*/
/* div#loanDialog .up:active {
width: 5px;
height: 5px;
border-bottom: .95em solid #f56600;
border-left: .95em solid transparent;
border-right: .95em solid transparent;
}
 */
.borrow strong {
	background-color: #f56600;
	color: white;
	cursor: pointer;
}

#arrow_background {
	border-left: 8px solid #f56600;
	border-top: 10px solid transparent;
	border-bottom: 8px solid transparent;
	font-size: 0px;
	position: relative;
	top: -5px;
}
/* MajorLife choices */
#dragZone p:first-child {
	background: #a34d2a;
	padding: 0.5em .0em 0.5em 0em;
	color: white;
}

div#ribbon {
	margin-left: -6px;
	margin-right: 23px;
}

#ribbon:after {
	content: " ";
	position: absolute;
	display: block;
	bottom: 126px;
	border: 19px solid #a34d2a;
	z-index: 2;
	border-left-width: 15px;
	border-right-color: transparent;
	left: 245px;
}

p#deci {
	font-size: 2em;
	font-weight: bold;
}

#dropLocation p {
	margin: 58px;
}

/* End of Game */
#main #end-of-game {
	color: white;
	width: 50%;
	margin: auto;
	padding-top: 2em;
	max-width: 622px;
}

#main #end-of-game .cara-summary {
	width: 60%;
	float: left;
	font-size: 22px;
}

#main #end-of-game #end-of-game-action {
	padding-top: 1em;
	clear: both;
	font-size: 18px;
}

#main #end-of-game .replay {
	float: right;
	margin: 1em;
}

#main #end-of-game a {
	color: #f56600;
}

#main #main-content #content #restart-button {
	float: left;
}