/********************************************************************
Author CSS: GARAGE MARKETING &eCommerce Consulting services
Author URL: http://www.garage.com.mx/
Description: Stylesheet cmmas.org
Created: 2/01/10
Mail: info@garage.com.mx
********************************************************************/

* { margin: 0; padding: 0}
body {font-family: Arial, Helvetica, sans-serif;font-size: 12px;color:#363636; background-color:#363636 !important; background-image:url(../_img/main-bg.gif); background-repeat:no-repeat; background-position:center top }
.clear {clear:both}
a:link, a:visited {text-decoration: none;font-size:12px;color:#FF0000;font-weight: bold;}
a:hover {text-decoration: underline;}
a:active {text-decoration: underline;}
.gray-div {border-top:1px solid #ccc;clear:both;margin-top: 10px;margin-right: 0;margin-bottom: 10px;margin-left: 0;}
.gray2-div {border-top:1px solid #ccc;border-bottom:1px solid #f7f7f7;clear:both;margin:4px 0 9px}

#wrap {margin: 0 auto;width: 980px;padding:4px 0 10px 0; }
#wrap #full{ background-color:#FFF; width:100%; min-height:400px; float:left}
#wrap #wrap-col{ background-image: url(../_img/wrapfront-bg.gif);background-repeat: repeat-y;background-color:#FFF; min-height:600px; float:left}
#wrap #colLeft {width: 730px;float: left}
#wrap #colRight {float: right;width: 250px; background-color:#CCC; margin:0 auto 0 auto}
/**/
#wrap #wrap-col2{ background-image: url(../_img/wrap-bg.gif);background-repeat: repeat-y;background-color:#FFF; width:980px; min-height:600px; float:left}
#wrap #colLeft2 {width: 250px;float:left;background-color:#CCC }
#wrap #colRight2 {float: right;width: 730px }
#wrap #eq{width:980px;height:75px;background-color: #CCC;background-image: url(../_img/cmmas_top_eq.gif);background-repeat: no-repeat;clear: both}

#top-menu{ float:right; margin-bottom:4px; }
#top-menu li{display: block; padding:0 4px 0 4px;list-style: none;float: left; text-align:center; padding-top:1px; border-right:1px solid #ccc}
#top-menu li a {color: #FFF;font-size:14px;text-decoration:none;}
#top-menu li.last {border-right:none}

#topflash{ height:120px; float:left; display:block}

#search{width:260px; height:25px;float:right; margin:5px;background:url(../_img/bg-search.png) 0 0 no-repeat;padding:10px;height:26px; }
#search img {position:absolute;margin:-2px 0 0 230px;width:25px;height:16px;z-index:2; border:none}
#search input {width:208px;font-size:14px;position:absolute;margin:0 0 0 6px;padding:0px 3px;border:0}

#header{width:980px; height:120px;background-color:#CCC;background-image: url(../_img/header-bg.png);background-repeat: repeat-x; float:left}
#logo{width:400px; height:110px;background-image: url(../_img/logo-cmmas.png); float:left; margin:5px 0 0 0}

#sponsors{width:200px; height:55px; margin:65px 5px 10px 760px;  clear:right;position:relative}
#sponsors img {position:absolute;top:0;left:0;z-index:8}
#sponsors img.active { z-index:10}
#sponsors img.last-active {z-index:9}

/**/

.front-content{ margin:10px auto 10px auto; width:710px}

.front-article{ margin:10px auto 10px auto;}
.front-article img{float:left;margin-right: 10px;border: 2px solid #ccc;margin-bottom: 15px;}
.front-article h3{font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: bolder;color: #FF0000;}
.front-article h3 a{ text-decoration:none}

/*
.old-news2{border-bottom:1px dotted #ccc;padding:10px 0}
*/

.titleHeader {font-family: Arial, Helvetica, sans-serif;font-size: 18px;color: #666;text-shadow:#CCC 1px 1px 0;background-image: url(../_img/cmmas_title_bg1.gif);	background-repeat: repeat-x;height:30px;padding: 4px 0 0 10px;font-weight: bold}
.blockHeader {font-family: Arial, Helvetica, sans-serif;font-size: 16px;color:#FFF;background-image: url(../_img/cmmas_title_bg2.gif);background-repeat: repeat-x;height:25px;padding: 3px 0 0 10px}

/**/
#login{ margin:20px auto 20px auto; width:90%; min-height:300px; border:10px solid #999; -moz-border-radius: 25px; border-radius: 10px; padding:20px}
#login table{padding:10px; margin:10px auto 10px auto}
#login table td{ height:40px}

#register{ margin:20px auto 20px auto; width:90%; min-height:300px; border:10px solid #999; -moz-border-radius: 25px; border-radius: 10px; padding:20px}
#login table{padding:5px; margin:5px auto 5px auto}

#proyecto{margin:10px 0 10px 0}
#proyecto h3{ font-size:16px; color:#666}
#proyecto p{ margin:5px 0 15px 0}

/*main menu*/
#sddm{margin: 0;padding: 0;}
#sddm li{margin: 0;padding: 0;list-style: none;float: left;	font: bold 1px arial; }
#sddm li a {display: block;	margin: 0 0px 0 0;	padding: 0px 0px;	background: #FF0000;color: #FFF;text-align: center;	text-decoration: none;z-index:100}
#sddm li a:hover {background: #000000}
#sddm div{	position: absolute;visibility: hidden;	margin: 0;	padding: 0;	background: #F74FFF;	border: 1px solid #d5d5d5}
#sddm div a {	position: relative;	display: block;	margin: 0;	padding: 5px 10px;	width: auto;	white-space: nowrap;	text-align: left;	text-decoration: none;	color: #000000;	font: 12px arial;	background-color: #FFF;}
#sddm div a:hover {	background: #ff0000;	color: #FFFFFF}
/*end menu*/
.submenu{width:220px; margin:0 auto 10px auto; padding:8px}
.submenu li{line-height: 30px;padding-left: 5px;list-style-image: url(../_img/submenu-bullet.gif);list-style-position: inside; border-bottom: solid #e0e0e0 1px}
.submenu .last{border-bottom: none}
.submenu a {font-size:13px;text-decoration:none}
.submenu a:hover{text-decoration:underline}
/**/
.subtitulos {font-family: Arial, Helvetica, sans-serif;font-size: 16px;font-weight: bolder;color: #FF0000}
.contents{ margin:20px;font-family: Arial, Helvetica, sans-serif;font-size: 12px;color:#000;line-height:18px;text-align: justify;}
.contents li{padding-left: 5px; list-style: square;list-style-position: inside}
.staff img{ float:left; margin:0 10px 10px 0}

#footer {font-family: Arial, Helvetica, sans-serif;	font-size: 12px;color: #fff; margin:10px 0 0px 0; background-color: #363636; padding: 10px 0 50px 0;}
/*#footer a{ font-weight:bold; color:#000;text-shadow:#5a5a5a 1px 1px 0; text-decoration:none}*/
.footer-logo{float:left; margin-right:10px}

#paging{ font-family:Arial, Helvetica, sans-serif; color:#999;margin:10px; text-align:center}
/*store*/
.productlist{}
.productlist img{}
.currency{font-size:8px;}
/**/
#button, #buttonVisionesForm {background:#d9dcde url(../_img/bg-radius.gif) 0 0 repeat-x;padding:2px 10px 3px;border:1px solid #c5c8cd; -moz-border-radius: 6px; border-radius: 6px;font-weight:bold;font-size:16px;text-shadow:#fff 1px 1px 0;color:#595959; margin:2px auto 2px auto}
#button:hover {background:#dedede;text-decoration:none}

/*modules*/
.mod{ margin:5px auto 5px auto; text-align:center}
.login-mod{ width:230px; margin:5px auto 10px auto}
.login-mod .box{ font-size:14px; padding:3px 5px 1px 5px;width:220px; height:23px; background-color:#FFF; border:#999 solid 1px; margin:2px 0 2px 0}

.facebook-widget{margin:5px auto 5px auto; text-align:center; height:330px}
.facebook-link{width:90%; margin:5px auto 10px auto}
.facebook-link img{float:left; margin-right:8px}

#avatar {width:350px; height:355px; margin:10px auto 10px auto; background-color:#CCC; padding:10px}
#avatar div {margin:10px}
/*tables*/
#table-list{border-collapse: collapse}
#table-list td {/*font-size: 1.1em;*/border: 1px solid #ccc;padding: 3px 7px 2px 7px;height:25px; text-align:left}
#table-list th {border: 1px solid #F00;text-transform:uppercase;text-align: left; font-weight:bold;padding-top: 5px;padding-bottom: 4px;background:#F00 url(../_img/bg_th.gif) repeat-x;color: #FFF; padding-left:5px}
#table-list tr.c1 td {background-color: #e7e7e7}
#table-list tr.c2 td {background-color: #fff}

#sioptions-tbl{border-collapse: collapse}
#sioptions-tbl td {/*font-size: 1.1em;*/padding: 5px;height:25px; text-align:left}

#acervo-as td{ border-bottom: 1px solid #ccc;padding: 10px;height:50px}

/*temporal*/
.textosBoldGrn {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold;color: #FF0000}
.eventoFecha {font-family: Arial, Helvetica, sans-serif;font-size: 14px;font-weight: bolder;color: #999999}
.textosBoldBlk {font-family: Arial, Helvetica, sans-serif;	font-size: 12px;font-weight: bold;color: #000000}
.contactBox { padding:1px 0 0 5px; height:23px;font-family: Arial, Helvetica, sans-serif; font-weight:bold;font-size:15px;color:#666666;border:1px solid #666;background-color: #eee; margin:2px 0 2px 0}
.contactBox2 {font-family: Verdana, Geneva, sans-serif;	font-size: 14px;color: #666666;	border: 1px solid #666666;	background-color: #E9E9E9}
.contactTable {background-image: url(../_img/cmmas_back_map.gif);background-repeat: no-repeat;background-position: 30px 10px;}
.textosWhite {font-family: Arial, Helvetica, sans-serif;font-size: 12px;font-weight: bold;color: #FFFFFF;}

/*Acervo*/
#acervo-cat {float:left; clear:right; margin:6px;width:160px; min-height:220px}
#acervo-cat p{ text-align:center}



/*morelia*/
#locations{ float:left;margin-bottom:20px; border-bottom:1px #999 solid; padding-bottom:10px}
#locations #pic{float:left; width:100px}
#locations #ico{float:right; margin:0 0 2px}
#locations #desc{float:right; width:570px; margin:0 0 0 20px}


#shippingtbl{ display:none; width:480px; overflow:hidden; text-align:center; padding:2px; margin:10px auto 10px auto; border:none; font-family:Arial, Helvetica, sans-serif; font-size:10px; background-color:#f4f4f4}
#shippingtbl td, tr, th{ margin:0; padding:0}
#shippingtbl .title { background-color:#F00; color:#FFF; font-size:12px}
#shippingtbl .zone { background-color:#CCC; font-weight:bold}
#shippingtbl .cost{ color:#F00}


#brochures{ float:left; width:100%; margin:5px; }
#brochures img { float:left; margin:0 20px 20px 0; border: none}


/* *********** Inicio del estilo para Menu unete *************** */
.form-unete{
	background-color: #f2f2f2;
}

.form-unete table{
	width: 80%;
	margin: 0 auto;
}

.form-unete table tr td input{
	width: 90%;
}

.form-unete table tr td textarea{
	width: 95%;
	height: 200px;
}

.form-unete table tr{
	width: 90%;
}

#table-button{
	width: 60px;
	text-align: center;
	margin-top: 10px;
}
/* *********** Fin del estilo para Menu unete *********** */

/* *********** Inicio del estilo para Menu secundario *********** */
#menu, #menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu {
    border-radius: 6px;
}

#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}

#menu:before,
#menu:after {
    content: "";
    display: table;
}

#menu:after {
    clear: both;
}

#menu {
    zoom:1;
}

#menu li {
    float: left;
    position: relative;
}

#menu a {
    float: left;
    padding: 12px 13px;
    color: #727272;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    text-decoration: none;
}

#menu li:hover > a {
    color: #D82222;
}

*html #menu li a:hover { /* IE6 only */
    color: #D82222;
}
/* *********** Fin del estilo para Menu secundario *********** */

/* *********** Inicio del estilo para imagenes grandes *********** */
@import url('http://fonts.googleapis.com/css?family=Titillium+Web:200');

.div-tiles-grande{
    font-family: "Titillium Web", sans-serif;
    width: 60%;
    float: left;
}

.div-tiles-chica{
    font-family: "Titillium Web", sans-serif;
    width: 35%;
    margin-left: 5%;
    float: left;
}

.tiles-grande{
    padding: 30px 0px;
    width: 100%;
}

.div-img-grande{
    display: block;
    position: relative;
    width: 100%;
    max-height: 250px;
    overflow: hidden;
}

.div-img-chica{
    display: block;
    position: relative;
    width: 100%;
    max-height: 150px;
    overflow: hidden;
    float: left;
}

.div-img-grande:hover .titulo-eventos, .div-img-grande:hover .intro-eventos{
    display: block;
}

.div-img-chica:hover .titulo-eventos, .div-img-chica:hover .intro-eventos{
    display: block;
}

.titulo-eventos{
    display: none;
    width: 100%;
    position: absolute;
    top: 78%;
    background-color: #FF4A4A;
    font-size: 18px;
    bottom: 0px;
    opacity: 0.8;
}

.div-tiles-chica .titulo-eventos{
    font-size: 15px;
}

.div-tiles-grande .titulo-eventos{
    top: 82%;
}

.div-tiles-grande .intro-eventos{
    bottom: 18%;
}

.fecha-eventos{
    display: block;
    position: absolute;
    background-color: #f6f6f6;
    top: 30px; 
    color: #ff0000;
    font-size: 20px;
    text-align: center;
    width: 60px;
    opacity: 0.9;
}

.intro-eventos{
    display: none;
    width: 100%;
    position: absolute;
    bottom: 22%;
    background-color: #ffffff;
    opacity: 0.8;
} 
/* *********** Fin del estilo para imagenes grandes *********** */
/********* Estilo para los forms de submissions ************/
#infovisiones{display: none;}
/********* Fin Estilo para los forms de submissions ************/