Styled the main page with the styles of the public page.

www-admin/css/m/ui.css

@@ -0,0 +1,240 @@
+/******************************************
+* Hide elements intended for desktop and  *
+* show elements for mobile.               *
+******************************************/
+.mobile{
+	display:	initial;
+}
+
+.desktop{
+	display:	none !important;
+}
+
+
+/******************************************
+* Styles for the site header that is      *
+* always visible.                         *
+******************************************/
+
+/* Header top container */
+div#header_m{
+	width:		100%;
+	margin:		0;
+	padding:	0;
+	transition:	max-height 0.9s ease-in-out;
+}
+
+/* Main image of the header, contains the logo */
+div#header_m img#mobile_logo{
+	float:			left;
+	width:			4em;
+	margin-right:	-4em;
+	-webkit-filter:	drop-shadow(0 0 0.2em #336);
+	filter:			url(#drop-shadow);
+	filter:			drop-shadow(0 0 0.2em #336);
+	-ms-filter:		"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
+	filter:			"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#444')";
+	border:			0.05em solid #000011;
+	border-radius:	100%;
+}
+
+div#header_menu_m div{
+	padding-top:		0.6em;
+	font-weight:		bold;
+	text-align:			center;
+	background-color:	#aaaaaa;
+	border:				1px solid #000000;
+}
+
+div#header_menu_m div#header_m_slider{
+	display:			none;
+	background-color:	#0078ff;
+}
+
+div#header_menu_m div#header_m_slider img{
+	height: 1em;
+	width:	1em;
+	margin: auto;
+}
+
+div#header_menu_m div#header_m_title{
+	vertical-align:		middle;
+	color:				#ffffff;
+	max-height:			3.5em;
+	padding-top:		0.75em;
+	transition:			max-height 0.3s ease-in-out;
+	overflow:			hidden;
+	padding:			0;
+	background-color:	#0078ff
+}
+
+div#header_menu_m div#header_m_title span {
+	display:	block;
+	margin:		0.4em;
+}
+
+div#header_menu_m div#header_m_title span img{
+	vertical-align:	middle;
+}
+
+div#header_menu_m div#header_m_title img{
+	height: 1.9em;
+	width:	1.9em;
+	float:	center;
+}
+
+div#header_menu_m div.header_m_link{
+/* 	display:			none; */
+	max-height:			0;
+	padding:			0;
+	border:				0;
+	overflow:			hidden;
+	transition:			max-height 0.3s ease-in-out;
+	background-color:	#0078ff;
+}
+
+div#header_menu_m div.header_m_link a{
+	color:			#ffffff;
+	text-shadow:	0 0 0.5em #444444;
+	display:		block;
+	width:			100%;
+	height:			2.8em;
+}
+
+/******************************************
+* Styles for the site footer that is      *
+* always visible.                         *
+******************************************/
+
+/* Table containing the footer elemnts */
+div#footer div#footer_table{
+	display:	block;
+}
+
+div#footer div#footer_table div.tr{
+	display:	block;
+}
+
+/* Each main section of the footer */
+div#footer div#footer_table div.td{
+	width:			100%;
+	display:		block;
+	text-align:		center;
+	margin-bottom:	1em;
+	margin:			0;
+	padding:		0;
+}
+
+/* Images for language selection */
+img.lang{
+	height:			1.5em;
+	margin:			0.5em 1em 0.5em 1em;
+	border-radius:	0.2em;
+	border:			0.1em solid #222222;
+	box-shadow:		0 0 0.3em #333333;
+}
+
+img.lang:hover{
+ 	box-shadow:		0 0 0.3em #333333; /*NONE*/
+}
+
+/* Mobile app link image in the footer */
+img.app{
+	height:			1.5em;
+	margin:			0.5em 1em 0.5em 1em;
+	border-radius:	0.2em;
+	border:			0.1em solid #222222;
+	box-shadow:		0 0 0.3em #333333;
+}
+
+img.app:hover{
+	box-shadow:	0 0 0.5em #666666; /*NONE*/
+}
+
+/* Each of the social links in the footer */
+img.footer_social_icon{
+	height:			3em;
+	margin:			0.25em;
+}
+
+img.footer_social_icon:hover{
+	-webkit-filter:	drop-shadow(0 0 0.2em #444444);/*NONE*/
+	filter:			drop-shadow(0 0 0.2em #444444);/*NONE*/
+}
+
+
+/******************************************
+* Styles for the main block that compose  *
+* the site. Most of the pages share the   *
+* same structure.
+******************************************/
+
+/* Content */
+div#content{
+	margin:		auto;
+	width:		95%;
+	max-width:	initial;
+	min-width:	initial;
+}
+
+/******************************************
+* Styles for the ad window.               *
+******************************************/
+div#ad{
+	width:		70%;
+	position:	fixed;
+	bottom:		-25em;
+	left:		15%;
+	right:		15%
+}
+
+div#ad h3{
+	margin-top:	0.3em;
+}
+
+div#ad div#ad_details{
+	font-size:		90%;
+	margin:			0.3em;
+}
+
+div#ad div#ad_details img{
+	height:			1.2em;
+	width:			1.2em;
+	margin: 		0 0.5em 0 0.5em;
+}
+
+div#ad div.entry div#ad_image_container{
+	max-height:	9.5em;
+	margin:		0.5em 0.6em 0.5em 0.6em;
+	text-align:	center;
+}
+
+div#ad div.entry a{
+	font-size:		100%;
+}
+
+/******************************************
+* Styles for the annoying cookie popup.   *
+******************************************/
+div#cookie_popup{
+	font-size:					80%;
+	color:						#dddddd;
+	text-align:					center;
+	position:					fixed;
+	background-color:			#4c9ed8;
+	border:						0.5em solid #265774;
+	padding:					1em 4em 1em 4em;
+	left:						0em;
+	right:						0em;
+	bottom:						0em;
+	-ms-transform:				rotate(0deg); /* IE 9 */
+	-ms-transform-origin:		0% 0%; /* IE 9 */
+	-webkit-transform:			rotate(00deg); /* Chrome, Safari, Opera */
+	-webkit-transform-origin:	0% 0%; /* Chrome, Safari, Opera */
+	-moz-transform:				rotate(00deg); 
+	-moz-transform-origin:		0% 0%; /* Chrome, Safari, Opera */
+	transform:					rotate(00deg);
+	transform-origin:			0% 0%;
+	box-shadow:					0 0 3em #265774;
+	transition:					bottom .5s ease-in-out;
+}

www-admin/css/ui.css

@@ -1,59 +1,106 @@
-.stroke{
-	text-decoration:	line-through;
+/******************************************
+* Hide elements intended for mobile.      *
+******************************************/
+.mobile{
+	display:	none;
 }
 
-.underline{
+/******************************************
+* Fonts used across the page              *
+******************************************/
+
+/* Glogal font */
+@font-face{
+	font-family:	font;
+	src:			url('/font/FreeSans.ttf')
+}
+
+
+/******************************************
+* Styles for html tags, without id or     *
+* class.                                  *
+******************************************/
+
+/* Links */
+a{
+	color:				#4c9ed9;
+	text-decoration:	none;
+	transition:			all .2s ease-in-out;
+}
+
+a:hover{
+	color:				#347;
+	text-shadow:		0 0 0.4em #265885;
 	text-decoration:	underline;
 }
 
-.bold{
-	font-weight:	bold;
+/* Fake links */
+.fake_a{
+	color:				#4c9ed9;
+	text-decoration:	none;
+	transition:			all .2s ease-in-out;
 }
 
-.italic{
-	font-style:	italic;
+.fake_a:hover{
+	color:				#347;
+	text-shadow:		0 0 0.4em #265885;
+	text-decoration:	underline;
 }
 
-input[type="text"], input[type="number"], input[type="date"], input[type="password"]{
-	border-radius:		0.5em;
-	height:				2em;
-	border:				0.4em solid #9cd3d9;
-	color:				#cccccc;
-	background-color:	#223344;
+/* Body */
+body{
+	font-family:		font;
+	margin:				0;
+	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5d3e5+0,e5f4ff+10,e5f4ff+90,b5d3e5+100 */
+	background: #b5d3e5; /* Old browsers */
+	background: -moz-linear-gradient(left, #b5d3e5 0%, #e5f4ff 10%, #e5f4ff 90%, #b5d3e5 100%); /* FF3.6-15 */
+	background: -webkit-linear-gradient(left, #b5d3e5 0%,#e5f4ff 10%,#e5f4ff 90%,#b5d3e5 100%); /* Chrome10-25,Safari5.1-6 */
+	background: linear-gradient(to right, #b5d3e5 0%,#e5f4ff 10%,#e5f4ff 90%,#b5d3e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5d3e5', endColorstr='#b5d3e5',GradientType=1 ); /* IE6-9 */
+
+}
+
+/* WARNING: If styles change dhere, make changes on commment scripts */
+input[type="text"], input[type="number"], input[type="date"]{
+	border-radius:		0.3em;
+	height:				1.5em;
+	border:				0.2em solid #0078ff;
+	color:				#002255;
+	background-color:	#ccddff;
+	margin:				0.1em;
 }
 
 input[type="button"], input[type="submit"], select{
-	border-radius:		0.5em;
-	height:				2.5em;
-	border:				0.4em solid #9cd3d9;
+	border-radius:		0.3em;
+	height:				2em;
+	border:				0.2em solid #0078ff;
 	font-weight:		bold;
 	color:				#ffffff;
-	background-color:	#335577;
+	background-color:	#124567;
 	cursor:				pointer;
+	margin:				0.1em;
+	letter-spacing: 	0.1em;
 }
 
 textarea{
-	border-radius:		0.5em;
+	border-radius:		0.3em;
 	min-height:			2em;
 	max-height:			15em;
-	border:				0.4em solid #9cd3d9;
-	color:				#bbbbbb;
-	background-color:	#223344;
+	border:				0.2em solid #0078ff;
+	color:				#002255;
+	background-color:	#ccddff;
 	resize:				vertical;
+	margin:				0.1em;
 }
 
-/* Links */
-a{
-	color:				#4c9ed9;
-	text-decoration:	none;
-	transition:			all .2s ease-in-out;
+li{
+	list-style-image:	url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVQImWNgIBqU//+PWwKGcUoQVECanVgAAJSsH/KywgEfAAAAAElFTkSuQmCC');
 }
 
-a:hover{
-	color:				#347;
-	text-shadow:		0 0 0.4em #265885;
-	text-decoration:	underline;
-}
+/******************************************
+* Common elements present across the      *
+* whle site.                              *
+******************************************/
 
 /* Icon for slider sections */
 img.slid{
@@ -70,64 +117,86 @@ img.slid{
 	cursor:	pointer;
 }
 
+/* Elemnts not to be displayed */
+.hidden{
+	display:	none;
+}
 
-/* Body */
-body{
-	font-family:		font;
-	margin:				0;
-	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b5d3e5+0,e5f4ff+10,e5f4ff+90,b5d3e5+100 */
-	background: #b5d3e5; /* Old browsers */
-	background: -moz-linear-gradient(left, #b5d3e5 0%, #e5f4ff 10%, #e5f4ff 90%, #b5d3e5 100%); /* FF3.6-15 */
-	background: -webkit-linear-gradient(left, #b5d3e5 0%,#e5f4ff 10%,#e5f4ff 90%,#b5d3e5 100%); /* Chrome10-25,Safari5.1-6 */
-	background: linear-gradient(to right, #b5d3e5 0%,#e5f4ff 10%,#e5f4ff 90%,#b5d3e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5d3e5', endColorstr='#b5d3e5',GradientType=1 ); /* IE6-9 */
+/* Elements with an italic font */
+.italic{
+	font-style:	italic;
+}
+
+/*Elements with a bold font*/
+.bold{
+	font-weight:	bold;
 }
 
+/*Stroked elements*/
+.stroke{
+	text-decoration:	line-through;
+}
+
+/*Underlined elements*/
+.underline{
+	text-decoration:	underline;
+}
+
+
 /* Content */
 div#content{
 	margin:		3em auto auto auto;
 	width:		90%;
 	max-width:	80em;
+	min-width:	60em;
 }
 
 /* Sections */
 div.section{
-	background-color:	#9bc1da;
-	padding:			0.1em 0.3em 0.1em 0.1em;
-	border:				0.2em solid #9cd3d9;
+	border-left:		0.1em solid #000011;
+	border-right:		0.1em solid #000011;
+	border-bottom:		0.1em solid #000011;
+	border-radius:		1em;
+	padding:			0 0 0.5em 0;
+	background-color:	#98c8ff;
+	-webkit-filter:		drop-shadow(0 0 0.4em #000011);
+	filter:				drop-shadow(0 0 0.4em #000011);
+    -ms-filter:			"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
+    filter:				"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
 }
 
 /* Title for each section */
 div.section .section_title{
-	font-size:	130%;
-	font-style:	bold;
-	margin-top:	0.5em;
+	font-size:					120%;
+	font-style:					bold;
+	color:						#ffffff;
+	background-color:			#0078ff;
+	padding:					0.5em 2em 0.1em 1.5em;
+	border-top-left-radius:		0.7em;
+	border-top-right-radius:	0.7em;
+	border:						0.1em solid #000011;
+	margin:						0;
 }
 
 /* Entries */
-div.entry{
+.entry{
 	background-color:	#ffffff;
 	padding:			0.2em;
 	margin:				0.4em;
-	border:				0.2em solid #9cd3d9;
+	border:				0.1em solid #6D6990;
+	border-radius:		0.3em;
 	box-shadow:			inset 0 0 0.2em #dde;
 	transition:			all .3s ease-in-out;
 }
 
-td.entry{
-	background-color:	#ffffff;
-	padding:			0.2em;
-	margin:				0.4em;
-	border:				0.2em solid #9cd3d9;
-	box-shadow:			inset 0 0 0.2em #dde;
-	transition:			all .3s ease-in-out;
-}
 
+/******************************************
+* Main toolbar.                           *
+******************************************/
 div#member_action input{
 	margin:	0.5em 2em 0.5em 2em;
 }
 
-/* Toolbar styles */
 div#toolbar{
 	background-color:	#000000;
 	margin:				0;
@@ -167,6 +236,9 @@ div#toolbar td a{
 	transition:			all .3s ease-in-out;
 }
 
+/******************************************
+* Secondary toolbars.                     *
+******************************************/
 div.secondary_toolbar{
 	background-color:	#333333;
 	margin:				0;
@@ -201,6 +273,9 @@ div.secondary_toolbar td a:hover{
 	text-decoration:	none;
 }
 
+/******************************************
+* Translation elements.                   *
+******************************************/
 table.translation_table{
 	border-collapse:	collapse;
 }

www-admin/main.php

@@ -30,7 +30,7 @@
 				<div class='section_row'>
 					<div class='section_cell'>
 						<div class='section'>
-							<h3>Blog</h3>
+							<h3 class='section_title'>Blog</h3>
 							<div class='entry'>
 								<ul>
 									<li><a href='/blog/add/'>Nuevo post</a></li>
@@ -43,7 +43,7 @@
 					</div>
 					<div class='section_cell'>
 						<div class='section'>
-							<h3>Actividades</h3>
+							<h3 class='section_title'>Actividades</h3>
 							<div class='entry'>
 								<ul>
 									<li><a href='/actividades/add/'>Nueva actividad</a></li>
@@ -58,7 +58,7 @@
 				<div class='section_row'>
 					<div class='section_cell'>
 						<div class='section'>
-							<h3>Galeria</h3>
+							<h3 class='section_title'>Galeria</h3>
 							<div class='entry'>
 								<ul>
 									<li><a href='/galeria/add/'>Crear album</a></li>
@@ -72,7 +72,7 @@
 					</div>
 					<div class='section_cell'>
 						<div class='section'>
-							<h3>Fiestas</h3>
+							<h3 class='section_title'>Fiestas</h3>
 							<div class='entry'>
 								<ul>
 									<li><a href='/lablanca/'>Preparar las fiestas</a></li>
@@ -86,7 +86,7 @@
 				<div class='section_row'>
 					<div class='section_cell'>
 						<div class='section'>
-							<h3>Miembros</h3>
+							<h3 class='section_title'>Miembros</h3>
 							<div class='entry'>
 								<ul>
 									<li><a href='/miembros/'>Consultar y buscar</a></li>
@@ -98,7 +98,7 @@
 					</div>
 					<div class='section_cell'>
 						<div class='section'>
-							<h3>Estadisticas</h3>
+							<h3 class='section_title'>Estadisticas</h3>
 							<div class='entry'>
 								<ul>
 									<li><a href='/estadisticas/web.php'>Estadisticas Web</a></li>
@@ -112,7 +112,7 @@
 				<div class='section_row'>
 					<div class='section_cell'>
 						<div class='section'>
-							<h3>Ajustes</h3>
+							<h3 class='section_title'>Ajustes</h3>
 							<div class='entry'>
 								<ul>
 									<li><a href=''>Cambiar ajustes</a></li>

www/css/ui.css

@@ -132,6 +132,16 @@ img.slid{
 	font-weight:	bold;
 }
 
+/*Stroked elements*/
+.stroke{
+	text-decoration:	line-through;
+}
+
+/*Underlined elements*/
+.underline{
+	text-decoration:	underline;
+}
+
 
 /******************************************
 * Styles for the site header that is      *
@@ -404,23 +414,23 @@ div.section{
 	border-radius:		1em;
 	padding:			0 0 0.5em 0;
 	background-color:	#98c8ff;
-	-webkit-filter:	drop-shadow(0 0 0.4em #000011);
-	filter:			drop-shadow(0 0 0.4em #000011);
-    -ms-filter:		"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
-    filter:			"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
+	-webkit-filter:		drop-shadow(0 0 0.4em #000011);
+	filter:				drop-shadow(0 0 0.4em #000011);
+    -ms-filter:			"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
+    filter:				"progid:DXImageTransform.Microsoft.Dropshadow(OffX=0, OffY=0, Color='#000011')";
 }
 
 /* Title for each section */
-.section_title{
-	font-size:	120%;
-	font-style:	bold;
-	color:		#ffffff;
-	background-color:	#0078ff;
-	padding:			0.5em 2em 0.1em 1.5em;
-	border-top-left-radius:	0.7em;
+div.section .section_title{
+	font-size:					120%;
+	font-style:					bold;
+	color:						#ffffff;
+	background-color:			#0078ff;
+	padding:					0.5em 2em 0.1em 1.5em;
+	border-top-left-radius:		0.7em;
 	border-top-right-radius:	0.7em;
-	border:		0.1em solid #000011;
-	margin:				0;
+	border:						0.1em solid #000011;
+	margin:						0;
 }
 
 div.section a.go_to_section{