body {

    font-family: Tahoma, Arial, Sans-Serif;
    font-size:16px; /* Increased base font size */
    background-color:#EBE5E4;
    background-image:url(images/fondu.jpg);
    background-repeat:repeat-x;
    height: 100%;
    color: #505050;

}



#salta {

	width: 985px;

	margin-right: auto;

	margin-left: auto;

	margin-top: 25px;

}

#dalt {

	float: left;

	width: 985px;

	height: 10px;

	background-image:url(images/btop.png);

	background-repeat:no-repeat;

	font-weight: bold;

	font-size: 11px;

}

#peufinal {

	float: left;

	width: 985px;

	height: 15px;

	background-image:url(images/bbottom.png);

	background-repeat:no-repeat;

	background-position:bottom;

	font-size: 11px;

	margin-bottom: 15px;

}

#cap {

	float: left;

	width: 985px;

	height: 90px;

	background-image:url(images/bctop.png);

}

#logo {

	float: left;

	width: 900px;

	min-height: 50px;

	background-image:url(images/logo.png);

	background-repeat:no-repeat;

	margin-left: 25px;

	margin-top: 10px;

}

#logo h2 {

	padding-top: 50px;

	margin:0px;

	font-weight: bold;

	color:#1e491c;

	font-size: 14px;

}

#menu {

	float: left;

	width: 955px;

	height: 29px;

	margin: 0px 10px 0px 20px;

	background-image:url(images/menu.png);

	background-repeat:no-repeat;

}

#principal {

	float: left;

}

#principal ul {

	float: left;

	margin: 1px 0px 0px 8px;

	padding: 0px;

	list-style-type: none;

}

#principal ul li {

	float: left;

	font-size: 11px;

	color: #dee8f6;

	display: inline;

	margin: 0px;

	padding: 0px;

}

#principal li a {

    text-align: center;
    padding-right: 14px; /* Increased padding for better click/tap */
    padding-left: 14px;

	color:#FFFFFF;

	text-decoration: none;

	text-transform: uppercase;

	display: block;

	height: 26px;

	line-height: 25px;

	float: left;

	padding-top: 1px;

	font-weight: bold;

	-moz-border-radius: 5px;

	border-radius: 5px;

	margin: 0px 4px 0px 4px; /* Increased margin for better spacing */

}

#principal li a:hover {

	background-color: #1e491c;

	color: #FFFFFF;

}

#diseny {

	float: left;

	width: 985px;

	min-height: 200px;

	background-image:url(images/bcenter.png);

}

#conting {

	float: left;

	width: 985px;

	min-height: 300px;

}

#zona {

	float:left;

	width: 634px;

	padding-top: 10px;

}

.destacat {

	float:left;

	width: 584px;

	margin: 0px 0px 10px 20px;

	border: 1px solid #E6E6E6;

	background: url(images/fons.gif) repeat-x bottom #FFFFFF;

	padding: 15px 15px 15px 15px;

	-moz-border-radius: 5px;

	border-radius: 5px;

}

.destacat h3 {

	display: block;

	background-image:url(images/featured.png);

	background-repeat:no-repeat;

	height: 29px;

	margin: -5px -5px 0px -10px;

	padding: 5px 15px 5px 15px;

	font-size: 13px;

	color:#ffffff;

}

.contingut {

	float:left;

	width: 584px;

	margin: 0px 0px 10px 20px;

	border: 1px solid #E6E6E6;

	background: url(images/fons.gif) repeat-x bottom #FFFFFF;

	padding: 15px 15px 15px 15px;

	-moz-border-radius: 5px;

	border-radius: 5px;

}

.contingut h3 {

	display: block;

	background-image:url(images/featured.png);

	background-repeat:no-repeat;

	height: 29px;

	margin: -5px -5px 0px -10px;

	padding: 5px 15px 5px 15px;

	font-size: 13px;

	color:#ffffff;

}

.contingut h3 a {

	color:#ffffff;

	text-decoration: none;

}

.contingut .titol {

	display:block;

	padding-bottom: 3px;

}

.contingut h1 {

	margin:0;

	text-transform:capitalize;

	font-size:16px;

	color: #1e491c;

}

.contingut h1 a {

	display:block;

	color:#1e491c;

	text-decoration:none;

}

.contingut .jocs {

	display: block;

	padding-top: 3px;

	text-align:justify;

	line-height: 18px;

}

.contingut .jocs a {

	color:#1e491c;

	font-weight: bold;

	text-decoration:none;

}

.contingut .jocs a:hover {

	color: #007100;

	text-decoration:underline;

}

.contingut .alignleft {

	float:left;

	margin:0 10px 5px 0

}

.contingut .captura {

	background:#f9f9f9;

	border:1px solid #DDD;

	border-radius:3px;

	margin: 10px 10px 10px 10px;

	padding-top:5px;

	text-align:center;

	-moz-border-radius: 5px;

	border-radius: 5px;

}

.contingut .captura img {

	border:0 none;

	margin:0;

	padding:0;

}

.contingut .captura p.nomjoc {

	font-size:11px;

	line-height:17px;

	margin:0;

	padding:0 4px 5px;

	font-weight: bold;

}

#costat {

	float: right;

	width: 344px;

}

#costat a {

	

	color:#1e491c;

	font-weight: bold;

	text-decoration:none;

}

#costat a:hover {

	color:#007100;

	text-decoration:none;

}

#costatc {

	float:left;

	width: 307px;

	margin: 10px 20px 5px 5px;

	border: 1px solid #E6E6E6;

	background: url(images/fons.gif) repeat-x bottom #FFFFFF;

	padding: 5px;

	-moz-border-radius: 5px;

	border-radius: 5px;

	min-height: 200px;

}

.costatcaixa {

	float: left;

	width: 100%;

	margin-bottom: 10px;

}

.costatcaixa .video {

	margin: 0px;

	padding: 0px 12px 5px 10px;

	text-align: center;

}



.costatcaixa h3 {

	display: block;

	background-image:url(images/shverd.png);

	background-repeat:no-repeat;

	height: 29px;

	margin: 5px 0px 0px 0px;

	padding: 6px 15px 5px 15px;

	font-size: 13px;

	color:#FFFFFF;

}

#peu {

	padding: 7px 4px 7px 3px;

	margin: 0px;

	position: relative;

	float: left;

	width: 978px;

	min-height: 20px;

	background-image:url(images/bcenter.png);

	background-repeat:repeat-y;

}

#peuc {

	float:left;

	width: 935px;

	margin: 10px 19px 0px 17px;

	padding: 7px 0px 0px 7px;

	text-align: center;

	font-size: 11px;

}

#peuc a {

	

	color:#1e491c;

	font-weight: bold;

	text-decoration:none;

}

#peuc a:hover {

	color:#007100;

	text-decoration:none;

}

code {

	font-family: "Courier New", Courier, monospace;

	font-size: 12px;

	color: #333333;

	width: 70%;

}

/* Media Query for Mobile */
@media (max-width: 767px) {
    #salta {
        width: 100%;
        margin: 15px 0;
    }
    #dalt, #peufinal, #cap, #diseny, #conting {
        width: 100%;
    }
    #logo, #menu, #principal, #zona, #costat, #peu, #peuc {
        width: 100%;
    }
    /* Add any other mobile-specific adjustments here */
}

/* Media Query for Desktop/PC */
@media (min-width: 768px) {
    /* PC specific adjustments. */
}