/* ===== trishlomax.com v2 
	main css file  
	author: laura moreno
========================================= */

/*====== summary 
	- colour palette
	- reset browser default styling
   	- general rules: body and main id + class
   	- wrap
   	- highligh navigation
   	- header
   		- home header
   		- subpages header
   	- container  	
     	- top right menu
     	- home page content graphic
     	- profile page style
     	- portfolio page	
     		- main style
     		- css gallery
     	- testimonails page style
     	- experience page style	
     - footer
=======================================================*/

/* ===== colour palette 
	
	white     - #fffff     - body background 
	dark grey - #797979    - header 
	grey      - #b4b4b4    - subheader - h2
	red       - #db594b    - links, highlight navigation
	soft red  -#ff6545	   - footer ?
========================================= */





/* ======= 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: Helvetica, Ariel, Geneva, sans-serif;
	line-height: 150%; 
	color: #797979;
	background:#ffffff;
}


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

}

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

a:hover, a:active {
	color: #797979;
	border-bottom: 1px solid #db594b;
}

h1{
	font-size: 2em;
}

h2{
	
}

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

h4 {
	font-size: 1.1em;
}

/* ======= wrap  - all central in the middle ========*/
#wrap{
	position: absolute;
	top: 0; 
	left: 0; 
	margin: 5% auto 5% auto;
	width: 100%; 
	
}


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

body#profile a#profile_nav, body#portfolio a#portfolio_nav, body#testimonials a#testi_nav, body#experience a#experi_nav {
	color: #db594b;
	text-decoration: none;
}




/* ===== header - name and title =========== */
#header{
	margin: 0;
	padding: 1.6em;
	width: 300px;
	float: left;

}
#header h1{
	margin: 0px 0 0 0;
	padding: 1em 0 0 1em;
}

/* === second thiner name header ====*/

#profile #header h1, #portfolio #header h1,#testimonials #header h1,  #experience #header h1{
	padding: 1.3em 0 0 1em;
}

#header h1 a{
	border: none;
	text-decoration: none;
}

#header h2{
	text-transform: uppercase;
	width: 230px;
	padding: 2.4em 0 0 3em;
	/*color: #b4b4b4;*/
	color: #797979;
	font: "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
	font-weight: lighter;
	font-size: 1.6em;
	line-height: 1.2em;

}
/* =======  container ======= */


#container{
	height: 650px;	
} 

#content{
	display: block;
	margin: 0 auto;
	width: 864px;
	height: 615px;
	background: url(../images/graphics/bg-newhome.gif) top right no-repeat;
}

/*** ======= top right menu ========****/
#navlist{
	margin: 5em 0 0 0;
	float: left;

}

#nav ul li{
	display: inline;
	padding: 0 1.3em;
	font-size: 1.7em;
	font-weight: normal;
	border-left: 1px solid #db594b;
	
}
/*#nav ul li #profile_nav{
	border-left: 0px;
	border: none;

}*/

#nav ul li:first-child{
	border: none;
}
#nav a, #nav a:link, #nav a:visited {
	color: #797979;
	text-decoration: none;

}

#nav a:hover, #nav a:active {
	color: #db594b;
	border-bottom: 1px solid #797979;
}

/* ======= home page =========== */

#home #content #presentation img{
	margin: -90px 60px 0 0;	
	float: right;
	position:relative;
}

/* == backgrounds - few different on each page ===*/

#profile #content, #testimonials #content, #experience #content{
	background: url(../images/graphics/bg-subpage.gif) top right no-repeat;
}

#portfolio #contentphoto{
	background: url(../images/graphics/bg.gif) top right no-repeat;
	display: block;
	margin: 0 auto;
	width: 864px;
	height: 615px;
}

/*======== profile page ========= */

#profile #profile-content{	
	float: left;
}

#profile #profile-content .intro{
	width: 170px;
	margin: 3em;
	padding: 1em 3em 0 0;
	color: #db594b;
	font-size: 1.4em;
	line-height: 1.6em;
	float: left;
}

#profile #profile-content .maintext{
	margin: 3em 0 0 0;
	padding: 1em;
	font-size: 1.3em;
	width: 440px;
	display: block;
	float: right;
	color: #797979;

}
#profile #profile-content .maintext span.bullet{
	color: #db594b;
	margin: 0 0 0 -1.2em;
	padding: 0 0.6em 0 0;
}
#profile #profile-content .maintext li{
	list-style: none;
	padding: 0.6em 0 0.6em 0;
}

/*======= portfolio page ===========*/

#gallery{
}

/* Galleriffic minimal jQuery gallery*/
div.content {
	/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
	display: none;
	float: right;
	width: 550px; 
}

div.content a:focus, div.content a:hover, div.content a:active {
	text-decoration: none;
}

div.slideshow-container {
	position: relative;
	clear: both;
	height: 400px; /* This should be set to be at least the height of the largest image in the slideshow */
}
/*gif loader*/
div.loader {
	position: absolute;
	top: 0;
	left: 0;
	background-image: url('../images/graphics/loader.gif');
	background-repeat: no-repeat;
	background-position: center;
	width: 400px;
	height: 400px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
div.slideshow a.advance-link {
	display: block;
	width: 550px;
	height: 400px; /* This should be set to be at least the height of the largest image in the slideshow */
	border: none;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
	text-decoration: none;
	border: none;
}
/*big image view*/
div.slideshow img {
	position: absolute;
	right: 90px;
	display: block;
	border: none;
	padding: 0;
	margin: 1em 0 0 0;
}

#portfolio #thumbs.navigation{
	display: block;
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	width: 50px;
	
}
.navigation{
	width: 50px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}
#portfolio ul.thumbs {
	clear: both;
	margin: 4em 0 0 5em;
	padding: 0 0 0 0;
	width: 75px;
}
#portfolio ul.thumbs li {
	float: none;
	padding: 0 0 0.6em 0;
	margin: 0;
	list-style: none;
}
#portfolio a.thumb {
	padding: 0;
	display: inline;
	border: none;
}
#portfolio ul.thumbs li.selected a.thumb img {
	border: 1px solid #db594b;
	box-shadow: 5px 5px 5px #db594b;
    -moz-box-shadow: 2px 2px 4px #db594b;
	-webkit-box-shadow: 2px 2px 4px #db594b;

}
#portfolio ul.thumbs li a.thumb:hover img{
	border: 1px solid #797979;
	box-shadow: 5px 5px 5px #797979;
    -moz-box-shadow: 2px 2px 4px #797979;
	-webkit-box-shadow: 2px 2px 4px #797979;
}

#portfolio a.thumb:focus {
	outline: none;
}
#portfolio ul.thumbs img {
	border: 1px solid #b4b4b4;
	box-shadow: 5px 5px 5px #b4b4b4;
    -moz-box-shadow: 2px 2px 4px #b4b4b4;
	-webkit-box-shadow: 2px 2px 4px #b4b4b4;
	display: block;
}

/* ======= testimonials page ==========*/

#testimonials #quotes{
	display: block;
	width: 800px;
	float: left;
	font-size: 1.2em;
	margin: 4em 0 0 1.2em;
}
#testimonials #quotes blockquote{
	padding: 0 0 0 0;
}
#testimonials #quotes blockquote cite{
	font-style: normal;
}
#testimonials #quotes .namequote{
	color: #2a2922;
}
#testimonials #quotes .company{
	color: #db594b;
}
#testimonials #quotes #quoteleft{
	width: 420px;
	float: left;
	height: 400px;
}
#testimonials #quotes  #quoteleft blockquote{
	padding: 0 0 1em 0;
}
#testimonials #quotes #quoteright{
	
}

/* =============== experience page ============ */

#experience #experi-content{
	display: block;
	width: 800px;
	float: left;
	margin: 1em 1em 1em 1.8em;
	padding: 3em;
}

#experience #experi-content .intro{
	font-size: 1.3em;
	margin: 0 0 2em 0;
}

#experience #experi-content ul{
	width: 147px;
	float: left;
}

#experience #experi-content ul.shows{
	width: 160px;
}
#experience #experi-content ul li.h3{
	color: #db594b;
	font-size: 1.5em;
	font-weight: normal;
	padding: 0.4em 0 1.4em 0;
}
#experience #experi-content ul li{
	font-size: 1.3em;
	padding: 0.8em 0 0 0;
}


/***** footer settings  ******/

#footer{
	display: block;
	width: 864px;
	margin: 0.5em auto 0 auto;
	font-size: 1.2em;
	color: #797979;


}
#footer ul{
	margin: 0 0 0 3em;
	text-align: left;
}
#footer ul li{
	display: inline;
	padding: 5px 10px 0 0;
}

#footer ul li.private{
	background: url(../images/graphics/footer.gif) top left no-repeat;
	padding: 0.4em 0 0 3em;
}
#footer ul li a{
	font-weight: bold;
	color: #D12C19;
}