/* CSS Styles Document
						   4DTicTacToe.me site 
Styles index formatting	
*/

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}	
									/* Roughly going down the page */
* {
	margin: 0;
	padding: 0;
}

body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif; 
	line-height: 3ex;
	background-image: radial-gradient(#f2f0f4, #f2f0f4 33%, #d9d2df );
	background-image: -moz-radial-gradient (#f2f0f4, #f2f0f4 33%, #d9d2df );
	color:#333;
	text-align: center;
}

#main {
	width: 90%;
	margin: 0 auto;
	text-align:center;
	padding: 0 0 32px 0;
}	

#top_left {
  position: absolute;
  left: 20px; 
  top:16px;
}

#home_btn {
  cursor:pointer;
}

#prev_style_btn {
	display:inline-block;
	position: absolute;
	left: 4.25rem; top:0;
	margin-top:0.688rem;
	padding: 0 0.75rem 0.063rem 0.75rem;
	background-color: white;
	background:linear-gradient(to bottom, #fff 20%, #efefef 100%);
	color: #555;
	text-decoration: none;
	border: 1px solid #ccc;
	border-radius: 10px;
	font-size: 0.875rem;
	cursor: pointer;
}
#prev_style_btn:hover {
	background:linear-gradient(to bottom, #fff 20%, #ccc 100%);
	background-color:#fff;
	color: #000;
}

#bottom-left {text-align:left; font-size:smaller; color:purple; margin-top:6em;}

																/* General */
a { text-decoration: none; color:Blue;}
a:hover {color:#f0a;}

h1 { 
	font-family: "Lucida Grande", Arial, sans-serif; font-weight: 500; 
	text-align:center; 
	font-size: 2.2em;  
	color: #0aa; 
	margin: 0.65em 0; 
}

p { margin-bottom:0.8em; line-height:2.5ex;}

.right { text-align: right; }
.left { text-align: left; }
.red { color: red; }
.blue { color: blue; }

																/* Images */
.img_thumb p {
	margin-top: -8px;
	color: #0aa; 
	font-size: 1.2em;  
    text-align: center;
    font-family: "Lucida Grande", Arial, sans-serif; font-weight: 500; 
    width: 300px;
}


img.floatleft {
	float: left;
	margin-right: 10px;
}
	
img.floatright {
	float: right;
	margin-left: 10px;
}

																/* Areas */
.inline { display:inline-block; }

div.floatleft {
	float: left;
	margin-right: 12px;
}
	
div.floatright {
	float: right;
	margin-left: 12px;
}

																/* Print */
@media print{
	body{ background-color:#FFFFFF; background-image:none; 
	color:#222; }
	#main{ width:95%;}
	#footer{ display:none;}  
	#cpu{ display:none;}  
	.only-print { display:block !important;}
}

.only-print { display: none;}

/* End */