@charset "UTF-8";

.fila-letra{
	clear:both;
	padding-bottom:45px;
}

.letra{
	float:left;
	width:10%;
	text-align: center;
	font-weight:bold;
	font-size:larger;
}

#todas-letras{
	padding-top:10px;
	padding-left:5px;
	width:98%;
	background-color:#E7E7E7;
}

.fila-letra2{
	clear:both;
	padding-bottom:45px;
}

.letra2{
	float:left;
	width:20%;
	text-align: center;
	font-weight:bold;
	font-size:larger;
}

#todas-letras2{
	padding-top:10px;
	padding-left:5px;
	width:98%;
	background-color:#E7E7E7;
}

.novedad_titular {
	padding:5px 5px 5px 5px;
	font:Verdana;
	font-weight:bold;
	background:#1E498A;
	font-size:17px;
	color:#FFF;
}

.novedad_thumb {
	float:right;
	background:#E9E9E9;
	padding:5px 5px 5px 5px;
	border: 1px solid #000;
}

.novedad_cuerpo {
	padding:5px 5px 5px 5px;
	font:Verdana;
	font-size:17px;
	height:110px;
}

#agrupado{
	clear:both;
	padding-left:5px;
	padding-top:14px;
	background-color:#E7E7E7;
}

#container{
width: 100%;
  max-width: 960px;
  border: 2px solid red;
  margin: 20px auto;
}

.box {
  display: inline-block;
  padding: 10px 60px;
}

.box img {
  padding: 0 2px;
}

#mainwrapper header {
	/*Header */
	overflow: auto;
	font-family: Verdana;
	font-style: normal;
	font-weight: 400;
	background-color:#0071c8;
	}

#mainwrapper header #logo {
	/* Company Logo text */
	width: 50%;
	float: left;
	padding-left: 2%;
	padding-top: 12px;
	padding-bottom: 12px;
	color: white;
}

#mainwrapper header nav {
	/*Nav bar containing links in header */
	text-align: right;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-right: 2%;
	width: 68%;
	float: left;
	color: rgba(146,146,146,1.00);
}

header nav a {
	padding-right: 2%;
}

#content #mainContent h1, #content #mainContent h2    {
	color: rgba(0,0,0,1.00);
}


footer article  {
	width: 96%;
	float: left;
	padding-left: 2%;
	padding-right: 2%;
	font-family: verdana;
	font-style: normal;
	font-weight: 200;
	color: rgba(146,146,146,1.00);
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */	
}

footer article h3  {
	text-align: center;
	font-family: verdana;
	font-style: normal;
	font-weight: 400;
}

#mainContent {
	padding-left: 2%;
	
	width: 71%;

	float: left;

	padding-right: 2%;

	padding-top: 41px;

}

#mainwrapper #content #sidebar {
	/* Sidebar*/

	width: 19%;
	padding-left: 2%;
	padding-right: 2%;
	float: left;
	background-color: rgba(246,246,246,1.00);
	margin-top: 115px;
	padding-top: 32px;

}

#mainwrapper {
	/* Container of all content */

	width: 80%;
	overflow: auto;
	margin-left:100px;

}

#content #sidebar input {

	/* Search box in sidebar */

	width: 98%;

	height: 32px;

}

#content #sidebar #adimage {

	/* Container for Image in sidebar */

	width: 100%;

	background-color: rgba(208,207,207,1.00);

	margin-top: 46px;

	float: none;

	overflow: auto;

}

nav ul li {

	list-style-type: none;

	padding-top: 8px;

	padding-bottom: 8px;

}

nav ul {

	padding-left: 0%;

}

nav ul li a {

	color: rgba(146,146,146,1.00);

	text-decoration: none;

}

#footerbar {

	/* Footer bar at the bottom of the page */

	height: 18px;

	clear: both;

	background-color: rgba(208,207,207,1.00);

	width: 100%;

}

footer {

	/* Container for footer artices */

	width: 71%;

	padding-left: 2%;

	padding-right: 2%;

}

.notOnDesktop {

	/*element to be displayed only in mobile view and tabet view */

	display: none;

}

#mainContent #bannerImage img {

	/* Actual banner image */

	width: 100%;

}

#sidebar #adimage img {

	/* Image in sidebar */

	width: 100%;

	float: left;

}



#mainwrapper header nav a {
	/* Links in header */

	color: rgba(255,255,255,1.00);
	text-decoration: none;

}



/* Tablet view */

@media screen and (max-width:769px){
	
#mainwrapper {
	/* Container of all content */

	width: 90%;
	overflow: auto;
	margin-left:40px;

}

.novedad_cuerpo {
	padding:5px 5px 5px 5px;
	font:Verdana;
	font-size:17px;
	height:140px;
}

.notOnDesktop {

	/* Search box shown only in mobile view and Tablet view */

	display: block;

	text-align: right;

	padding-right: 8px;

	padding-top: 8px;

	padding-bottom: 8px;

	width: 96%;

}

#content .notOnDesktop input {

	height: 28px;

}

#mainContent {

	/* Container for the blog post */

	padding-top: 0px;

	float: none;

	width: 96%;

}

#sidebar input {

	/* Search box in sidebar */

	display: none;

}

#mainwrapper #content #sidebar {

	/* Sidebar*/

	float: none;

	width: 92%;

	padding-top: 13px;

	overflow: auto;

	margin-top: 3px;

	margin-left: 2%;

	padding-bottom: 13px;

}

#content #sidebar #adimage {

	/* Image in sidebar */

	width: 60%;

	margin-top: 0px;

	float: left;

}

#content #sidebar nav {

	/* Navigation links in sidebar */

	width: 36%;

	float: left;

	padding-left: 4%;

}

#sidebar nav ul {

	margin-top: 0px;

}

footer {

	/* Footer region */

	width: 96%;

	padding-left: 2%;

	padding-right: 2%;

}

#content footer article {

	/*Each footer article */

	width: 96%;

}

#mainwrapper header {

	/* Header */

	width: 100%;

}

}



/* Mobile view */

@media screen and (max-width:480px){
	
#mainwrapper {
	/* Container of all content */

	width: 100%;
	overflow: auto;
	margin-left:0px;

}

.novedad_cuerpo {
	padding:5px 5px 5px 5px;
	font:Verdana;
	font-size:17px;
	height:250px;
}

#mainwrapper header #logo {

	/* Company Logo text in header */

	width: 96%;

	margin-left: 2%;

}

#mainwrapper header nav {
	/*navigation links in header */

	text-align: center;
	background-color: rgba(195,198,255,1.00);
	width: 98%;

}

#content #sidebar #adimage {

	/* Container for image in sidebar */

	width: 100%;

}

#content #sidebar nav {

	/* Navigation bar for links in sidebar */

	width: 96%;

	padding-top: 7px;

}

#sidebar nav ul li {

	display: inline-block;

	width: 32%;

	text-align: center;

}

#mainwrapper #content #sidebar {

	/* sidebar */

	padding-bottom: 0px;

}

#content .notOnDesktop {

	/* Search box shown only in mobile and tablet view */

	width: 100%;

	text-align: center;

	padding-left: 0px;

	padding-right: 0px;

}

#content .notOnDesktop input {

	width: 80%;

	text-align: center;

}

#content #mainContent h3 {

	/* Title under maincontent, if any */

	font-size: 14px;

}

#content footer article {

	/* Each foter article */

	width: 96%;

}
}

@media only screen and (max-width: 950px) {
  #container {
    margin: 10px 20px;
    width:95%;
  } 
  .box {
 
  padding: 10px 20px;
  
}
  
}
@media only screen and (max-width: 850px) {
  #container {
    margin: 10px 90px;
    width:58%;
  } 
  .box {
    padding: 10px 30px;
  }

}
@media only screen and (max-width: 800px) {
  #container {
    margin: 10px 50px;
    width:70%;
  } 
  .box {
    padding: 10px 50px;
  }

}
@media only screen and (max-width: 750px) {
  #container {
    margin: 10px 90px;
    width:75%;
  } 
  .box {
    padding: 10px 50px;
  }

}