./* 
STYLE SHEET FOR [Wild Tracks]
Created by [Eduardo Gallo]
[www.edugallo.com]
*/

/* ===== ===== ===== GENERAL ===== ===== ===== */
/* =========================================== */
* { /* to make all browsers behave the same way */
	margin: 0;
	padding: 0;
}
body {
}
#wrapper {
	width: 904px;
	margin: 0 auto; /* to center */
	background: #000000;
	border-width: 20px 20px 20px;
	border-style: solid;
	border-color: #999999;
}
		
/* ===== ===== ===== MASTHEAD ===== ===== ===== */
/* ============================================ */
#masthead {
	width: 864px;
	background: #000000; 
	padding-left: 20px;
}
#logo { /* within masthead */
	float: left;
	height: 110px;
}
#title { /* within masthead */
	padding-left: 15px;
	width: 600px;  
	background: #000000;  
	float: left;
	height: 110px;
}
#photoflag { /* within masthead */
	padding-top: 10px;
	padding-right: 5px;
	width: 20px;
	height: 20px;
	float: right;
}

/* ===== ===== ===== NAVIGATION BAR ===== ===== ===== */
/* ================================================== */
#bignavbar {
	width: 158px;
	background: #000000;
	padding: 0; 
	float: left;
}
#navbar{ /* within bignavbar */
	width: 158px;
	padding: 10px 0px 10px;
	float: left;
}
#navbarmember { /* within navbar */
	width: 118px;
	float: right;
	padding: 0px 20px 0px;
	text-align: right;
	font-size: 1.1em;
	line-height: 1.5em;
}	
#navbaricons { /* within navbar */
	width: 138px;
	float: right;
	padding: 0px 20px 0px 0px;
	text-align: right;
	font-size: 1.1em;
	line-height: 1.5em;
}
#navbarseparator { /* within navbar */
	width: 158px;
	height: 8px;
	float: right;
}
#facebook_eng { /* within bignavbar */
	padding: 0px 30px 0px 10px;
	float: right;
	width: 118px;
}
#facebook_esp { /* within bignavbar */
	padding: 0px 2px 0px 2px;
	float: right;
	width: 154px;
}
#twitter_follow_eng { /* within bignavbar */
	padding: 0px 35px 0px 5px;
	float: right;
	width: 118px;
}
#twitter_tweet_eng { /* within bignavbar */
	padding: 0px 20px 0px 20px;
	float: right;
	width: 58px;
}
#twitter_tweet_esp { /* within bignavbar */
	padding: 0px 20px 0px 20px;
	float: right;
	width: 68px;
}
#google_right { /* within bignavbar */
	float: right;
	padding: 0px 20px 0px 0px;	
}

/* ===== ===== ===== CONTENT ===== ===== ===== */
/* =========================================== */
#content {
	width: 704px;
	/*background: #330000; // to visualize box size */	
	padding: 2px 20px 2px;
	float: left;
	border-left: 2px solid #999999;
}
#contentmember { /* within content */
	width: 704px;
	padding-bottom: 10px; /* both lines to avoid Safari and Chrome from messing up feeling */
	margin-bottom: 40px;  /* both lines to avoid Safari and Chrome from messing up feeling */
}
#contentseparator { /* within content */
	width: 704px;
	height: 1px;
	float: right;
	background: #000000;  /* to visualize box size */	
}
#contentseparator11 { /* within content of mytracks */
	width: 704px;
	height: 3px;
	float: right;
	/* background: #FFFF00; // to visualize box size */	
}
#contentseparator22 { /* within content of mytracks */
	width: 340px;
	height: 3px;
	float: left;
	/* background: #FFFF00; // to visualize box size */	
}
#photolinkhor { /* within content */
	width: 140px;
	height: 140px;
	float: left;
}
#photolinkver { /* within content */
	width: 140px;
	height: 140px;
	float: left;
}
#date { /* within content */
	width: 110px;
	float: left;
	font-style: italic;
	color: #8822FF;
	margin-top: 0.1em;
	/* background: #FF0000; // to visualize box size */	
}
#location { /* within content */
	width: 590px;
	float: right;
	text-align: right;
	font-style: italic;
	color: #8822FF;
	margin-top: 0.1em;
	/* background: #FFFF00; // to visualize box size */	
}	
#google_left { /* within content */
	width: 40px;
	float: left;
	/* background: #008800; // to visualize box size*/	
}
#metadata { /* within content */
	width: 664px; 
	float: right;
	text-align: right;
	font-style: italic;
	/* background: #0000FF; // to visualize box size */		
}
#feeling { /* within content */
	float: left;
	text-align: left;
	font-size: 1.5em;
	padding-top: 5px;
	padding-right: 10px;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: bold;	
	/*background: #FFFFFF;   /*===============quitar por completo*/
}
#mytracksmember { /* within "my_tracks" content */
	width: 704px;
	float: left;
}
#mytracks { /* within "my_tracks" content */
	width: 660px;
	float: left;
	/* background: #0000FF; // to visualize box size */		
}
#mytracks2 { /* within "my_tracks" content */
	width: 300px;
	float: left;
	padding-top: 10px;
	padding-bottom: 5px; 
	/* background: #0000FF; // to visualize box size */		
}
#mytracks3 { /* within "my_tracks" content */
	width: 300px;
	float: left;
	padding-top: 3px;
	/* background: #0000FF; // to visualize box size */		
}
#emptyspacevericalphoto { /* within content of my tracks */
	width: 42px;
	height: 376px;
	float: left;
	/* background: #888888; // to visualize box size */	
}

/* ===== ===== ===== FOOTER ===== ===== ===== */
/* ========================================== */

#footer {
	width: 664px;
	background: #000000;
	padding: 20px 120px 20px;
	float: left;
}
#arrows { /* between content and footer */
	height: 23px;
	width: 520px;
	padding-bottom: 10px; 
 	display: block; /* 3 lines for showing centered image */
	margin-left: auto; 
	margin-right: auto; 
}
#photoarrow { /* between content and footer */
	width: 16px;
	height: 23px;
	float: left;
}
#arrowseparator { /* between content and footer */
	width: 30px;
	height: 23px;
	float: left;
}
#arrowreplacement { /* between content and footer */
	width: 16px;
	height: 23px;
	float: left;
}
#onlyprint{ /* to avoid printing the navigation text */
}
#photonav{ /* between content and footer */
	height: 23px;
	float: left;
	padding-top: 5px;
	padding-left: 4px;
	text-align: center;
	font-size: 0.8em;	
}

/* ===== ===== ===== FLOAT SEPARATING RULES ===== ===== ===== */
/* ========================================================== */
.separator {
	clear: both;
}
.separatorInvisible {
	clear: both;
	height: 1px;
}
.clearFix:after {
   	content: "."; 
   	display: block; 
   	height: 0; 
   	clear: both; 
   	visibility: hidden;
}		
		
/* ===== ===== ===== LINKS ===== ===== ===== */
/* ========================================= */
/* Links not underlined in navigation bar. They turn purple when hovering */
a {
	font-family: "Courier New", Courier, monospace;
	font-size: 1.2em; /* equivalent of 12px */
	color: #999999;	
}
#navbar a {
	text-decoration: none;
}
a:hover, a:focus, a:active { 
	color: #8822FF;
}
#navbar a:hover, #navbar a:focus, #navbar a:active {
	color: #8822FF;
}
.textlink {
	font-family: Georgia, "Times New Roman", serif;
}
.noline {
	text-decoration: none;
}

/* ===== ===== ===== FONTS ===== ===== ===== */
/* ========================================= */
html {
	font-size: 100%; /* mandatory because of Explorer bug */
}
body {
	background: #333333;
	color: #999999;
	font-size: 62.5%; /* the default is usually 16px, so 62.5% means 10px */
}
h1 {
	font-size: 2.0em; /* equivalent of 20px */
	font-family: Georgia, "Times New Roman", serif;
	font-weight: bold;
	margin-top: 0.1em; 
	margin-bottom: 0.0em;
}
h2 {
	font-size: 2.0em; /* equivalent of 20px */
	font-family: Georgia, "Times New Roman", serif;
	font-weight: bold;
	margin-top: 0.1em; 
	margin-bottom: 0.7em;
}
h3 {
	font-size: 1.5em; /* equivalent of 20px */
	font-family: Georgia, "Times New Roman", serif;
	font-weight: bold;
	margin-top: 0.1em; 
	margin-bottom: 0.7em;
}
p {	
	font-size: 1.2em; /* equivalent of 12px */
	font-family: Verdana, "Lucida Sans Unicode", sans-serif;
	line-height: 1.3;
	margin-top: 1px;
	margin-bottom: 0.7em;
}
li {
	font-size: 1.2em; /* equivalent of 12px */
	font-family: Verdana, "Lucida Sans Unicode", sans-serif;
	line-height: 1.3;
	margin-left: 1.2em;
	margin-bottom: 0.7em;
}
pre {
	font-family: "Courier New", Courier, monospace;
}	
.bigcapital {
	font-size: 1.3em;
}
.titlemain { /* main title in masthead */
	font-size: 3.5em; /* equivalent of 35px */
	font-family: Georgia, "Times New Roman", serif;
	font-weight: bold;
	line-height: 1.3;
	margin-bottom: 1px;
}
.titlesecond { /* secondary title in masthead */
	font-size: 1.8em; /* equivalent of 18px */
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	line-height: 1.3;
	margin-bottom: 20px;
}
.center  { /* align text to the center horizontally */
	font-style: italic;
	text-align: center;
}
.disclaimer {
	font-size: 1.0em; /* equivalent of 10px */
	text-align: center;
}
.extramargin { 
	color: #000000;
}
.quoteauthor { 
	font-size: 0.8em;
}
.photoall {
	width: 100px;
}
.italicsmall {
	font-style: italic;
	font-size: 1.0em;	
}
/* ===== ===== ===== LINK IMAGES ===== ===== ===== */
/* =============================================== */
/* By default a border of same color as background so it does not show. When hovering, the border
turns purple. The border does not show within the masthead, the navigation bar, the google, and the arrows */ 
a img {
	border: 2px solid #999999;
}
a:hover img, a:focus img, a:active img {
	border: 2px solid #8822FF;
}
#masthead a:hover img, #masthead a:focus img, #masthead a:active {
	border: 2px solid #000000;
}
#navbar a:hover img, #navbar:focus img, #navbar a:active {
	border: 2px solid #000000;
}
#arrows a:hover img, #arrows:focus img, #arrows a:active {
	border: 2px solid #000000;
}

#google a:hover img, #google:focus img, #google a:active {
	border: 2px solid #000000;
}

/* ===== ===== ===== IMAGES ===== ===== ===== */
/* ========================================== */
#photolinkhor img { /* within content */
	margin-top: 28px;
	margin-left: 8px;
}
#photolinkver img { /* within content */
	margin-top: 8px;
	margin-left: 28px;
}
.big_image {
	border: 2px solid #999999;
	display: block; /* 3 lines for showing centered image */
	margin-left: auto; 
	margin-right: auto; 
}		
.gallo_image_right{
	border: 2px solid #999999;
	float:right;
	margin: 10px 0px 10px 10px;
}
.gallo_image_left {
	border: 2px solid #999999;
	float: left;
	margin: 10px 20px 10px 0px;
}
.flag_image {
	border: 2px solid #000000; 
}
.facebook_image {
	border: 2px solid #000000;
	width: 18px;
	height: 18px;
	float: right;
}
	
/* ===== ===== ===== TABLES ===== ===== ===== */
/* ========================================== */

.alignup {
	vertical-align: top;
}
.aligndown {
	vertical-align: bottom;
	text-align: right;
}
.aligncolordown {
	vertical-align: bottom;
	text-align: right;
	color: #8822FF;
}