/* ===== lauramoreno.net v3  
	main css file  
	author: laura moreno
========================================= */

/*====== summary 
	- colour palette
	- reset browser default styling
   	- general rules: body and main id + class
   	- highligh navigation
   	- header
   	- container
     	- ramdon images setting, index php
     	- top right menu
     	- language options
     	- info text about lightbox
     	- pictures thumbnails
     	- lightbox style on separate style sheet
     	- links page
     	- about text
     	- contact form - on separate style sheet -
     - footer
=======================================================*/

/* ===== colour palette 
	
	off black   - #0c0c0c  - body background & contact form imput tex 
	darker grey - #272727  - container background
	dark grey   - #272727  - body font colour
	grey        - #666     - photography header
	orange      - #ff7f2a  - links, lines container, name header, paragraph, menu
	dark orange - #994107  - visited links
========================================= */





/* ======= reset browser default styling ========================================= */
html, body, div, span, h1, h2, h3, h4, p, a, em, img, font, ul, li, fieldset, form, label, legend{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	background: transparent;
	vertical-align: baseline;
}
body {
	line-height: 1;
}
ul {
	list-style: none;
}
:focus, :active { 
outline: 0; 
}

textarea { 
overflow:auto; 
}

/* ====== body and main id + class general rules  ========================================= */


body {
	font-size: 66%; 
	font-family: Lucida, Verdana, Sans-Serif; 
	line-height: 150%; 
	color: #585555;
	background:#0c0c0c;
}


p{
	color: #ff7f2a;
	font-size: 1em;
}
a {
	color: #ff7f2a;
	text-decoration:none;

}

a, a:link, a:visited {
	color: #ff7f2a;
	text-decoration: none;
}

a:hover, a:active {
	color: #ccc;
}

h1{
	font-size: 2em;
}



h3 {
	font-size: 1.2em;
	font-weight:bold;
}

h4 {
	font-size: 1.1em;
}


/* ======== highlight navigation ======== */

 body#about a#aboutnav, body#links a#linksnav, body#colour a#colournav, body#travel a#travelnav, body#contact a#contactnav, body#bw a#bwnav, body#music a#musicnav {
	color: #fff;
	text-decoration: underline;
}

/* === highlight navigation spanish version=== */

 body#sobre a#aboutnav, body#enlaces a#linksnav, body#color_sp a#colournav, body#viajes a#travelnav, body#contacto a#contactnav, body#bnegro a#bwnav, body#musica a#musicnav {
color: #fff;
text-decoration: underline;
}



/* == header - name and title =========== */
#header{
	width: 347px;
	height: 42px;
	margin:30px auto 0 20px;
	color: #ff7f2a;
	
}
#header h1#homenav {
	padding: 24px 0 0 0;
	font-weight: normal;
}


.pho{
	padding: 0 0 0 5px;
	color: #666;
	
}
/* === strip grey colour - container ==== */

#container {
	margin: 0 auto;
	height: 495px; 
	background: #272727 url(../images/bf5.png) no-repeat right bottom;
	border-top: 1px solid #ff6c0b;
	border-bottom: 1px double #ff6c0b;
	display: block;
}

/* ====== random php at index page ====== */

#random{
	margin:0;
	padding: 35px 0 0 178px;
	width: 450px;
	height:380px;

}

#random img{
	border: 1px dotted #666;
}

/*** top right menu ****/
#navlist{
	margin: 0 auto;
	
}

#nav ul li{
	float: right;
	display: inline;
	padding: 5px 10px 0 10px;
	font-size: 1.2em;
}


#nav a, #nav a:link, #nav a:visited {
	color: #ff7f2a;
	text-decoration: none;

}

#nav a:hover, #nav a:active {
	color: #ccc;
	text-decoration: underline;

}

/* language options */

#language{
	position: absolute;
	margin: 0;
	width: 150px;
	padding: 500px 0 0 20px;
	font-size: 1em;	
}

body#home a.en, body#about a.en, body#links a.en, body#colour a.en, body#travel a.en, body#contact a.en, body#bw a.en, body#music a.en, body#proom a.en {
	border-bottom: 1px dotted #ff7f2a;
}

/* spanish version - language highlight */

body#inicio a.es, body#sobre a.es, body#enlaces a.es, body#color_sp a.es, body#viajes a.es, body#contacto a.es, body#bnegro a.es, body#musica a.es, body#privado a.es {

border-bottom: 1px dotted #ff7f2a;
}

/* info about lightbox */

#info {
	display: block;
	position: absolute;
	top: 126px;
	left: 10px;
	width: 140px;
	text-align: right;
	height: 170px;
	padding: 5px 0;
	margin-bottom: 5px;
	border-top: 1px dotted #5a5a5a;
}
#info a {
	color: #5a5a5a;
}
#info a:hover, #info a:active {
	color: #ff7f2a;
}
#infotxt {
	display: block;
	text-align: left;
	color: #bbb;
	border-bottom: 1px dotted #5a5a5a;
}
#infotxt p {
	margin: 0.7em 0;
	color: #bbb;
}

/* ====== pictures thumbnail -lightbox style on separate style shett ================= */

.desc ul {
	margin: 50px 0 20px 178px;
	width: 700px;
}

.desc ul li {
	float: left;
	list-style: none;
	margin: 0.3em;
}

.desc ul li img {
	border: 1px dotted #ff6c0b;
	
}

.desc a:link img{
	width: 80px;
	height: 80px;
}

.desc a:visited img{
	border: 1px dotted #ccc;
}

.desc a:hover img, .desc a:active img {	
	border: 1px solid #fff;	
	
}

.clear {
	clear: both;
}


/****** links page ****/

#content{
	margin: 50px 0 0 180px;
	
}

#content ul {
	margin-left: -5px;
	padding: 20px 0 0 0;
	width: 600px;

}
#content ul li{
	float: left;
	list-style: none;
	margin: 0.3em;
	padding: 0;
}

#content ul li a{
       display: block;
       text-decoration: none;
       width: 80px;
       height: 80px;
       float: left;
       margin: 0  0;
       padding: 5px;
         
}

#content ul li a:link {
       color: #ff7f2a;
       background: #181818;
      
}
#content ul li a:visited {
       color: #994107;
       background: #070707;
      ;
       }
#content ul li a:hover {
       color: #181818;
       background: #ff7f2a;
      
}
#content ul li a:active {
       color: #181818;
       background: #ff7f2a;
}


/* === about section ===*/

#aboutme{
	width: 600px;
	height: 500px;
	margin: 35px 0 0 170px;

}

#aboutme p{
	font-size: 1.1em;
	color: #ff7f2a;
	padding: 10px;
	line-height: 1.6em;
	letter-spacing: 0.02em;
}


#aboutme p a, #aboutme p a:link, #aboutme p a:visited {
	color: #f8f8f8;
	border-bottom: 1px dotted #ff760c;
}

#aboutme p a:hover, #aboutme p a:active {
	color: #777;
	border-bottom: 1px dotted #ff760c;
}



/*contact form - apologies*/

#contact-text{
	margin: 50px 0 0 50px;
	
}
#contact-text h3{
	margin: 10px 0;
}

#contact-text p{
	margin: 20px 0 0 0;
}

#contact-text span{
	color: #797979;
}
/***** footer settings  ******/

#footer{
	margin: 5px 0 0 0;
	text-align: right;
	font-size: 1.1em;
}

#footer ul li{
	display: inline;
	padding: 5px 10px 0 5px;
}