./* 
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: 704px;
	margin: 0 auto; /* to center */
}
		
/* ===== ===== ===== MASTHEAD ===== ===== ===== */
/* ============================================ */
#masthead {
	width: 615px;
}
#logo { /* within masthead */
	float: left;
	height: 110px;
}
#title { /* within masthead */
	padding-left: 15px;
	width: 380px;  
	float: left;
	height: 110px;
}
#photoflag { /* within masthead */
	padding: 0px;
	width: 0px;
	height: 0px;
	float: left;
}

/* ===== ===== ===== NAVIGATION BAR ===== ===== ===== */
/* ================================================== */
#bignavbar {
	width: 158px;
	padding: 0; 
	float: left;
}
#navbar { /* within bignavbar */
	width: 0px;
	height: 0px;
	padding: 0;
	float: left;
}
#navbarmember { /* within navbar */
	width: 0px;
	height: 0px;
	float: right;
	text-align: right;
	font-size: 0em;
	line-height: 0em;
}	
#navbaricons { /* within navbar */
	width: 0px;
	height: 0px;
	float: right;
	text-align: right;
	font-size: 0em;
	line-height: 0em;
}	
#navbarseparator { /* within navbar */
	width: 0px;
	height: 0px;
	float: right;
}
#facebook_eng { /* within bignavbar */
	padding: 0px;
	float: left;
	width: 0px;
}
#facebook_esp { /* within bignavbar */
	padding: 0px;
	float: left;
	width: 0px;
}
#twitter_follow_eng { /* within bignavbar */
	padding: 0px;
	float: left;
	width: 0px;
}
#twitter_tweet_eng { /* within bignavbar */
	padding: 0px;
	float: left;
	width: 0px;
}
#twitter_tweet_esp { /* within bignavbar */
	padding: 0px;
	float: left;
	width: 0px;
}

/* ===== ===== ===== CONTENT ===== ===== ===== */
/* =========================================== */
#content {
	width: 704px;
	padding: 0;
	float: left;
}
#photolinkhor { /* within content */
	width: 140px;
	height: 140px;
	float: left;
}
#photolinkver { /* within content */
	width: 140px;
	height: 140px;
	float: left;
}
#date { /* within content */
	width: 150px;
	float: left;
	font-style: italic;
	color: #6600FF;
	margin-top: 0.1em;
}
#location { /* within content */
	width: 550px;
	float: right;
	text-align: right;
	font-style: italic;
	color: #6600FF;
	margin-top: 0.1em;
}		
#metadata { /* within content */
	width: 700px;
	float: right;
	text-align: right;
	font-style: italic;
}
#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;	
}

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

#footer {
	width: 604px;
	padding-left: 20px;
	padding-top: 20px;
	float: left;
}
#arrows { /* between content and footer */
	border: 0px;
	width: 0px;
	height: 0px;
	padding-bottom: 0px; 
}
#photoarrow { /* between content and footer */
	border: 0px;
	width: 0px;
	height: 0px;
	float: left;
}
#arrowseparator { /* between content and footer */
	border: 0px;
	width: 0px;
	height: 0px;
	float: left;
}
#arrowreplacement { /* between content and footer */
	border: 0px;
	width: 0px;
	height: 0px;
	float: left;
}
#onlyprint { /* between content and footer */
	border: 0px;
	width: 0px;
	height: 0px;
}
#photonav { /* between content and footer */
	border: 0px;
	width: 0px;
	height: 0px;
	float: left;
	padding-top: 0px;
	text-align: center;
	font-size: 0em;	
}

/* ===== ===== ===== 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: #6600FF;
}
#navbar a:hover, #navbar a:focus, #navbar a:active {
	color: #6600FF;
}
.textlink {
	font-family: Georgia, "Times New Roman", serif;
}
/* ===== ===== ===== FONTS ===== ===== ===== */
/* ========================================= */
html {
	font-size: 100%; /* mandatory because of Explorer bug */
}
body {
	color: #FFFFFF;
	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: 25px; 
	margin-bottom: 0px;
}
h2 {
	font-size: 2.0em; /* equivalent of 20px */
	font-family: Georgia, "Times New Roman", serif;
	font-weight: bold;
	margin-top: 25px; 
	margin-bottom: 20px;
}
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;
}

/* ===== ===== ===== 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, and the arrows */ 
a img {
	border: 2px solid #999999;
}
a:hover img, a:focus img, a:active img {
	border: 2px solid #6600FF;
}
#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;
}

/* ===== ===== ===== 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;
	margin-top: 20px; 
	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: 0px;
	width: 0px;
	height: 0px;
}
.facebook_image {
	border: 0px;
	width: 0px;
	height: 0px;
	float: right;
}