body {
	background: url('../images/templates/portfolio/background.png') top left repeat;
	font-family: Arial, Verdana, sans-serif;
	color: #555;
	line-height: 24px;
	}
	a, a:visited {
		color: #3295C6;
		}
	a:hover { color: #6cf; }
	.button {
		background: url("../images/button.png") repeat-x scroll left top #F9CF4C;
		color: #fff !important;
		display: inline-block;
		font-size: 18px;
		font-weight: bold;
		padding: 5px 10px;
		cursor: pointer;
		border: 1px solid #c90;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		-o-border-radius: 5px;
		border-radius: 5px;
		-webkit-text-shadow: 1px 1px #c90;
		-moz-text-shadow: 1px 1px #c90;
		-o-text-shadow: 1px 1px #c90;
		text-shadow: 1px 1px #c90;
		-webkit-box-shadow: 0 0 3px #ff0 inset;
		-moz-box-shadow: 0 0 3px #ff0 inset;
		-o-box-shadow: 0 0 3px #ff0 inset;
		box-shadow: 0 0 3px #ff0 inset;
		}
	input.button {
		font-family: Arial, sans-serif;
	    height: 36px;
	    padding: 0 10px;
	    cursor: pointer;
	    vertical-align: bottom;
		}
	.button:hover, .qq-upload-button:hover {
		background-position: 0 -200px;
		border-color: #a70;
		}
	.button:active, .button.active{
		background: #fc0;
		border-color: #a70;
		-webkit-box-shadow: 0 0 3px #aa0 inset;
		-moz-box-shadow: 0 0 3px #aa0 inset;
		-o-box-shadow: 0 0 3px #aa0 inset;
		box-shadow: 0 0 3px #aa0 inset;
		}
	#page {
		width: 987px;
		margin: 20px auto 0;
		position: relative;
		min-height: 920px;
		-webkit-text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
		-moz-text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
		-o-text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
		text-shadow: 1px 1px 0 rgba(255,255,255,0.8);
		}
		#page-top {
			background: url('../images/templates/portfolio/page-top.png') top left no-repeat;
			height: 460px; width: 100%;
			position: absolute; top: 0; left: 0;
			}
		#page-bottom {
			background: url('../images/templates/portfolio/page-bottom.png') top left no-repeat;
			height: 460px; width: 100%;
			position: absolute; bottom: 0; left: 0;
			}
		#page-middle {
			background: url('../images/templates/portfolio/page-middle.png') top left repeat-y;
			width: 100%;
			position: absolute; bottom: 440px; top: 440px; left: 0;
			}
		#content {
			width: 920px;
			margin: 0 auto;
			padding: 40px 20px;
			position: relative;
			}
			h1 {
				display: block;
				width: 920px; height: 100px;
				background: url('../images/templates/portfolio/title.png') center center no-repeat;
				text-indent: -9999px;
				margin-bottom: 10px;
				position: relative;
				}
				h1 a {
					position: absolute;
					top: 15px; left: 0;
					display: block;
					width: 230px; height: 60px;
					}
			#portfolio-image {
				width: 920px;
				height: 140px;
				background-color: #bbb;
				text-align: center;
				background-image: url('../images/templates/portfolio/default-banner.jpg');
				background-position: center center;
				background-size: cover;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
			#edit-portfolio-image-area { 
				margin: 0 20px;
				background: #ddd;
				-webkit-border-radius: 0 0 3px 3px;
				-moz-border-radius: 0 0 3px 3px;
				-o-border-radius: 0 0 3px 3px;
				border-radius: 0 0 3px 3px;
				}
				#edit-portfolio-image-area label { font-size: 12px; font-style: italic; }
			#portfolio-info { margin: 40px 0; }
				#portfolio-username {
					margin-top: 40px;
					font-size: 32px;
					display: inline;
					margin-right: 10px;
					}
				#portfolio-rank {
					color: #999;
					font-size: 24px;
					font-weight: bold;
					}
				#portfolio-info label {
					font-style: italic;
					font-size: 14px;
					line-height: 18px;
					}
				#portfolio-info textarea {
					width: 913px;
					height: 80px;
					font-family: Arial, Verdana, sans-serif;
					color: #666;
					font-size: 16px;
					line-height: 20px;
					resize: none; 
					}
			#no-games {
				background: #bbb;
				padding: 20px;
				text-align: center;
				font-weight: bold;
				text-shadow:  none;
				color: #888;
				margin-bottom: 10px;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				-o-border-radius: 3px;
				border-radius: 3px;
				}
			.portfolio-game-tile { overflow: auto; margin: 20px 0; position: relative; }
				.portfolio-game-thumb {
					display: block;
					margin-right: 20px;
					float: left;
					width: 221px; height: 166px;
					background: #bbb;
					position: relative;
					-webkit-border-radius: 3px;
					-moz-border-radius: 3px;
					-o-border-radius: 3px;
					border-radius: 3px;
					}
					.portfolio-game-thumb:before {
						position: absolute;
						content: "";
						background: #3295C6;
						width: 40px; height: 40px;
						left: 90px; top: 65px;
						-webkit-border-radius: 20px;
						-moz-border-radius: 20px;
						-o-border-radius: 20px;
						border-radius: 20px;
						}
					.portfolio-game-thumb:hover:before {
						background: #6cf;
						}
					.portfolio-game-thumb:after {
						position: absolute;
						content: "";
						width: 0; height: 0;
						left: 103px; top: 75px;
						border-left: 20px solid #fff;
						border-top: 10px solid transparent;
						border-bottom: 10px solid transparent; 
						}
				.portfolio-game-tile h3 {
					font-size: 24px;
					display: inline;
					margin-right: 5px;
					}
				.portfolio-game-stats {
					color: #999;
					font-size: 14px;
					font-style: italic;
					}
				.portfolio-game-tile label {
					font-style: italic;
					font-size: 14px;
					line-height: 18px;
					}
				.portfolio-game-tile textarea {
					width: 673px;
					height: 100px;
					font-family: Arial, Verdana, sans-serif;
					color: #666;
					font-size: 16px;
					line-height: 20px;
					resize: none; 
					}
				a.portfolio-move-game-up, a.portfolio-move-game-down {
					position: relative;
					font-size: 12px;
					font-weight: bold;
					margin-left: 17px;
					margin-right: 10px;
					}
					a.portfolio-move-game-up:before {
						position: absolute;
						left: -13px; top: 6px;
						content:"";  
						display: block;
						width: 6px; height: 6px; 
						background-color: #3295C6;
						}
					a.portfolio-move-game-up:after {
						position: absolute;
						left: -16px; top: 2px;
						content:"";  
						display: block;
						border-bottom: 6px solid #3295C6;
						border-left: 6px solid transparent;
						border-right: 6px solid transparent;
						}
					a.portfolio-move-game-up:hover:before { background-color: #6cf; }
					a.portfolio-move-game-up:hover:after { border-bottom-color: #6cf; }
					a.portfolio-move-game-down:before {
						position: absolute;
						left: -13px; top: 2px;
						content:"";  
						display: block;
						width: 6px; height: 6px; 
						background-color: #3295C6;
						}
					a.portfolio-move-game-down:after {
						position: absolute;
						left: -16px; top: 6px;
						content:"";  
						display: block;
						border-top: 6px solid #3295C6;
						border-left: 6px solid transparent;
						border-right: 6px solid transparent;
						}
					a.portfolio-move-game-down:hover:before { background-color: #6cf; }
					a.portfolio-move-game-down:hover:after { border-top-color: #6cf; }
				a.portfolio-remove-game {
					color: #b00;
					font-size: 12px;
					font-weight: bold;
					}
					a.portfolio-remove-game:before { content:"\00D7 "; font-size: 20px; margin-right: 3px; display: inline-block; vertical-align: bottom; }
					a.portfolio-remove-game:hover { color: #f00; }
				
			.portfolio-actions {
				margin: 40px 0; 
				text-align: right;
				background: #cfcfcf;
				border-radius: 8px;
				padding: 5px;
				}
				.portfolio-actions span { display: inline-block; }
					.portfolio-actions span a { font-weight: bold; }
				
			#portfolio-public-link-area { margin-bottom: 40px; }
				#portfolio-public-link { width: 300px;}

.notice, .alert, .error { margin-bottom: 20px; }

/* === Modal Overlay === */

#simplemodal-overlay { background: black; }
#simplemodal-container { 
	background: white; 
	width: 942px; 
	height: auto; 
	padding: 10px; 
	position: relative;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	}
#submitable_games_description { margin-bottom: 10px; }
.simplemodal-close {
	content: "\00D7";
	position: absolute;
	top: 10px; right: 10px;
	width: 20px; height: 20px;
	background: #3295C6;
	color: #fff !important;
	cursor: pointer;
	text-align: center;
	line-height: 20px;
	}
	.simplemodal-close:after {
		content: "\00D7";
		font-size: 20px;
		font-weight: bold;
		}
	.simplemodal-close:hover { background: #6cf; }
#simplemodal-container .nav { 
	background: #eee;
	border: 1px solid #ccc;
	padding: 5px;
	margin-top: 10px; 
	float: right;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	}	
	#simplemodal-container .nav .button {
		font-size: 14px; 
		padding: 4px;
		line-height: 14px;
		}

/* === Gamecards === */

.page_outer{
	position: relative;
	overflow: hidden;
	padding: 10px 0 0 10px;
	background: #c3bba4;
	box-shadow: 0 0 3px #666 inset;
	width: 932px;
	}
	.page_outer #ajax_loader_bar {
		position: absolute; top: 60px; margin: 0 auto;
		z-index: 200;
		}
	.no-results {
		margin: 40px;
		text-align: center;
		font-weight: bold;
		}
	.page_container { float: left; }

.gamecard {
	position: relative;
	border: 1px solid #666;
	background-color: #fff;
	color: #666;
	float: left;
	font-size: 12px;
	overflow: hidden;
	margin: 0 10px 10px 0;
	width: 221px; height: 166px;
	line-height: 14px;
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5);
	-moz-box-shadow: 0 0 3px rgba(0,0,0,0.5);
	-o-box-shadow: 0 0 3px rgba(0,0,0,0.5);
	box-shadow: 0 0 3px rgba(0,0,0,0.3);
	}
	.gamecard .thumb { width: 221px; height: 166px; }
	.gamecard-info{
		position: absolute; top:0;
		background: #f9eece url('../images/templates/game/gametile_bkg.png') top left repeat-x;
		padding: 3px 5px 5px;
		width: 211px;
		-webkit-text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
		-moz-text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
		-o-text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
		text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5);
		-moz-box-shadow: 0 0 3px rgba(0,0,0,0.5);
		-o-box-shadow: 0 0 3px rgba(0,0,0,0.5);
		box-shadow: 0 0 3px rgba(0,0,0,0.3);
		}
		.gamecard h3 {
			float: left;
			display: block;
			clear: both;
			font-size: 14px;
			width: 200px;
			margin-bottom: 2px;
			}
		.gamecard .gamecard-owner { display: none; }
			.gamecard .mechanic-name { font-weight: bold; }
	.gamecard-meta {
		position: absolute; bottom: 0;
		background: #f9eece;
		padding: 5px 1px 5px;
		width: 100%;
		text-align: center;
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5);
		-moz-box-shadow: 0 0 3px rgba(0,0,0,0.5);
		-o-box-shadow: 0 0 3px rgba(0,0,0,0.5);
		box-shadow: 0 0 3px rgba(0,0,0,0.5);
		}
		.gamecard-meta .button { font-size: 12px; padding: 4px; height: auto; }
		.gamecard-fun, .gamecard-difficulty { width: 65px; float: left; }
		.gamecard-ratings span {
			margin: 1px 0 3px;
			display: block;
			font-weight: bold;
			}
		.gamecard-fun { margin-right: 10px; }
		.gamecard-stats { clear: both; }
		.gamecard-time { margin-top: 3px; font-style: italic; color: #999; }
.gamecard-badges { position: absolute; top: 1px; right: 1px; z-index: 200; }