@import "basic.css";

/*
	este es el rgba del logo: 1b46a3ff

*/

/* common */

html {
		font-size: 10pt;
		color: #184D5C; }
input, textarea {
		color: #184D5C; }
@media (max-width: 1000px) {
  html { font-size: 13pt; } }

h2 {
		font-size: 1.5em; }

a[href] {
		color: #4B8BA1; }
a[href]::before {
/*		content: '\00A0\00A0\00A0\00A0'; esto puede hacer falta, pero para los enlaces de una clase */
		background-image: url('/rele/img/cnet-string-16-blue.png');
		background-repeat: no-repeat;
		/* background-size: 80%; DANGEROUS ON firefox-linux, BAD elsewhere */
		margin-bottom: -4px;
}
a[href].clean::before {
		content: none;
		background-image: none; }
a[href].light {
		color: #def; }

button, a.button { 
		border: 0;
		border-radius: 0.3em;
		padding: 0.1em 0.2em;
		margin-left: 1em;
		margin-right: 1em;
}
button[type='submit'] { 
		background-color: #F2DC15;
		border: thin solid;
		border-color: #BDA65F;
}
button[type='button'], a.button { 
		background-color: #1589F2;
		color: #DDE8F3;
		border-color: #DDE8F3;
}
form div.buttons {
		text-align: right; }

/** page header **/

@media (min-width: 800px) {
		#page-header { background-image: url('/rele/img/cabecera.png'); }
		#page-header p.stitle,
		#page-header p.stitle a[href],
		#page-header p.title { color: #D5E8ED; }
}
@media (max-width: 800px) {
		#page-header p.stitle,
		#page-header p.stitle a[href],
		#page-header p.title { color: #1b46a3; }
}
#page-header {
		border-bottom: 2px solid;
		border-color: #EEFD1D; }
#page-header div.logo {
		width: 210px;	height: 100px;
		margin: 5pt;
		background-color: transparent;
		background-origin: border-box;
		background-position: 2px 3px;
		background-repeat: no-repeat; 
		background-image: url('/rele/img/logo-med-light.png');
 }
#page-header div.title {
		margin-left: 15pt; }
#page-header p.stitle {
		font-size: 2.3em; }
#page-header p.title {
		font-size: 1.5em; }

/** content **/

#content {
		padding: 1em; }

@media (min-width: 1000px) {
		div#content {
				width: 70em;
				margin: 1em auto; }
}
div#content div.feed-item {
		margin-bottom: 1em; }
div#content div.feed-item span.date {
		margin: 0.2em; }

/** side bar */

div#home, div#up, div#back {
		height: 32px;
		width: 32px;
		background-position: center; }
div#home:hover, div#up:hover, div#back:hover {
		background-size: 30px;  }
@media (min-width: 800px) {
		div#home {  position: fixed; top: 180px; right: 0px;
								background-image: url('/rele/img/rele-top-32-blue.png'); }
		div#up { position: fixed; top: 220px; right: 0px;
						 background-image: url('/rele/img/rele-up-32-blue.png'); }
		div#back { position: fixed; top: 260px; right: 0px;
							 background-image: url('/rele/img/rele-back-32-blue.png'); }
		div#sb-puller {	position: fixed; top: 120px; right: 0px; bottom: 0px; left: auto; }
}
@media (max-width: 799px) {
		div#home, div#up, div#back { display: inline-block; }
		div#home { background-image: url('/rele/img/rele-top-32-alt.png'); }
		div#up { background-image: url('/rele/img/rele-up-32-alt.png'); }
		div#back { background-image: url('/rele/img/rele-back-32-alt.png'); }
		div#sb-puller {	position: fixed; top: 70px; right: 0px; bottom: 0px; left: auto; }
}

div#sb-puller {
		height: 48px; width: 48px;
		background-image: url('/rele/img/rele-puller-48-blue.png');
}
div#sb-closer {
		height: 24px; width: 24px;
		position: absolute; right: 5px; top: 5px;
		background-image: url('/rele/img/cross-light-24.png');
}
div#sidebar {
		box-sizing: border-box;
		position: fixed; top: 0px; right: 0px; bottom: 0px; left: auto;
		width: 15em;
		height: auto;
		padding: 1em 0.5em 1em 1em;
		font-family: Arial, Verdana, Sans;
		background-color: #334455;
		color: #eeeeff;
		background-image: none;
		background-repeat: no-repeat;
		background-position: center 10pt;
}
div#sidebar.hidden {
		right: -15em; }

div#login {
		background-color: #D5E8ED;
		height: 4em;
		width: 12em;
		margin: 0.6em auto;
		border-radius: 0.3em;
		padding: 4pt 8pt; }
div#sidebar a[href] {
		color: #eeeeff; }
#sidebar a[href]:before {
		content: none; }
div#sb-utils {
		position: absolute;
		bottom: 1em; }
div#duck,
div#automation,
div#firefox {
		margin: 1em auto;
		text-align: center; }

/** bottom line */

p.bottom-line {
		border-top: solid thin;
		border-bottom: solid thin;
}
p.bottom-line a {	margin-right: 15pt; }

p.bottom-line a.logout {	color: #a0a0a0; background-image: none; }

/**  page meta  **/

#page-meta {
    font-size: 90%;
    padding: 0.5em;
/*    background-color: #f8f8f8; */
    color: #808080;
		text-align: center;
}
#page-meta p { padding: 0; margin: 0; }

/* indexes */

#doc-body,
body.index div.index {
		width: 60em; margin: auto; }
@media (max-width: 1000px) {
		div.doc-body,
		body.index div.index {
				width: 90%;
				margin: auto;
				font-size: 120%; }
}

/** rw-doc **/

a.dyn-msg-close,
div#tick-post.ok,
div#tick-post.nok {
		width: 1.2em;
		height: 1.2em;
		background-color: transparent;
		background-position: bottom left;
		background-repeat: no-repeat; 
		background-size: contain;
		border: none; }
a.dyn-msg-close {
		background-image: url('/rele/img/rele-ok-32-blue.png'); }
div#tick-post.ok {
		background-image: url('/rele/img/rele-ok-32-blue.png'); }
div#tick-post.nok {
		background-image: url('/rele/img/rele-nok-32-red.png'); }

label {
		display: inline-block;
		width: 8em; }

form.wide label {
		box-sizing: border-box;
		width: 15%; }
form.wide input:not([type=checkbox]),
form.wide textarea {
		 box-sizing: border-box;
		 width: 100%; }

/* free sw ack */

div#freesw {
		width: 50em;
		margin: auto;
		text-align: center;
}
div#freesw p.title {
		background-color: #345; color: white; }

/* page help */

div#help {
		width: 50em;
		margin: auto auto;
		background-color: #345;
		color: #def;
		padding: 0.5em;
		border-radius: 0.5em;
}