/* 
    Document   : estilos
    Created on : 01-abr-2013, 20:59:25
    Author     : Raul
    Description:
        Purpose of the stylesheet follows.
*/





/*---------------------------------
	IMPORTS
-----------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Arimo:400,700);

/*---------------------------------
	OVERRIDES
-----------------------------------*/
h1,h2,h3,h4,h5,h6{
font-family: "Trebuchet Ms", arial, verdana, sans-serif;
}

thead th,
tbody th{
font-family: "Trebuchet Ms", arial, verdana, sans-serif;
}

button,
a.btn,
input[type="submit"],
input[type="reset"],
input[type="button"]{
font-family: "Trebuchet Ms", arial, verdana, sans-serif;
}

.menu{
font-family: "Trebuchet Ms", arial, verdana, sans-serif;
}

blockquote{
font-family: "Trebuchet Ms", arial, verdana, sans-serif;
}

/*---------------------------------
	LAYOUT
-----------------------------------*/
body{
margin:0;
padding:80px;
color:#000;
background:#F7F7F7;
font:normal 0.7em/150% 'Arimo', "Trebuchet MS", arial, verdana, sans-serif;
text-shadow: 0px 0px 1px transparent; /* google font pixelation fix */
}
.menu{
position: relative;
top:-80px;
width:auto;
z-index:9999;
}

#cabecera{
width:100%;/*960*/
height:20px;
background:#F7F7F7;
border-bottom:1px solid #ccc;
z-index:1000;

}
#contenido{
width:100%;/*960*/
position: relative;
top:-40px;
padding-top: 10px;
border-top:1px solid #ccc; 
background:#F7F7F7;



}
#lista_alumnos{
width:85%;/*960*/
background:#F7F7F7;
margin:10px auto auto 10px;
}
	
#wrap{
width:98%;/*960*/
background:#F7F7F7;
margin:30px auto 30px auto;
padding:0;
border:1px solid #ccc;
}

#footer{
width:100%;
height:20px;
text-align:center;
padding:20px;
margin:10px 0 0 0;
background:#efefef;
border-top:1px solid #ccc;
color:#999;
font-size:1.2em;
text-shadow:0px 1px 1px #fff;
position:fixed;
bottom:0;
left: 0;
z-index: 1004;

}

	#link-top{
	position: absolute;
	top:10px;
	right:10px;
	*right:25px;/*IE 7 ONLY*/
	left:auto;
	color:#666;
	text-decoration:none;
	display: inline-block;
	padding:5px 10px;
	background:#e5e5e5;
	line-height:100%;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	}
        
        #logout{
           
            width:10%;/*960*/
            height:50px;
            position:fixed;
            top:0;
            right:5%;
            margin:0px 0px 0px 2%;
            padding-top:0%;
            padding-left:3%;
            z-index:1001;
            text-shadow:0 -1px 0 #1D6DC1;
            color:#fff;
            text-align: justify;
            display: inline;           
        }
  .loginprincipal {
  position: relative;
  margin: 0 auto;
  padding: 20px 20px 20px;
  width: 310px;
  background: white;
  color:#fff;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 200px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.loginprincipal:before {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  bottom: -8px;
  left: -8px;
  z-index: -1;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 4px;
}

.loginprincipal h1 {
  margin: -20px -20px 21px;
  line-height: 40px;
  font-size: 15px;
  
  color: #fff;
  text-align: center;
 
  background: #f3f3f3;
  border-bottom: 1px solid #cfcfcf;
  background: rgb(122,188,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
}

.loginprincipal p {
  margin: 20px 0 0;
}

.loginprincipal p:first-child {
  margin-top: 0;
}

.loginprincipal input[type=text], .login input[type=password] {
  width: 278px;
}

.loginprincipal p.remember_me {
  float: left;
  line-height: 31px;
}

.loginprincipal p.remember_me label {
  font-size: 12px;
  color: #777;
  cursor: pointer;
}

.loginprincipal p.remember_me input {
  position: relative;
  bottom: 1px;
  margin-right: 4px;
  vertical-align: middle;
}

.loginprincipal p.submit {
  text-align: right;
}

.loginprincipal-help {
  margin: 20px 0;
  font-size: 11px;
  color: #555;
  text-align: center;
}

:-moz-placeholder {
  color: #c9c9c9 !important;
  font-size: 13px;
}

::-webkit-input-placeholder {
  color: #ccc;
  font-size: 13px;
}


.tooltip{
   position: absolute;
   background: #c0df71;
   color: #fff;
   border-radius:10px;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	padding: 10px;
	margin-top: -10px;
	margin-left: 10px;
   z-index: 3;
   display: none;
	background-color: #ff934f;
}

.tooltip-seg{
   position: absolute;
   background: #c0df71;
   color: #fff;
   border-radius:10px;
	font-family: "Lucida Grande", Lucida, Verdana, sans-serif;
	padding: 10px;
	margin-top: -10px;
	margin-left: 30px;
   z-index: 3;
   display: none;
	background-color: #ff934f;
}
 .info, .exito, .alerta, .error {
       font-family:Arial, Helvetica, sans-serif; 
       font-size:13px;
       border: 1px solid;
       margin: 10px 0px;
       padding:15px 10px 15px 50px;
       background-repeat: no-repeat;
       background-position: 10px center;
}
.info {
       color: #00529B;
       background-color: #BDE5F8;
       background-image: url('img/info.png');
}
.exito {
       color: #4F8A10;
       background-color: #DFF2BF;
       background-image:url('img/exito.png');
}
.alerta {
       color: #9F6000;
       background-color: #FEEFB3;
       background-image: url('img/alerta.png');
}
.error {
       color: #D8000C;
       background-color: #FFBABA;
       background-image: url('img/error.png');
}

 /* Start by setting display:none to make this hidden.
   Then we position it in relation to the viewport window
   with position:fixed. Width, height, top and left speak
   speak for themselves. Background we set to 80% white with
   our animation centered, and no-repeating */
.modal {
    display:    none;
    position:   fixed;
    z-index:    1;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('https://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal element will be visible */
body.loading .modal {
    display: block;
}