/* documento CSS para el sitio de Asociacion Uruguaya de RPG  */
/* Main styles

Diseño: Ana Laura Suescun | ana.suescun@gmail.com
Autor CSS: Ziongem.com | info@ziongem.com
Year: 2009

-------------------------------------------------------
Colores:

Textos base gris: #676767
Textos base verde: #9dad2a
Textos base violeta: #7e106c
Texto verde rollover de direcciones web: #9dad2a
Texto amarillo: #ffed00

Fonts:

text: Arial
---------------------------------------------------------*/
/* Base */
body {
	background:url(img/body-bg.gif) repeat-x top left #e2eab5;
	font-size:62.5%;
	font-family:Arial, Helvetica, sans-serif;
	margin:0;
	padding:0;
	color:#676767;
	}
* {
	margin:0;
	padding:0;
	}
p {
	font-size:1.3em;
	line-height:150%;
	}
a  {
	color:#9dad2a;
	cursor:pointer;
	outline:none;
	}
a:hover  {
	text-decoration:none;
	}
a img {
	border:none;
	}
ul li {
	list-style:none;
	}
h1 {
	font-size:170%;
	
	}
h2 {
	font-size:150%;
	}
h3 {
	font-size:130%;
	}
h4 {
	font-size:120%;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
    }
input, textarea, select {
	border:1px solid #bdbdbd;
	font:inherit;
	font-size:inherit;
	color:#2b2b2b;
	}
br.clear {
	clear:both;
	overflow:hidden;
	height:1px;
	line-height:0;
	visibility:hidden;
	}
/* Estructura
---------------------------------------*/
#Wrapper {
	width:787px;
	margin:20px auto 0;
	}
#Header {
	background:url(img/cabezal_arriba.jpg) no-repeat top left;
	width:787px;
	margin:0;
	padding-top:43px;
	position:relative;
	}
#Header h1 {
	background:url(img/header-h1.gif) no-repeat top left;
	width:421px;
	height:48px;
	text-indent:-9000px;
	overflow:hidden;
	margin-left:40px;
	}
	#Header h1 a {
		display:block;
		width:100%;
		height:100%;
		}
#Header p.inner-menu {
	position:absolute;
	top:75px;
	right:25px;
	}
	#Header p.inner-menu a.home {
		display:block;
		float:left;
		background:url(img/header-home.gif) no-repeat top left;
		width:25px;
		height:22px;
		text-indent:-90000px;
		overflow:hidden;
		margin-right:5px;
		}
	#Header p.inner-menu a.home:hover {
		background-position: left -22px;
		}
	#Header p.inner-menu a.contact {
		display:block;
		float:left;
		background:url(img/header-contact.gif) no-repeat top left;
		width:23px;
		height:14px;
		text-indent:-90000px;
		overflow:hidden;
		margin-top:8px;
		}
	#Header p.inner-menu a.contact:hover {
		background-position: left -14px;
		}
#Header .bottom {
	background:url(img/cabezal_abajo.jpg) no-repeat top left;
	margin-top:24px;
	padding-top:180px;
	}
.flash {
		margin-top:23px;
}
#Header .no-top {
		padding-top:0;
		margin-top:2px;
}
#Header .bottom ul:first-child {
	background:url(img/menu-bg.gif) repeat-x top left;
	height:22px;
	padding-left:30px;
	margin-top:1px;
	}
#Header .bottom ul:first-child li {
	float:left;
	}
#Header .bottom ul:first-child li.selected a{
	color:#fbfe20;
	}
#Header .bottom ul:first-child li.selected a + ul li a{
	color:#fff;
	}

#Header .bottom ul:first-child li a:hover, #Header .bottom ul:first-child li.selected {
	background:#7e106c;
	}

#Header .bottom ul li  {
	font-size:1.2em;
	font-weight:bold;
	position:relative;
	}
#Header .bottom ul li a {
	color:#fff;
	text-decoration:none;
	}

#Header .bottom ul:first-child li ul {
	padding-top:0;
	position:absolute;
	top:22px;
	left:0;
	z-index:100;
	visibility:hidden;
	}
#Header .bottom ul:first-child li ul#sub-quienes {
	width:170px;
	}

#Header .bottom ul:first-child li:hover ul {
	visibility:visible;
	}
#Header .bottom ul:first-child li ul li {
	font-size:1em;
	height:18px;
	border-top:1px solid #fff;
	width:100%;
	background:url(img/sub-menu-bg.gif) repeat-x top left;
	}

#Header .bottom ul:first-child li a {
	display:block;
	float:left;
	padding:0 12px;
	height:22px;
	line-height:22px;
	}
#Header .bottom ul:first-child li ul li a {
	height:18px;
	line-height:18px;
	padding:0;
	text-indent:8px;
	width:100%;
	display:block;
	}
#Header .bottom ul:first-child li ul li a:hover {
	background:#af56a1;
	color:#ffed00 !important;
	}
#Container {
	background:url(img/container-bg.gif) repeat-y top left;
	width:657px;
	padding:10px 65px 30px;
	}
#Footer {
	background:url(img/footer-bg.gif) no-repeat top left;
	width:770px;
	margin-left:9px;
	height:27px;
	text-align:center;
	}
#Footer p {
	font-size:1em;
	line-height:25px;
	color:#fff;
	margin-left:25%;
	}
	#Footer p span {
		float:left; 
	}
	#Footer p a {
		color:#fbfe20;
		text-decoration:none;
		float:left;
		}
	#Footer p a:hover {
		text-decoration:underline;
		}

p#author {
	width:740px;
	margin:0 auto;
	text-align:right;
	font-size:1em;
	margin-top:5px;
	}
	p#author a {
		color:#7e106c;
		text-decoration:none;
		}
	p#author a:hover {
		text-decoration:underline;
		}

/* Home
--------------------------------------*/
h1.title {
	text-indent:-9000px;
	overflow:hidden;
	margin-top:30px;
	}

h1#home {
	background:url(img/home-title.gif) no-repeat top left;
	width:660px;
	height:42px;
	}
#activities {
	width:325px;
	height:260px;
	float:left;
	background:url(img/actividades-bg.jpg) repeat-x left 43px;
	margin-top:15px;
	}
	#activities h2 {
		background:url(img/actividades-title-bg.gif) no-repeat top left;
		height:43px;
		line-height:43px;
		color:#fff;
		text-indent:13px;
		font-size:1.4em;
		}
	#activities dl {
		margin:0 13px;
		font-size:1.2em;
		color:#7e106c;
		padding:5px 0
		}
	#activities h2 + dl {
		border-bottom:1px dotted #7e106c;
		}
	#activities dl dt {
		font-weight:bold;
		font-size:1.1em;
		padding-bottom:2px;
		}
	#activities dl dt a {
		text-decoration:none;
		color:#7e106c;
		}
	#activities dl dt a:hover {
		color:#7b8536;
		}
#activities a#contact {
	background:url(img/contact-home.gif) no-repeat top left;
	width:325px;
	height:54px;
	display:block;
	text-indent:-9000px;
	overflow:hidden;
	margin-top:10px;
	}
#excerpt {
	margin-top:25px;
	float:right;
	width:280px;
	border-top:1px dotted #676767;
	border-bottom:1px dotted #676767;
	padding:10px 0 5px;
	text-align:right;
	}
#excerpt p {
	font-size:1.2em;
	margin-bottom:5px;
	line-height:125%;
	}

#excerpt p a {
	font-weight:bold;
	text-decoration:none;
	}
#excerpt p a.more:after {
	content:" >>"
	}
/* Que es la RPG 
----------------------------------------*/
h1#que-es {
	background:url(img/ques-title.gif) no-repeat bottom left;
	width:197;
	height:26px;
	}
#explanation {
	margin-top:30px;
	margin-right:-57px;
	background:url(img/sidebar-bg.gif) repeat-y right bottom;
	padding-bottom:20px;
	position:relative;
	}
#explanation .main {
	width:440px;
	float:left;
	
	}
#explanation .sidebar {
	float:right;
	width:255px;
	background:url(img/column.gif) no-repeat top left;
	padding-top:320px;
	position:relative;
	}
#explanation .sidebar img {
	margin-top:25px;
	margin-left:15px;
	}
#explanation .sidebar p {
	font-size:1em;
	line-height:150%;
	text-align:center;
	color:#000;
	}

#explanation .main h2 {
	color:#9dad2a;
	margin-bottom:5px;
	}
#explanation .main hr {
	border:none;
	border-top:1px solid #d9d9d9;
	margin:17px 0;
	}
#explanation .main p {
	margin-bottom:15px;
	line-height:125%;
	text-align:justify;
	}
#explanation .main dl {
	font-size:1.2em;
	}
#explanation .main dl dl {
	font-size:1em;
	}
#explanation .main dl.numbers dt {
	color:#7e106c;
	font-weight:bold;
	}
#explanation .main dl.numbers dd {
	padding-left:15px;
	margin-bottom:10px;
	}
#explanation .main dl.items {
	margin-left:20px;
	margin-top:10px;
	}
#explanation .main dl.items dt { 
	color:#9dad2a;
	font-weight:bold;
	background:url(img/green-bullet.gif) no-repeat left 6px;
	padding-left:5px;
	}
#explanation .main dl.items dd { 
	margin-bottom:5px;
	}
#explanation .main dl.items dd dl { 
	margin-left:20px;
	margin-top:10px;
	}
#explanation .main dl.items dd dl dt { 
	color:#676767;
	background:url(img/grey-bullet.gif) no-repeat left 6px;
	}
#explanation .main dl.items dd dl dd { 
	background:url(img/grey-bullet.gif) no-repeat left 6px;
	padding-left:5px;
	margin-left:20px;
	}
.no-bottom {
	padding-bottom:0 !important;
	}
#explanation a.back-top {
	position:absolute;
	bottom:20px;
	right:20px;
	display:block;
	background:url(img/arriba.gif) no-repeat top left;
	width:19px;
	height:19px;
	text-indent:-9000px;
	overflow:hidden;
	}
#explanation a.back-top:hover {
	background-position:-19px top;
	}
/* RPGistas en Uruguay
-----------------------------------------------------*/
h1#quienes {
	background:url(img/quienes-title.gif) no-repeat top left;
	width:259px;
	height:26px;
	}
.left-col {
	float:left;
	width:320px;
	border-right:1px solid #d9d9d9;
	margin-top:20px;
	}	
.right-col {
	float:left;
	width:310px;
	margin-top:20px;
	}
	
.left-col .item, .right-col .item {
	min-height:110px;
	border-top:1px solid #d9d9d9;
	padding:5px 0;
	color:#7b8536;
	}
.right-col .item {
	padding-left:20px;
	}
.left-col .item h3, .right-col .item h3 {
	font-size:1.2em;
	}

.left-col .item p, .right-col .item p {
	line-height:120%;
	}
.left-col .item p a, .right-col .item p a {
	color:#7b8536;
	text-decoration:none;
	}	
.left-col .item p a:hover, .right-col .item p a:hover {
	color:#a74296;
	}
h2.quienes-subtitle {
	font-size:1.3em;
	margin-top:35px;
	}
.left-col h2 + .item {
	border-top:none;
	}

.meaning {
	background:url(img/meaning-bg.gif) repeat-x top left #ecf0d9;
	color:#7b8536;
	margin-top:20px;
	padding-bottom:10px;
	}
.meaning h3 {
	font-size:1.2em;
	padding:15px 20px;
	}
.meaning p {
	margin-left:20px;
	}
/*.meaning p strong {
	display:block;
	width:60px;
	float:left;
	}
*/
.line-up {
	line-height:125%;
	margin-top:30px;
	}
/* AURPG
---------------------------------*/
h1#aurpg {
	background:url(img/aurpg-title.gif) no-repeat top left;
	width:506px;
	height:26px;
	}
.info {
	padding:20px 0;
	}
	
.info p {
	margin-bottom:17px;
	line-height:125%;
	}
.info hr {
	border:none;
	border-top:1px solid #d9d9d9;
	margin-bottom:17px;
	}
.info h2 {
	color:#9dad2a;
	margin-bottom:10px;
	}
.info ul.items {
	font-size:1.2em;
	font-weight:bold;
	margin-left:20px;
	margin-bottom:15px;
	}
.info ul.items li {
	background:url(img/grey-bullet.gif) no-repeat left 6px;
	padding-left:8px;
	margin-bottom:3px;
	}
.info dl {
	width:100%;
	margin-bottom:10px;
	display:table;
	height:1%;
	}
.info dl  dt, .info dl  dd {
	float:left;
	font-size:1.2em;
	line-height:150%;
	}
.info dl  dt {
	font-weight:bold;
	width:20%;
	clear:left;
	}
.info dl  dt  + dd {
	width:70%;
	}
.info dl  dd a {
	color:#7b8536;
	text-decoration:none;
	}
.info dl  dd a:hover {
	color:#a74296;
	}
.info h3 { clear:both; margin-bottom:5px; color:#7e106c; }
/* Casos clinicos
--------------------------------------------*/
h1#under-cons {
	background:url(img/under-cons.gif) no-repeat top left;
	width:448px;
	height:26px;
	margin-bottom:100px;
	}
/* Articulos
-------------------------------*/	
h1#articles {
	background:url(img/articles-title.gif) no-repeat top left;
	width:119px;
	height:30px;
	}
ul#articles-list {
	background:url(img/articles-bg.gif) no-repeat right top;
	padding-right:240px;
	padding-top:40px;
	height:300px;
	}

ul#articles-list li {
	border-bottom:1px solid #d9d9d9;
	padding:15px 0;
	font-size:1.2em;
	}
ul#articles-list li a {
	background:url(img/pdf-ico.gif) no-repeat left center;
	padding-left:40px;
	display:block;
	text-decoration:none;
	color:#676767;
	}
ul#articles-list li a:hover {
	color:#9dad2a;
	}

p.get-adobe {
	font-size:1.1em;
	margin-top:-20px;
	}

/* RPG en el mundo 
--------------------------------*/
h1#rpg-mundo {
	background:url(img/rpg-mundo.gif) no-repeat top left;
	width:211px;
	height:21px;
	}
.country {
	border-top:1px solid #d9d9d9;
	padding:10px 0;
	}
.country h2 {
	text-transform:uppercase;
	margin-bottom:0;
	font-size:1.2em;
	}
.country p {
	line-height:130%;
	}
.country p a {
	text-decoration:none;
	color:#676767;
	}
.country p a:hover {
	color:#9dad2a;
	}
#no-border {
	border:none;
	}
#border {
	border-left:1px solid #d9d9d9;
	}
#border .country {
	padding-left:20px;
	}
/* Actividades 
----------------------------------*/
h1#actividades {
	background:url(img/actividades-title.gif) no-repeat top left;
	width:264px;
	height:20px;
	}
.activitie {
	background:url(img/activitie-bg.jpg) repeat-x left bottom;
	border:1px solid #d9d9d9;
	margin-top:20px;
	}
.activitie .head {
	background:url(img/activitie-head.gif) repeat-x left bottom;
	text-align:center;
	color:#7b8536;
	padding:10px 0;
	}
.activitie .head h2, .activitie .head h3 {
	text-transform:uppercase;
	font-size:1.4em;
	}
.activitie .head h3 {
	font-size:1.7em;
	}
.activitie .col {
	width:305px;
	float:left;
	border-top:1px solid #d9d9d9;
	padding-bottom:30px;
	padding-left:20px;
	}
.activitie .col p {
	line-height:120%;
	}

.activitie .head + .col {
	margin-left:20px !important;
	margin-left:10px;
	background:url(img/border-col.gif) repeat-y top right;
	padding-left:0;
	}
.activitie .col ul {
	font-size:1.2em;
	line-height:130%;
	margin-bottom:5px;
	}
.activitie .col h3, .activitie .col p.self-titled {
	margin-top:10px;
	}
.activitie .col p a {
	color:#676767;
	text-decoration:none;
	} 
.activitie .col p a:hover {
	color:#9dad2a;
	}
.activitie .col table {
	font-size:1.2em;
	width:280px;
	border-top:1px solid #a5a5a5;
	border-right:1px solid #a5a5a5;
	margin-top:10px;
	}
.activitie .col table th, .activitie .col table td {
	border-bottom:1px solid #a5a5a5;
	border-left:1px solid #a5a5a5;
	}
.activitie .col table th {
	padding:2px;
	text-align:left;
	}
.activitie .col table th + th {
	text-align:center;
	}
.activitie .col table th + th + th {
	text-align:right;
	}
.activitie .col table td {
	padding:3px;
	}
.activitie .col table td.bold {
	font-weight:bold;
	}
.activitie .col table td.bold + td {
	text-align:center;
	}
.activitie .col table td.bold + td +td {
	text-align:right;
	}
.activitie .col p.notice {
	font-size:1.7em;
	text-align:center;
	background:#ffee7a;
	text-transform:uppercase;
	margin-top:30px;
	}


