/* Released:   20080310 - modif 7/1/23. ok */

* {
	margin: 0;
	padding: 0;}

body {
	margin: 0;
	padding: 0;
	background: #73ACE9 url(images/img01.jpg) repeat-x top left;}

body, th, td, input, textarea {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;}

input, textarea {
	font-weight: bold;
}

h1, h2, h3 {
	margin-top: 1em;
	color: #626456;
}

h1 {
	letter-spacing: -.075em;
	font-size: 2em;
}
h1.title { margin-top:0.75em;
    }
h2 {
	letter-spacing: -.05em;
	text-transform: uppercase;
	font-size: 1.1em;
	font-weight: bold;
	color: #8D8E85;}

h3 {
	font-size: 1em;
}
h3.clouds {font-size: 1em; color: #55AAFF;
    text-align:center;
    padding-top:5px; margin:0;
    letter-spacing: -.05em;
    }
h3.clouds a {
    color: #000;color: #55AAFF;
    text-decoration: none;}
    h3.clouds a:hover {color: #ffffff}
h4{font-size:1.2em: color:#333300; padding:10px 0 5px 0}

p   {
	margin-top: 1.0em;
	line-height: 1.8em;
	font-size: 1.1em;
}

ul, ol {
	margin-top: 1.5em;
	line-height: 1.8em;
	font-size: 1.1em;
}

ul, ol {
	margin-left: 3em;
}

blockquote {
	margin-left: 3em;
	margin-right: 3em;
}

a {
	text-decoration: none;
	color: #69821C;
}

a:hover {
	border: none;
    color: #BF3F41;
}

h1 a, h3 a {
	border: none;
	text-decoration: none;
	color: #809B30;
}

h1 a:hover, h2 a:hover, h3 a:hover {
	background: none;
	color: #CC6666;
}

  span  {
    color: #CC6666;
    font-weight: bold
    }
hr {
	display: none;
}

/* Wrapper */

#wrapper {
}

/* Header */

#header {
	width: 950px;
	height: 25px;
	margin: 0 auto;
}

#menu 
{
    margin:0 0 15px 0;
    padding:0;
	float: left;
	width: 950px;
	height: 50px;
	background: url(images/img444.jpg) no-repeat left top;
	font-family: Arial, Helvetica, sans-serif;
}

#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
	background: url(images/img05.gif) no-repeat right top;
	height: 50px;
	padding: 0 15px 0 15px;
}

#menu a {
	display: block;
	float: left;
	height: 25px;
	margin-right: 1px;
	padding: 18px 20px 0 20px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
}

#menu a:hover {
	color: #DDEEAA;
}

#menu .current a {
	color: #DDEEAA;
}

#search {
	float: right;
	width: 260px;
	padding-top: 7px;
}

#search fieldset {
	border: none;
}

#search #s {
	width: 160px;
}

#search #x {
	width: 80px;
}

/* Logo */

#logoimage {
	width: 950px;
	margin: 0 auto;
	padding-left: 0;
	background: #FFFFFF url(images/img333.jpg) no-repeat top left;
	height: 124px;

}

#logoimage h1, 
#logoimage h2 {
	float: left;
	margin: 0 0 0 15px;

}

#logoimage h1 {
	padding: 26px 5px 0 18px;
	color: #993333;
}

#logoimage h2 {
    clear: left;
	padding: 0 0 0 20px;
    color: #557F00;
	width: 250px;
}

#logoimage p 
{
  	position:relative;
    float: right;
	padding: 0 35px 0 0;
	font-size: 1.5em;
	font-weight: bold;
	color: #FFF;
	margin:-20px 0 0 0;
}

#logoimage a {
	color: #BF3F41;
}

/* Page */

#page {
	width: 950px;
	
	margin: 0 auto 0 auto;
	padding: 0px;
	background: #FFFFFF ;
	border: 1px solid #CCCCCC;
	border-top: none;
    border-bottom: none;
}

/* Content */


#content {
	float: left;
	width: 590px;
	margin:0 0 5px 16px;
	padding: 1px 15px 15px 15px;
	background: #FFFFFF;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border:solid 1px #DBE8F6;
    
}
.post{ background: transparent;
    }
#content ol ul {

	padding: 0px 0px 10px 0px;
}
#content a {
    color : #CC6666;
	font-weight: bold;
}
#content a:hover{
    color : #7E9932;
	font-weight: bold;
	text-decoration: underline;
}

#content img{
	float: left;
	padding:1px;
    border-color: #FAFAFA;
    border: solid 1px #ccc;
    margin: 6px 20px 4px 0px ;
}
#content li{
	font-size: 0.9em;
}
.floatstop {
	clear:both;
	background-color:#fff;
	
}


.no-border  {
    border: none;

}

.logo {
	letter-spacing: -.075em;
	font-size: 3em;
}

/* Sidebars */

.sidebar 
{
	float: right;
	margin:20px 15px 0 0;
	padding:1px;

}

.sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar li {
	margin-bottom: 1em;
}

.sidebar li ul {
}

.sidebar li li {
	margin: 0;
}

.sidebar li h2 {
    margin: 0 0 1em 0;
	padding: 10px 0  5px 10px;
	height: 10px;
	border-bottom: 1px dotted #98B42B;
	color: #69821C;
 	letter-spacing: normal;
	text-transform: none;

}
.title {
    color: #7E9932;
}

.entry h2{
    color: #7E9932;
}

.tags p a  {
    color: #0000FF;
}
.oferta
{
    background: url(images/oferta.jpg) no-repeat right ;}
    
span  {
	color: #999999;
	font-weight: bold
}
span a:hover {
    color: #66CC00;
    font-weight: bold
}
#contentbar1 {
}

#contentbar 
{   
	width: 250px;
	margin:0 17px 10px 0;
	padding: 10px 20px 5px 10px;
	float:right;
	background: #FFF8F6;
	-webkit-border-radius:10px;
    -moz-border-radius:10px;
    border:solid 1px #DDBFBB;
	
}
#contentbar li h1
{
    margin: 0 0 0.5em 0;
	padding: 10px 0  4px 8px;
	height: 20px;

	border-bottom: 2px dotted #A3393B;
	color: #7E9932;
}


#contentbar li h2 {
	margin: 0 0 0.2em 0;
	padding: 0px 0  5px 5px;
	height: 10px;
    background: transparent;
	border-bottom: 1px dotted #98B42B;
    color: #A3393B;
}

#contentbar li ul {
	line-height: normal;
	padding-left: 0px;

}

#contentbar li li {
	padding: 5px;
	font-size: .8em;

}

#contentbar li a {
	border: none;
	padding-left: 5px;

    color: #809B30;
}

#contentbar li a:hover {
	border: none;

    color: #A3393B;
}

#contentbar li h2 a:hover {
	border: none;
    color: #CC6666;
}
#contentbar h1 a  {

    color: #CC6666;
}

/* Footer */

#footer {
	margin: 0px auto 0px auto;
	padding: 0px;
	height: 100px;
    background: #fff url(images/iarba11_01.jpg) repeat-x bottom;
    width:950px;
    border-left: solid 1px #CCCCCC;
    border-right: solid 1px #CCCCCC;
}

#footer p {
	padding: 10px; color:#7FAAFF;
	margin:0 auto 10px auto;
	text-align: center;
	font-size: 12px;
	width:900px;
	background: #FBFDFF ;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border:solid 1px #DBE8F6;
}
#footer p a{color:#7FAAFF;}
#footer p a:hover{color:#2A7FFF; text-decoration: underline}
#subsol 
{
    margin: 0px;
	padding-bottom: 10px;
	height: auto;
	width:100%;
	background: #2F2211 url(images/sol-cer.jpg) repeat-x top;
	}
#subbox
{   margin:0 auto 20px auto;
    padding:10px;
    height: auto;
    width:930px; 
    border: solid 1px #CCCCCC;
    border-top:none;
    background: #463826 url(images/iarba11_02.jpg) repeat-x top;
    }
 
#subbox ul
{  margin:30px 0 5px 20px;
   padding:5px 15px 15px 15px;
   list-style:none;
   width:250px;
   height: auto; 
   float:left; 
   border-left: solid 1px #605237;
   border-right: solid 1px #605237;
   border-bottom: solid 1px #605237; 
   
   }
#subbox h2
{
    text-transform:none;
} 
#subbox h2 a:hover
{
    text-transform: none;
    text-decoration: underline;
    color: #ccc
} 
#subbox h1
{
    text-transform:none;
    padding:0 0 10px 0} 
#subbox h1 a
{
    text-transform:none;
    color:#ccc}
#subbox h1 a:hover
{
    text-transform:none;
    color:#ccc;
    text-decoration: underline;}
.box-p
    {
        width:96%;
        height:auto;
        padding:0px 10px 10px 10px;
        margin:20px 0 10px 0;
        overflow:hidden;
        border:solid 1px #EEEEEE;
        background:#fff}  
.clear{clear:both} 
.escap 
 {  width:176px;
    height:210px;
    float:left;
    margin-top:8px;
    margin-right:10px;
   	-webkit-border-radius:10px;
    -moz-border-radius:10px;
    border:solid 1px #FCEAEA; 
    padding-left:7px;
    padding-right:5px;
    }   
#content h2.sc{
        width:172px;
        height:30px;
        padding-top:8px;
        text-align:center;
        }
#content h2.sc a{
        color: #FFFFFF;
        }
#content h2.sc a:hover{
        text-align:center;
        color: #000;
        text-decoration: none;
        }
p.pq{ font-size:11px; width:168px; 
padding:2px; margin-top:10px; 
text-align:justify
    }
.info{width: 250px;
	margin:0 17px 10px 0;
	padding: 10px 20px 20px 10px;
	float:right;
	-webkit-border-radius:10px;
    -moz-border-radius:10px;}
.zero{
	background: #FFFFD4;
    border:solid 1px #FFEE44;}
.uno{
	background: #FFFFD4;
    border:solid 1px #FFEE44;}
.dos{
	background: #F1FFF1;
    border:solid 1px #7FFF7F;}
.tres{
	background: #EAFFFF;
    border:solid 1px #d1ddd1;}
#cuad-escap{padding:10px 0 10px 0; 
        margin:0 0 5px 0; 
        height:auto; overflow:hidden}
.modulos{padding: 0 4px 4px 8px; background-color:FAFAFA; 
border: #CCCCCC dashed 1px; margin: 10px 0 5px 0;    
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
.modulos h1{margin:6px 0 8px 0; color:#FFFFFF}
.c1 {background:url(images/m1.jpg) repeat-x top;}
.c2 {background:url(images/m2.jpg) repeat-x top;}
.c3 {background:url(images/m3.jpg) repeat-x top;}
.c4 {background:url(images/m4.jpg) repeat-x top;}
.c5 {background:url(images/m3.jpg) repeat-x top;}
.c6 {background:url(images/m4.jpg) repeat-x top;}
.c7 {background:url(images/m4.jpg) repeat-x top;}
img.ancho {padding:0; margin:0 0 15px 0; clear:left; border:0}

/*===========topnav and responsive ===============*/

 /* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

Add media queries:
Example
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}