/**
 * Layout.css Gkode
 * Aqui se encuentran los estilos para maquetar la página
 * Todo lo relacionado con imágenes y colores se encuentra ubicado
 * en la hoja de estilos de cada Tema.
 */
body {    
    margin: 0px;
    padding: 0px;
}

#sheet {
    background: url(../images/bg-brush_350x442.png) no-repeat;
    width: 100%;
}

#wrapper {    
    margin: 0 auto;
    width: 1000px;
}

#header {
    background: url(../images/header_974x200.png) no-repeat;
}

/**
 * Dimensiones de los elementos
 */
#header, #topmenu, #main, #footer, #bottom, #copyright {
    width: 974px;
    margin: 0px auto;
}

#header, #logo, #banner {
    height: 150px;
}

#banner, #logo {
    width: 50%;
}

#topmenu {
    height: 42px;
}

#main #left, #main #right {
    width: 225px;
    padding: 5px;
}

#content {
    padding: 10px;
}

/*
 * Flotando las capas principales y limpiando floats
 */
#banner, #logo, #left, #right, #content, #user1, #user2 {
    float: left;
}

#wrapper, #top, #main, #footer, #bottom, #breadcrumbs, #users {
    overflow: hidden;
    height: 1%;
}

#user1, #user2 {
    margin: 1%;
}

/**
 * Estructura para la salida de los módules .gk-module
 * Para el módulo user3 ir a "menus.css"
 * Contenedores: .top, .center, .bottom
 * Cada contenedor tiene a l (left), c (center), r(right) como subcapas.
 * |TOP|L,C,R|
 * |CENTER|L,C,R|
 * |BOTTOM|L,C,R|
 * Adicionalmente CENTER C (.center .c) contiene a las divisiones
 * .gk-module-header y .gk-module-content
 */
.gk-module {
    width: 100%;
    margin: 10px auto;
}

.top .bottom {
    height: 7px;
    width: 100%;
}

.center {
    width: 100%;
    height: auto;
}

/*Maquetando los lados*/
.top .c, .bottom .c {
    /* El fondo depende del tema elegido */
    margin: 0px 7px;
    height: 7px;
}

/**
 * Cabecera del módulo, las dimensiones del titulo se encuentra en menus.css
 * <attrib> |blue|world|none|
 * Es el atributo que se coloca en cada módulo, ver index.php
 * Por defecto existen los tres, puedes crear el tuyo y darles sus respectivos estilos
 * Aquí son utilizados solo para cambiar el estilo del título en el módulo.
 * Los iconos y colores consultarlos en el css de cada tema
 */
.gk-module-header {
    width: 100%;
    overflow: hidden;
    height: 1%;
}

.gk-module-header div {
    float: left;
}

.blue-header {
    /* El fondo depende del tema elegido */
    width: 100%;
}

.blue .left, .blue .icon {
    height: 30px;
    width: 25px;
}

.blue .left {
    /* El fondo depende del tema elegido */
}

.world .left, .world .icon {
    height: 30px;
    width: 40px;
}


/** 
 * Contenido del Módulo
 */
.center .c {
    /* El fondo depende del tema elegido */
    margin: 0px 7px;
}

.gk-module-content {
    width: 90%;
    padding: 10px 10px;
}


/**
 * Estructura para la Salida del Componente
 * #component .layout
 * Los bordes redondeados ya han sido predefinidos en gk-module
 */
#component .layout {
    margin: 10px 0px;
}

#component .layout .content {
    padding: 10px 5px;
}

#copyright{		
	text-align: center;	
	margin-bottom: 5px;
	height: 20px;
	padding-top: 5px;
}