* {
  box-sizing: border-box;
}

html {
	background-color:#00287B;
	background:url(Graphics/Background.gif) repeat;
	height:100%;
}

body {
	margin:0;
	font-family:sans-serif;
}

#MainContainer {
	width:99%;
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
}

#MainContainerNarrow {
	width:100%;
	max-width:1024px;
	margin-top:0;
	margin-left:auto;
	margin-right:auto;
}

#SingleColumn {
	max-width:1024px;
	background-color:#ffffff;
	border:2px solid #0080ff;
	padding:20px;
}

@media only screen and (orientation:portrait) {
	#SingleColumn {width:100%; border:none;}
}

#TwoColumns {
	display:table;
	background-color:#ffffff;
	border:2px solid #0080ff;
}

@media only screen and (hover:none) {
	/* touch screen */
	#MainContainer {width:100%}
	#TwoColumns {border:none;}
}

#LowerArea {
	width:100%;
}

#LeftColumn {
	display:table-cell;
	width:100%;
	overflow:hidden;
}

.tablerow {
	display:table-row;
}

#LeftColumnLower {
	margin:0em 2em;
}

#RightColumn {
	display:table-cell;
	vertical-align:top;
	width:100%;
	min-width:360px;
	text-align:center;
	padding-left:10px;
	padding-right:10px;
}

@media only screen and (orientation:portrait) {
	#RightColumn {display:none;}
}

#ScreenSize {
	width:1in;
	height:1px;
}

#NavBar {
	margin-top:8px;
	width:100%;
	font-size:0px;
}

#GameArea {
	position:relative;
	width:100%;
	height:95vh;	
	border:1px solid black;
	background-color: #007000;
	background:url(Graphics/LoadingBG.jpg) no-repeat;
	background-size: 100% 100%;
}

#FrontEndGames {
	position:absolute;
	top:50px;
	left:100px;
	background-color:transparent;
	user-select:none;
}

#Menus {
	white-space: nowrap;
}

#HomeButton {
	background:url(Graphics/HomeButtons.png) no-repeat 0 0;
}
#GamesButton {
	background:url(Graphics/GamesButtons.png) no-repeat 0 0;
}
#KlondikeButton {
	background:url(Graphics/KlondikeButtons.png) no-repeat 0 0;
}
#PyramidButton {
	background:url(Graphics/PyramidButtons.png) no-repeat 0 0;
}
#SpiderButton {
	background:url(Graphics/SpiderButtons.png) no-repeat 0 0;
}
#SpideretteButton {
	background:url(Graphics/SpideretteButtons.png) no-repeat 0 0;
}
#TriPeaksButton {
	background:url(Graphics/TriPeaksButtons.png) no-repeat 0 0;
}
#LinkToUsButton {
	background:url(Graphics/LinkToUsButtons.png) no-repeat 0 0;
}
#HomeButton:hover,#GamesButton:hover,#KlondikeButton:hover,#PyramidButton:hover,#SpiderButton:hover,#SpideretteButton:hover,#TriPeaksButton:hover,#LinkToUsButton:hover {
	background-position:0 -26px;
}

.ShortCutBar {
	white-space:nowrap;
	padding:0;
	margin:0;
	text-align:center;	
	list-style:none;
	background-color:transparent;
	background-image:url("Graphics/ButtonBarTranslucent.png");
	position:absolute;
	top:auto;
	left:0;
	background-size:100% 100%;
	width:100%;
	height:2em;
	user-select:none;
}

.ShortCutBar li {
	display:inline-block;
	padding:0;
	margin:0;
}

button.ShortCutButton {
	font-family:sans-serif;
	border-image:url("Graphics/Dialog Button.png");
	border-image-slice:6 fill;
	border-image-width:6px;
	border-image-outset:0px;
	-webkit-border-image:url("Graphics/Dialog Button.png") 6px;		/* Safari 3.1-5 */
	-o-border-image:url("Graphics/Dialog Button.png") 6px;			/* Opera 11-12.1 */    
	background-color:transparent;
	color:white;
	text-align:center;
	user-select:none;	
}

button.ShortCutButton {
	position: relative;
	margin:0.25em 0.1em 0 0.1em;
	padding:0 0.7em;
	font-size:1.1em;
}

#ShowMoveCounter {
	position:absolute;
	top:0.5em;
	left:0;
	width:98%;
	font-size:0.8em;
	font-weight:bolder;
	text-align:right;
	color:white;
}

button.ShortCutButton:disabled, disable.hover {
	color:gray;	
}

button.ShortCutButton:hover:enabled {
	border-image:url("Graphics/Dialog Button Pressed.png");
	border-image-slice:6 fill;
	border-image-width:6px;
	border-image-outset:0px;
	-webkit-border-image:url("Graphics/Dialog Button Pressed.png") 6px;		/* Safari 3.1-5 */
	-o-border-image:url("Graphics/Dialog Button Pressed.png") 6px;			/* Opera 11-12.1 */ 	
	cursor:pointer;	
}

/* iOS Dialog Box
.DialogBox {
	position:absolute;
	border:20px solid transparent;
	border-image:url("Graphics/Dialog Box.png");
	border-image-slice:64 fill;
	border-image-width:40px;
	border-image-outset:0px;
	-webkit-border-image:url("Graphics/Dialog Box.png") 64px;
	-o-border-image:url("Graphics/Dialog Box.png") 64px;
	background-color:transparent;
	padding:4px;
}

.DialogBox_Title {
	display:block;		
	background-color:transparent;
	color:white;
	font-size:1.2em;
	text-align:center;
	margin:0.5em auto 0 auto;
}

.DialogBox_Message {
	display:block;	
	background-color:transparent;
	color:white;	
	text-align:center;
	line-height: 1.25em;
	margin:1em auto 1.2em auto;
}
*/

.DialogBox {
	position:absolute;
	background-color:transparent;
	user-select:none;	
}

.DialogBox_CaptionBar {
	display:table;
	width:100%;
}

.DialogBox_TopLeft {
	display:table-cell;
	width:75px;
	height:53px;
	background:url("Graphics/Caption Bar Left.png") no-repeat;
}

.DialogBox_Title {
	display:table-cell;	
	background:url("Graphics/Caption Bar Center.png") no-repeat;
	background-size:100% 53px;
	max-width:146px;
	color:white;
	font-size:18px;
	text-align:center;
	white-space: nowrap;
	overflow: hidden;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
	padding-top:20px;
}

.DialogBox_TopRight {
	display:table-cell;
	width:100px;
	height:53px;
	background:url("Graphics/Caption Bar Right.png") no-repeat;
}

.DialogBox_Body {
	border:12px solid transparent;
	border-image:url("Graphics/Marble Dialog Box.jpg");
	border-image-slice:12 fill;
	border-image-width:12px;
	border-image-outset:0px;
	-webkit-border-image:url("Graphics/Marble Dialog Box.jpg") 12px;		/* Safari 3.1-5 */
	-o-border-image:url("Graphics/Marble Dialog Box.jpg") 12px;			/* Opera 11-12.1 */    
	background-color:transparent;
	padding:2px 10px 0px 10px;
	box-shadow: 1em 1em 2em rgba(0,0,0,0.5);	
}

.DialogBox_Message {
	display:block;	
	background-color:transparent;
	color:rgb(50,50,50);	
	text-align:center;
	line-height: 1.25em;
	border-width:2px;
	border-color:rgb(231, 231, 231);
	border-style:groove;
	margin-bottom:1em;
	padding:1em;
}

button.DialogButton {
	display:block;
	font-family:sans-serif;
	border-image:url("Graphics/Marble Button.png");
	border-image-slice:16 fill;
	border-image-width:16px;
	border-image-outset:0px;
	-webkit-border-image:url("Graphics/Marble Button.png") 16px;		/* Safari 3.1-5 */
	-o-border-image:url("Graphics/Marble Button.png") 16px;			/* Opera 11-12.1 */    
	background-color:transparent;
	color:rgb(50,50,50);
	text-align:center;
	font-size:1em;
	padding:0.4em 2em;
	transition-duration: 0.2s;
	margin:0px auto 10px auto;
	user-select:none;	
}

button.DialogButton:hover:enabled {
	border-image:url("Graphics/Marble Button Hover.png");
	border-image-slice:16 fill;
	border-image-width:16px;
	border-image-outset:0px;
	-webkit-border-image:url("Graphics/Marble Button Hover.png") 16px;		/* Safari 3.1-5 */
	-o-border-image:url("Graphics/Marble Button Hover.png") 16px;			/* Opera 11-12.1 */ 	
}

button.DialogButton:active:hover {
	border-image:url("Graphics/Marble Button Pressed.png");
	border-image-slice:16 fill;
	border-image-width:16px;
	border-image-outset:0px;
	-webkit-border-image:url("Graphics/Marble Button Pressed.png") 16px;		/* Safari 3.1-5 */
	-o-border-image:url("Graphics/Marble Button Pressed.png") 16px;			/* Opera 11-12.1 */
	color:rgba(0,0,0,0);
	text-shadow: 1px 1px 0 rgb(50,50,50)
}

.TextEditBox {
	display:block;
	width:95%;
	color:black;
	border-width:3px;
	border-color:rgb(231, 231, 231);
	border-style:groove;
    background-color:rgba(0,0,0,0.05);

	font-size:1.4em;
	font-weight:500;
	text-align:center;

	padding: 0.2em 0;
	margin: 0.5em auto;
}

.GameWonTime {
	background-color:transparent;
	text-align:center;
	margin:0em 0 0.2em 0;
}

.GameWonBonus {
	background-color:transparent;
	text-align:center;
	margin:0.5em 0 0.2em 0;
}

.GameWonScore {
	background-color:transparent;
	color:rgb(0, 107, 179);	
	text-align:center;
	font-weight: bold;
	font-size:1.2em;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;	
	margin:1em 0 0 0;
}

#Leaderboard {
	position:absolute;
	border:24px solid transparent;
	border-image:url("Graphics/Marble Tile.jpg");
	border-image-slice:24 fill;
	border-image-width:24px;
	border-image-outset:0px;
	-webkit-border-image:url("Graphics/Marble Tile.jpg") 24px;		/* Safari 3.1-5 */
	-o-border-image:url("Graphics/Marble Tile.jpg") 24px;			/* Opera 11-12.1 */    
	background-color:transparent;
	box-shadow: 1em 1em 2em rgba(0,0,0,0.5);
	user-select:none;
}

#ScoresTable {
	display:table;
	color:rgb(50,50,50);
	border:1px solid rgb(160,160,160);
	padding:0.2em;
	margin:0.4em;
	font-weight:500;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
	user-select:none;
}

.LeaderboardText {
	text-align:center;
	padding:0.2em;
}

#GameName {
	font-size:1em;
}

#TimeRemaining {
	font-size:0.8em;
}

#LastScore {
	padding-top:0.1em;
	font-size:1.2em;
}

.GoldRibbon {
	background-color:transparent;
	background:url("Graphics/This Weeks Best Ribbon.png") no-repeat center center;
	height:4em;
	background-size:contain;
}

.ScoresRow {
	display:table-row;
}

#FirstPlace {
	font-size:1.5em;
	font-weight:bold;
}

.ScoresCell {
	display:table-cell;
	padding:0.1em 0.25em;
}

.OurScore {
	color:rgb(206, 115, 0);
}

.Pos {
	text-align:right;
	width:5em;
}

.Name {
	width:100%;
	text-align:left;
}

.Score {
	text-align:right;
	width:5em;	
}

.Time {
	width:3em;	
	text-align:center;
	font-size:0.9em;
}

#LastWeeksBest {
	margin:10px 0px;
	user-select:none;
}

.Advert {
	text-align:center;
	margin:1em auto;
}

.AdvertNoMargins {
	text-align:center;
	margin:0 auto;
}

h1,h2,h3,h4,td.h1,td.h2,td.h3,td.h4 .ScreenshotHeader .ScreenshotRules {
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}

a:link,a:active,a:visited {
	color:#235dab;
}

a:hover {
	color:#a00099;
}

h1,td.h1 {
	font-weight:800;
	font-size:1.5em;
	margin-bottom:0.75em;
}

h2,td.h2 {
	font-weight:800;
	font-size:1.3em;
	margin-bottom:0.5em;
}

h3,td.h3 {
	font-weight:800;
	font-size:1.1em;
	margin-bottom:0.5em;
}

h4,td.h4 {
	font-weight:800;
	font-size:1.0em;
	margin-bottom:0.5em;
}

h5,td.h5 {
	font-weight:800;
	font-size:1.0em;
	margin:0.5em 0;
}

h6,td.h6 {
	font-weight:800;
	font-size:1.0em;
	margin-bottom:0.5em;
}

/* navigation bar */
.Navigation {
	margin-top:8px;
	width:100%;
    margin-left:0;
    padding-left:0;
	font-size:0px;	
	list-style:none;
}

/* button */
.Navigation li {
	display:inline-block;
	padding:0;
	margin:0;
}

/* button common rollover */
.Navigation li:hover {
	cursor: pointer;
}

/* drop down menu */
.Navigation li ul {
	visibility:hidden;
	float:left;
	min-width:150px;
	position:absolute;
	margin-top:0;
	z-index:999;
}

.MenuIconApple {
	background:url(Graphics/BulletApple.png) center left no-repeat;
}
.MenuIconAndroid {
	background:url(Graphics/BulletAndroid.png) center left no-repeat;
}
.MenuIconAmazon {
	background:url(Graphics/BulletAmazon.png) center left no-repeat;
}
.MenuIconWindows {
	background:url(Graphics/BulletWindows.png) center left no-repeat;
}

.LinkIconApple {
	background:url(Graphics/BulletApple.png) center left no-repeat;
}
.LinkIconAndroid {
	background:url(Graphics/BulletAndroid.png) center left no-repeat;
}
.LinkIconAmazon {
	background:url(Graphics/BulletAmazon.png) center left no-repeat;
}
.LinkIconWindows {
	background:url(Graphics/BulletWindows.png) center left no-repeat;
}

.LinkIconApple, .LinkIconAndroid, .LinkIconAmazon, .LinkIconWindows {
	padding-left:26px;
	background-size:auto 100%;
}

.Divider {
	display:block;
	margin:1em auto;
    overflow: hidden;
    white-space: nowrap;
	text-align:center;
}

.DividerLeft {
	display:inline-block;
	width:4px;
	height:33px;
	background:url(Graphics/DividerLeft.gif) no-repeat;
}

.DividerCards {
	display:inline-block;
	width:38px;
	height:33px;
	background:url(Graphics/DividerCards.gif) no-repeat;
}

.DividerMiddle {
	display:inline-block;
	width:70%;
	height:33px;
	background:url(Graphics/DividerMiddle.gif) repeat-x;
}

.DividerMiddleMenu {
	display:inline-block;
	width:100px;
	height:33px;
	background:url(Graphics/DividerMiddle.gif) repeat-x;
}

.DividerRight {
	display:inline-block;
	width:98px;
	height:33px;
	background:url(Graphics/DividerRight.gif) no-repeat;
}

#ShareButtons {
	margin-top:0.5em;
	margin-bottom:0.5em;
}

.High1R {
	font-size:1.2em;
	font-style:italic;
	font-weight:bold;
	text-align:right;	
	color:#ffffff;
	background-color:#003FBD;
	padding-top:0.4em;
	padding-bottom:0.4em	
}

.High1L {
	font-size:1.2em;
	font-style:italic;
	font-weight:bold;
	text-align:left;
	color:#ffffff;
	background-color:#003FBD;
	padding-top:0.4em;
	padding-bottom:0.4em;	
}

.High2R {
	font-style:normal;
	font-weight:bold;
	text-align:right;	
	color:#ffffff;
	background-color:#00287B;
}

.High2L {
	font-style:normal;
	font-weight:bold;
	text-align:left;
	color:#ffffff;
	background-color:#00287B;
}

.High3R {
	font-style:normal;
	font-weight:bold;
	text-align:right;	
	color:#ffffff;
	background-color:#003FBD;
}

.High3L {
	font-style:normal;
	font-weight:bold;
	text-align:left;
	color:#ffffff;
	background-color:#003FBD;
}

.HighGame {
	font-size:1.1em;
	font-style:normal;
	font-weight:bold;
	text-align:center;
	padding-top:0.4em;
	padding-bottom:0.6em;
}

.AdHeading {
	font-size:1.05em;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#000000;
}

.AdText {
	font-family:Arial, Helvetica, sans-serif;
	color:#000000;
}

.AdSite {
	font-family:Arial, Helvetica, sans-serif;
	color:#008000;
}

.CenterHeading {
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-style:normal;
	font-weight:bold;
	text-align:center;
	color:#0000CC;
	padding-bottom:1.0em;
}

#Links {
	font-size:0.9em;
	font-weight:400;
	text-align:center;
	padding:2em 0;
}

.Link:link,.Link:active,.Link:visited {
	color:rgb(82, 107, 187);
}

.Link:hover {
	color:rgb(32, 243, 250);
}

#Copyright {
	font-size:0.9em;
	color:#808080;
	font-weight:400;
	margin-top:1.0em;
	margin-bottom:0.5em;
	text-align:center;
}

.GreyLinks a:link,td.div.GreyLinks a:active,td.div.GreyLinks a:visited {
	color:#808080;
}

.GreyLinks a:hover {
	color:#0000ff;
}

.b {
	font-weight:400;
	color:#000000;
}

.Medium,td.Medium {
	font-size:0.9em;
}

.Small,td.Small {
	font-size:0.75em;
}

.Half {
	margin-top:0.5em;	
}

.Red {
	color:#c00000;
}

.RedSuits, .BlackSuits {
	display:inline-block;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-style:normal;
	font-weight:bold;
	vertical-align:middle;	
}

.RedSuits {
	color:#D00000;
}

.BlackSuits {
	color:#000000;
}

.Spade, .Heart, .Club, .Diamond {
	display:inline-block;
	width:10px;
	height:12px;
	margin:0 1px;
	vertical-align:middle;
}

.Spade {
	background:url(Graphics/BulletSpade.gif) no-repeat;
}

.Heart {
	background:url(Graphics/BulletHeart.gif) no-repeat;
}

.Club {
	background:url(Graphics/BulletClub.gif) no-repeat;
}

.Diamond {
	background:url(Graphics/BulletDiamond.gif) no-repeat;
}

ul.NoBullets {
    list-style-type:none;
    padding:0px;
    margin:0px;
}

.SpadeBullet, .HeartBullet, .ClubBullet, .DiamondBullet, .BookOpenBullet {
    padding-left:16px;
	padding-top:0.2em;	
	padding-bottom:0.2em;
}

.SpadeBullet {
	background:url(Graphics/BulletSpade.gif) no-repeat left center;
}

.HeartBullet {
	background:url(Graphics/BulletHeart.gif) no-repeat left center;
}

.ClubBullet {
	background:url(Graphics/BulletClub.gif) no-repeat left center;
}

.DiamondBullet {
	background:url(Graphics/BulletDiamond.gif) no-repeat left center;
}

.BookOpenBullet {
	padding-left:20px;
	background:url(Graphics/BookOpen.gif) no-repeat left center;
}

.Center {
	display:block;	
	text-align:center;
	margin:auto
}

.Platform {
    display:inline-block;
	margin: 0 1em;
}

.AppStore {
    display:inline-block;
    vertical-align:middle;
	width:135px;
    height:40px;
	background:url(Graphics/AppStore.gif) no-repeat;
}

.Android {
    display:inline-block;
    vertical-align:middle;
	width:32px;
    height:38px;
	background:url(Graphics/Android.gif) no-repeat;
}

.Windows {
    display:inline-block;
    vertical-align:middle;
	width:48px;
    height:42px;
	background:url(Graphics/WindowsLogo.jpg) no-repeat;
}

.Macintosh {
    display:inline-block;
    vertical-align:middle;
	width:35px;
    height:42px;
	background:url(Graphics/Apple.gif) no-repeat;
}

.PlatformText {
	display:inline-block;
	font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
    vertical-align:middle;
	font-style:normal;
	font-weight:bold;
	margin-left:2px;
	color:#000000;
}

.GameType {
	margin-bottom:2em;
}

.Screenshot {
	display:inline-block;
	width:256px;
	height:157px;
    vertical-align:top;
	border:solid 1px black;
	box-shadow: 6px 6px 15px rgba(0,0,0,0.5);	
	margin:0.5em 1em 0.5em 0;
}

.ScreenshotContain {
	display:inline-block;
	width:100%;
	max-width:650px;
	margin:0.5em 0.5em 0 0;
}

.ScreenshotHeader {
	font-weight:800;
	font-size:1.3em;
	margin-bottom:0.5em;
}

.ScreenshotText {
	margin-top:0.4em;
	margin-bottom:0.4em;	
}

.ScreenshotRules {
	margin-top:0.2em;
}

.Scoring {
	display:table;
}

.ScoringRow {
	display:table-row;
}

.ScoringCell {
	display:table-cell;
	padding:0 2em;
	text-align:left;
}

.RightColumnAd {
	margin:1em 0;
}

.HorizontalAd {
}

.Resizing_Image {
	width:100%;
	height:auto;
	margin-left:auto;
	margin-right:auto;
}

#BannerAd_SolitaireCity_iOS {
	max-width:800px;
	max-height:90px;
	background:url("Graphics/SolitaireCityBannerAd.jpg") no-repeat;
	background-size: 100% auto;	
	border:solid 1px black;
	box-shadow: 6px 6px 15px rgba(0,0,0,0.5);	
}

#SolitaireCity_Logo {
	max-width:500px;
	max-height:70px;
	background:url("Graphics/SolitaireCity.gif") no-repeat;
	background-size:100% auto;
}

#SolitaireCity_BannerAd {
	position:absolute;
	left:0; 
	right:0; 
	margin-inline:auto;
	bottom:20px;
	width:100vw;
	max-width:800px;
	height:11.25vw;
	max-height:90px;
	background:url("Graphics/SolitaireCityBannerAd.jpg") no-repeat;
	background-size:contain;
	background-position:center bottom;
	box-shadow: 6px 6px 15px rgba(0,0,0,0.5);
}

#SolitaireCity_BannerAd:hover {
	cursor:pointer;	
}

#SolitaireCity_BannerAdTop:hover {
	cursor:pointer;	
}

.GameScreenshot h3 {
	color:#0060ff;
	margin-top:0.2em;
	text-align: center;
}
.GameScreenshot {
	width:280px;
	margin:10px;
	padding:5px;
	text-align:center;
	border:solid 1px black;
	box-shadow: 6px 6px 15px rgba(0,0,0,0.5);
	float:left;
}

.GameScreenshot a:hover {
	cursor:pointer;
}