/* ###########################################
# Script = ie.cyberalex.css
# Version : 2011-03
# Description = This is the CSS StyleSheet for CyberAlex's web site.
# Location : http://www.cyberalex.ie/
# Copyright (C) 2011 CyberAlex alias Alexandre Bayard
# Contact = alexandre_bayard [at] cyberalex [dot] ie
# Created on 2011-02-23 & last updated on 2011-03-01
#
############################################
# This program is free software: you can redistribute it 
# and/or modify it under the terms of the GNU General Public 
# License as published by the Free Software Foundation.
#
# This program is distributed in the hope that it will be useful, but 
# WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  
# See the GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program.  If not, see http://www.gnu.org/licenses/.
#
############################################
# Ce programme est un logiciel libre ; vous pouvez le 
# redistribuer ou le modifier suivant les termes de la 
# "GNU General Public License" telle que publiée par 
# la Free Software Foundation.

# Ce programme est distribué dans l’espoir qu’il vous sera utile, 
# mais SANS AUCUNE GARANTIE : sans même la garantie implicite de 
# COMMERCIALISABILITÉ ni d’ADÉQUATION À UN OBJECTIF 
# PARTICULIER. 
# Consultez la Licence Générale Publique GNU pour plus de détails.

# Vous devriez avoir reçu une copie de la Licence Générale 
# Publique GNU avec ce programme ; si ce n’est pas le cas, 
# consultez http://www.gnu.org/licenses/translations.fr.html.
#
############################################# */

/* ###########################################
	GENERAL
	Created on 2011-02-23 & last updated on 2011-02-25
############################################# */

a:link {color: #FF9900}        /* unvisited link */
a:visited {color: #FFFF00}       /* visited link */
a:hover {color: #FFFFFF}      /* mouse over link */
a:active {color: #0000FF}       /* selected link */
/* ************************************************************************
NB: a:hover MUST come after a:link and a:visited in the CSS definition in order 
to be effective, and also a:active MUST come after a:hover in the CSS definition 
in order to be effective.
************************************************************************** */

body {
	background-color: #000000;
	font-family: "Arial"; 
	font-size: 0.75em; /* font-size: 0.75em is equivalent to 12 px based on standard default of 16px.
	After that, all following sizes will be based on this as a parent, on a ratio of 25%. */
	color: #FF9900;
	}
	
h1 {	/* This block is used for SEO. It is overlapped by the block 'real-header'. */
	position:absolute;
	top: 1.5em;
	height: 80px;
	}

h2 {
	font-size: 1em; /* equivalent to 14 px based on default. */
	text-decoration: underline;
	font-weight: normal;
	}

img {
	border: none; 
	}

/* ################################################
	STYLES DEFINED BY IDs
	Created on 2011-02-23 & last updated on 2011-02-27
################################################ */

#real-header {       /* The bloc with the logo. It is overlapping the h1 block. */
	position:absolute;
	top: 1.5em;
	left: 0em;
	height: 80px;
	width: 100%;
	background-color: #000000;
	font-size: 1.25em; /* equivalent to 14 px based on default. */
	text-align: center;
	}
	
#sub-header {       /*  More info about services provided by CyberAlex (index.html). */
	height: 12em;
	z-Index: -1;
	background-color: #000000; /* Setting 'background-color' is mandatory for playing with 'z-Index'. */
/*	background-color: red; /* Just testing. */
	}
	
#more-info {       /*  More info about services provided by CyberAlex (front-end-engineering.html). */
	height: 21em;
	z-Index: -1;
	background-color: #000000; /* Setting 'background-color' is mandatory for playing with 'z-Index'. */
/*		background-color: green; /* Just testing. */
	}
	
#wyltkm {       /*  WOULD YOU LIKE TO KNOW MORE? */
	position: absolute;
	top: 11em; /* This must be the same as for the class 'info-block'. */
	left: 0em;
	width: 100%;
	height: 12em;
	background-color: #000000; /* Setting 'background-color' is mandatory for playing with 'z-Index'. */
/*	background-color: yellow; /* Just testing. */
	font-size: 1.25em; /* equivalent to 14 px based on default. */
	text-align: center;
	}
	
#dywtkm img {
/*	margin-top: 4em; */
	margin-top: auto;
	margin-bottom: auto;
	}
	
	#naga { /* Footer. */
	position: absolute;
	bottom: 5px;
	left: 0em;
	width: 100%;
	font-size: 0.8em;
	text-align: center;
	}
	
#iframe-facebook {
	margin-top: 4px;
	border:none; 
	overflow:hidden; 
	width:120px; 
	height:21px;
/*	background-color: #CC3333; */
	}


/* ################################################
	STYLES DEFINED BY CLASSES
	Created on 2011-02-27 & last modification on 2011-02-27
################################################ */

.info-block {       /*  'sub-header' & 'more-info' blocks */
	position: absolute;
	top: 11em; /* This must be the same as for the block 'wyltkm'. */
	left: 0em;
	width: 100%;
	font-size: 1.25em; /* equivalent to 14 px based on default. */
	text-align: center;
	}
	
.info-block ul { 
	list-style-type: none;
	}
	
.parajust {
	text-align: justify;
	margin-left: 22%;
	margin-right: 22%;
	}
	
.paracent {
	text-align: center;
	text-decoration: underline;
	}