html {
	font-size:62.5%;
}

body {
	background-color:#fff;
	margin:0;
	padding:0;
	font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size:1em;
	line-height:1.6em;
	color:#000;
}



form {
	border:0;
	padding:0;
	margin:0;
}

p,
li,
input,
textarea,
label,
select {
	font-size:1.2em;
}



li li {
	font-size:1em;
}

a img {
	border:0;
}



#holder {
	width:960px;
	padding:0;
	margin:0 auto;
}

a {
	color: #00359C;
}

a:hover {
	text-decoration: underline;
}	

/* ******************      HEADER        ******************* */

#header {
	width:960px;
	float:left;
	margin:0;
	padding:0;
}


#header h1 {
	width:476px;
	height:79px;
	font-size:10px;
	line-height:10px;
	text-indent:-9999px;
	float:left;
	margin:20px 0 20px 0;
	padding:0;
	background-position:0 0;
	background-repeat:no-repeat;
	background-image:url(/static/images/magnetic_poetry_logo.gif);
}

#header h1 a {
	width:476px;
	height:79px;
	display:block;
}


#socialmedia  {
	float:left;
	margin:1em 0;
	padding:0;
	width:402px;
	height:102px;
	background-image:url(/static/images/home-socialmedia.gif);
	background-position:0 0;
	background-repeat:no-repeat;
}

#socialmedia h3,
#socialmedia h5 {
	text-indent:-9999px;
	font-size:10px;
	line-height:10px;
	float:left;
}

#socialmedia h4 {
	clear:both;
	width:300px;
	margin:55px 0 0 90px;
	font-weight:normal;
	font-size:1.2em;
	line-height:1.4em;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#fff;
}

#socialmedia h4 a {
	color:#fff;
	text-decoration:none;
}

#socialmedia ul {
	float:left;
	margin:5px 0 0 157px;
	padding:0;
	list-style-type:none;
	width:140px;
	height:40px;
}

#socialmedia li {
	float:left;
	margin:0;
	padding:0;
	list-style-type:none;
	text-indent:-9999px;
}

#socialmedia li#sm1 {
	width:40px;
	height:40px;
	margin:0 4px 0 0;
}

#socialmedia li#sm2 {
	width:40px;
	height:40px;
	margin:0 4px 0 0;
}

#socialmedia li#sm3 {
	width:40px;
	height:40px;
	margin:0 4px 0 0;
}

#socialmedia li a {
	width:40px;
	height:40px;
	display:block;
}

#social-buttons {
	float:left;
	width: 205px;
	margin: 5px 0 0 0;
}	

.tweet-button {
	float:left;
}	

.fb-like {
	float:left;
}

#kit-links {margin: 0 0 0 0; overflow:hidden; padding: 8px 0 0 0;}
#kit-links ul {margin: 0; padding: 0;}
#kit-links ul li {float:left; margin: 0 0 0 14px; list-style-type:none; overflow:hidden;}
#kit-links ul li a {color: #00359C; text-decoration: none;}
#kit-links ul li a:hover {text-decoration: underline;}


#copyright {
	clear:both;
	text-align:center;
	font-size:1.1em;
	font-weight:normal;
	padding:1em 0 1em 0;
	margin:0;
	color:#444;
}

#credits {
	clear:both;
	text-align:center;
	font-size:1.1em;
	font-weight:normal;
	padding:0;
	margin:0;
	color:#444;
}

#credits a {
	color: #444;
}

#playmagpo h1 {
	font-size:2em;
}

div#gamebox  {
	z-index:-1;   
	width:960px;
	height: 510px;
	clear:both;
	margin:0;
	padding:0;
	overflow:hidden;
	cursor:move;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;

}
div#playarea  {
	width:98%;
	height: 455px;
	margin-left:18px;
	margin-top:0px;
	padding:0;
	z-index:-1;   
}

div#wordbin > div {float:right;}
div#wordbin {
	visibility:hidden;	
	float:right;
	margin:5px;
	padding:5px;
	width:280px;
	border: 1px solid #AAAAAA;
	border-bottom: 2px solid #222222 ;
	border-right: 2px solid #222222;
}


.binfooter {
	margin:0;
	float:right;	
	font-size:1.6em;
}
.gamefooter {
	margin:10px 10px 0 0;
	font-size:1.6em;
}
#gameDone {
	float:left;
}
#gameReply {
	float:left;
}

h2.placeholder  {color:#bbb}
h3.placeholder  {color:#bbb}


/* draggable */
/* *********** ADDED BY FLACO flaco@zacarias.com **************** */
.draggable { 
	position:relative;
	visibility:hidden;	
	display:table; 
	width:1px; 
	height: 20px; 
	padding-top:2px ; 
	padding-bottom:1px ; 
	padding-right:5px; 
	padding-left:5px;  
	margin:2px ; 
	text-align:center; 
	background:#fff;
	border: 1px solid #AAAAAA;
	border-bottom: 2px solid #222222 ;
	border-right: 2px solid #222222;
}

.draggable > div { 
	display: table-cell;
	color: #222222;
	font-family:"Times New Roman, Times, serif";
	font-weight:normal;
	font-size:1.6em;
	line-height:1.4em;
	}


label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }

.validateTips { border: 1px solid transparent; padding: 0.3em; }

/* *********** ADDED BY FLACO flaco@zacarias.com This overwrite styles on the game stylesheet **************** */

.draggable { 
	position:relative;
	visibility:hidden;	
	display:table; 
	width:1px; 
	height: 20px; 
	padding-top:2px ; 
	padding-bottom:1px ; 
	padding-right:5px; 
	padding-left:5px;  
	margin:2px ; 
	text-align:center; 
	background:#fff;
	border: 1px solid #AAAAAA;
	border-bottom: 2px solid #222222 ;
	border-right: 2px solid #222222;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow:none;
}

/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
	-moz-border-radius-topleft: 0 !important;
	-webkit-border-top-left-radius: 0 !important;
	-khtml-border-top-left-radius: 0 !important;
	border-top-left-radius: 0 !important;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
	-moz-border-radius-topright: 0 !important;
	-webkit-border-top-right-radius: 0 !important;
	-khtml-border-top-right-radius: 0 !important;
	border-top-right-radius: 0 !important;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
	-moz-border-radius-bottomleft: 0 !important;
	-webkit-border-bottom-left-radius: 0 !important;
	-khtml-border-bottom-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
	-moz-border-radius-bottomright: 0 !important;
	-webkit-border-bottom-right-radius: 0 !important;
	-khtml-border-bottom-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* ************************ */

@font-face {
    font-family: 'UbuntuMedium';
    src: url('Ubuntu-M-webfont.eot');
    src: url('../fonts/ubuntu/Ubuntu-M-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ubuntu/Ubuntu-M-webfont.woff') format('woff'),
         url('../fonts/ubuntu/Ubuntu-M-webfont.ttf') format('truetype'),
         url('../fonts/ubuntu/Ubuntu-M-webfont.svg#UbuntuMedium') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family:'UbuntuBold';
    src: url('../fonts/ubuntu/Ubuntu-B-webfont.eot');
    src: url('../fonts/ubuntu/Ubuntu-B-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ubuntu/Ubuntu-B-webfont.woff') format('woff'),
         url('../fonts/ubuntu/Ubuntu-B-webfont.ttf') format('truetype'),
         url('../fonts/ubuntu/Ubuntu-B-webfont.svg#UbuntuBold') format('svg');
    font-weight: normal;
    font-style: normal;

}


#floatingheader {
	margin:.5em auto 1em;
	width:96%;
	height:11em;
	position:relative;
}

#floatingheader h1 {
	float:right;
	width:228px;
	height:39px;
	background-image:url(../img/magpo-logo-game.png);
	background-repeat:no-repeat;
	background-position:0 0;
	font-size:1em;
	line-height:1em;
	padding:0;
	margin:0;
	text-indent:-9999px;
}

#floatingheader h1 a {
	width:228px;
	height:39px;
	display:block;
}

#floatingheader h2 {
	font-family:'UbuntuMedium';
	font-weight:normal;
	font-size:2em;
	color:#666;
	float:left;
	position: absolute;
	bottom: 0;
}

#floatingheader h2 strong {
	font-family:'UbuntuBold';
	font-weight:normal;
	display:block;
	font-size:2em;
	padding:.3em 0 0 0;
}


#floatingheader h2 a {
	text-decoration:none;
	color:#00359c;
}

#floatingheader .logo-buy-button {
	float:right;
	display:block;
	width: 228px;
	height: 80px;
}

#floatingheader .buy-kit {
	float:right;
}

#floatingheader .buy-kit a.Original{
	background-image:url(../img/buythiskit-original.png);
	background-repeat:no-repeat;
	background-position:0 0;
	font-size:1em;
	line-height:1em;
	padding:0;
	margin:0;
	text-indent:-9999px;
	width: 200px;
	height: 69px;
	display: block;
}

#floatingheader .buy-kit a.Geek{
	background-image:url(../img/buythiskit-geek.png);
	background-repeat:no-repeat;
	background-position:0 0;
	font-size:1em;
	line-height:1em;
	padding:0;
	margin:0;
	text-indent:-9999px;
	width: 200px;
	height: 69px;
	display: block;
}

#floatingheader .buy-kit a.Nature{
	background-image:url(../img/buythiskit-nature.png);
	background-repeat:no-repeat;
	background-position:0 0;
	font-size:1em;
	line-height:1em;
	padding:0;
	margin:0;
	text-indent:-9999px;
	width: 200px;
	height: 69px;
	display: block;
}

#floatingheader .buy-kit a.Love{
	background-image:url(../img/buythiskit-love.png);
	background-repeat:no-repeat;
	background-position:0 0;
	font-size:1em;
	line-height:1em;
	padding:0;
	margin:0;
	text-indent:-9999px;
	width: 200px;
	height: 69px;
	display: block;
}

#floatingheader .buy-kit a.Mustache{
	background-image:url(../img/buythiskit-mustache.png);
	background-repeat:no-repeat;
	background-position:0 0;
	font-size:1em;
	line-height:1em;
	padding:0;
	margin:0;
	text-indent:-9999px;
	width: 200px;
	height: 69px;
	display: block;
}

#floatingheader .buy-kit a.Poet{
	background-image:url(../img/buythiskit-poet.png);
	background-repeat:no-repeat;
	background-position:0 0;
	font-size:1em;
	line-height:1em;
	padding:0;
	margin:0;
	text-indent:-9999px;
	width: 200px;
	height: 69px;
	display: block;
}

#floatingheader .buy-kit a.FirstWords{
	background-image:url(../img/buythiskit-firstwords.png);
	background-repeat:no-repeat;
	background-position:0 0;
	font-size:1em;
	line-height:1em;
	padding:0;
	margin:0;
	text-indent:-9999px;
	width: 200px;
	height: 69px;
	display: block;
}

#floatingheader .buy-kit a.Kids{
	background-image:url(../img/buythiskit-kids.png);
	background-repeat:no-repeat;
	background-position:0 0;
	font-size:1em;
	line-height:1em;
	padding:0;
	margin:0;
	text-indent:-9999px;
	width: 200px;
	height: 69px;
	display: block;
}

#holder {
	background-color:#fff;
	background-image:url(../img/bg-top.png);
	background-repeat:no-repeat;
	background-position:bottom left;
	margin:0 auto;
	border:3px solid #c8d2dd;
	border-top-left-radius: 1em;
	border-top-right-radius: 1em;
	padding:0;
	width:96%;
}


#gamebox {
	background-color:transparent !important;
	width:100% !important;
}

#gamebox #wordbin {
	background-color:transparent !important;
	background-image:none !important;
	border:0;
	padding:1em;
}

 .footerbar {
	font-size:1em !important;
	float:left;
	width:100%;
	padding:0 0 2em 0;
}

.footerbar   input[type="submit"]  {
	padding:.4em .8em;
	font-weight:bold;
	text-transform:uppercase;
	font-size:.75em !important;
	line-height:1em;
	color:#fff !important;
	border:0;
    -moz-border-radius: .5em;
    -webkit-border-radius: .5em;
    border-radius: .5em !important;
	background-color:#2855ab; 
	background-image: -moz-linear-gradient(top, #2855ab, #012b7d 100.0%) !important; 
	background-image: -webkit-linear-gradient(top, #2855ab, #012b7d 100.0%) !important; 
	background-image: -o-linear-gradient(top, #2855ab, #012b7d 100.0%) !important; 
	background-image: -ms-linear-gradient(top, #2855ab, #012b7d 100.0%) !important; 
	background-image: linear-gradient(top, #2855ab, #012b7d 100.0%) !important;
	width:auto;
	margin:0;
}


.footerbar input#done {
	background-color:#c00; 
	background-image: -moz-linear-gradient(top, #c00, #600 100.0%) !important; 
	background-image: -webkit-linear-gradient(top, #c00, #600 100.0%) !important; 
	background-image: -o-linear-gradient(top, #c00, #600 100.0%) !important; 
	background-image: -ms-linear-gradient(top, #c00, #600 100.0%) !important; 
	background-image: linear-gradient(top, #c00, #600 100.0%) !important;
	margin-left:5em;
}

.footerbar input#reply {
	background-color:#c00; 
	background-image: -moz-linear-gradient(top, #c00, #600 100.0%) !important; 
	background-image: -webkit-linear-gradient(top, #c00, #600 100.0%) !important; 
	background-image: -o-linear-gradient(top, #c00, #600 100.0%) !important; 
	background-image: -ms-linear-gradient(top, #c00, #600 100.0%) !important; 
	background-image: linear-gradient(top, #c00, #600 100.0%) !important;
	margin-left:1em;
}

.footerbar input#restart {
	float:right;
	margin-right:1em;
}

.footerbar input#more {
	float:right;
	margin-right:1em;
}

.gamefooter {
	float:left;
	width:100%;
	clear:none;
	margin:0;
}



#holder:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

#gamebox.playkits {
	height: auto;
}	

#playarea.playkits {
	height: auto;
}	    
    
ul#playkits {
	overflow:hidden;
	margin-left: 40px;
	margin-top: 20px;
}    
    
ul#playkits li{
	margin: 10px 40px 10px 0;
	padding: 0;
	width: 320px;
	height: 165px;
	background-position: 0 0;
	background-repeat: no-repeat;
	float: left;
	text-indent: -9999px;
	list-style-type:none;
}

ul#playkits li a {
	width: 320px;
	height: 165px;
	display: block;
}


ul li#kit0 {
	background-image:url(/static/images/png/kit-original.png);
	clear:both;
}

ul li#kit1 {
	background-image:url(/static/images/png/kit-poet.png);
}

ul li#kit2 {
	background-image:url(/static/images/png/kit-love.png);
}

ul li#kit3 {
	background-image:url(/static/images/png/kit-mustache.png);
}

ul li#kit4 {
	background-image:url(/static/images/png/kit-nature.png);
	height:165px;
}

ul li#kit5 {
	background-image:url(/static/images/png/kit-geek.png);
	height:165px;
}





/* 
Media Queries para todos los dispositivos

FUENTE: http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries 
*/


/* 
Smartphones (vertical y horizontal)
_________________________________________ */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {




}



/* 
Smartphones (horizontal) 
_________________________________________ */

@media only screen 
and (min-width : 321px) {

/* 

Estilos 

*/

}



/* 
Smartphones (vertical) 
_________________________________________ */

@media only screen 
and (max-width : 320px) {

/* 

Estilos 

*/

}



/* 
iPads (vertical y horizontal) 
_________________________________________ */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {

/* 

Estilos 

*/

}


/* 
iPads (horizontal)
_________________________________________ */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {

.draggable { 
	height: 2em; 
	padding:.2em .5em .1em .5em;
	margin:.3em;
}


.draggable > div { 
	font-size:1.8em;
	line-height:1.4em;
	}

}


/*
iPads (vertical) 
_________________________________________ */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {


#holder {
	height:800px;
}

#gamebox {
	height:750px !important;
}


.draggable { 
	height: 2em; 
	padding:.2em .5em .1em .5em;
	margin:.3em;
}

.draggable > div { 
	font-size:2.5em;
	line-height:1.4em;
	}




}





/* 
iPhone (horizontal)
_________________________________________ */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) {


#holder {
	height:400px !important;
}

#gamebox {
	height:350px !important;
}


.draggable { 
	height: 3em; 
	padding:.4em .7em .2em .7em;
	margin:.5em;
}

.draggable > div { 
	font-size:3em;
	line-height:1.4em;
	}

#wordbin {
	width:40% !important;
}


}


/*
iPhone (vertical) 
_________________________________________ */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) {


#holder {
	height:800px !important;
}

#gamebox {
	height:750px !important;
}


.draggable { 
	height: 3.5em; 
	padding:.4em .7em .2em .7em;
	margin:.5em;
}

.draggable > div { 
	font-size:3.5em;
	line-height:1.4em;
	}
	
#wordbin {
	width:40% !important;
}


}


/* 
Ordenadores y portátiles 
_________________________________________ */

@media only screen 
and (min-width : 1224px) {

/* 

Estilos 

*/


}


/* 
Pantalla grande
_________________________________________ */

@media only screen 
and (min-width : 1824px) {

/* 

Estilos 

*/

}


/* 
iPhone 4
_________________________________________ */

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {

/* 

Estilos 

*/

}