@import url("reset.css");

/* Overlay styles */
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/
#overlay{
display: none;
background: url(../img/bg-grid-980.gif) repeat-y 0 0;
position: absolute;
top: 0;
left: 50%;
margin-left: -490px;
width: 980px;
height: 50em;
z-index: -1;
}
#overlay .horiz{
border-bottom: 1px dotted #aaa;
height: 23px;
}

/* Base styles */
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/
a:link,
a:visited{
color: #5a3232;
text-decoration: none;

}

a:hover,
a:focus,
a:active{
color: #981B1F;
background-color: #fff;
}

/*
----------------------------------------*/

@media screen{

body{
font-size: 2em;
line-height: 1.5;
font-family: 'American Typewriter', Georgia, sans-serif;
background: white url(../img/bg/bg_sufi.jpg) fixed no-repeat top left;
color: #321e1e;
}
html>body{
font-size: 16px;
}

/*
text =t
----------------------------------------*/

/* headings =h */
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/

h1 {
text-indent: -9000px;
font-size: 0px;
}

h1 span {
	background: url(../img/back_to_home.png) no-repeat;
	width: 1185px;
	height: 737px;
	position: absolute;
	top: 0px;
	left: -153px;
	display: none;
}
h1 a:hover span {
	display: block;}


h2{
font-size: 16px;
line-height: 1.5;
font-weight: 400;
margin-bottom: 10px;
}



header h2{
font-size: 24px;
line-height: 1.333;
letter-spacing: -0.011em;
text-align: left;
float: none;
padding: 72px 0 0 340px;
width: 620px;
margin-bottom: 9px;
}
section h2{
letter-spacing: 0.133em;
text-transform: uppercase;
text-align: right;
color: #be3c14;
float: left;
width: 300px;
}

h2, h3 {
font-weight: 400;
text-shadow: #CCCCCC 0 1px 1px;
}

/* structured text =s */
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/
p {
margin-bottom: 24px;
}

p a:link, p a:visited {
color: #5a3232;
border-bottom: 0px solid #6FB2D4;
padding: 0 2px 2px 0;
text-decoration: none;
background: url(../img/blackdot_bg.gif) bottom left repeat-x;
}

p a:hover, p a:focus, p a:active {
color: #981B1F;
background-color: #fff;
border-bottom: 2px solid #321e1e;
padding: 0 2px 1px 0;
background: #fff

}



p.decrease{
font-size: 0.9em;
margin-bottom: 24px;
}

#greeting p,
p#just-now{
color: #2b3c45;
}


/*
nav
----------------------------------------*/
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/
#navcontainer ul
{
font-family:Arial, Helvetica, sans-serif, verdana, sans-serif;
display: block;
list-style: none outside;
padding: 0;
margin: 0px 0 0 0px;
font-size: 15px;

}

ul#navlist
{
margin-left: 340px;
padding-left: 0;
white-space: nowrap; 
}

#navlist li
{
display: inline;
list-style-type: none; 
}

#navlist a { padding: 4px 10px; 
-moz-border-radius: 4px; -khtml-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;

}

#navlist a:link, #navlist a:visited
{
color: #321e1e;
background-image:url(../img/bg/bg_striped.png);
text-decoration: none;
}

#navlist li a:hover
{
color: #fff;
background-color: #3E4F4F;
background-image: url();
border-bottom: 0px solid #369;
text-decoration: none;
	-webkit-box-shadow: 0 0 4px rgba(14, 32, 59, .5);
	-moz-box-shadow: 0 0 4px rgba(14, 32, 59, .5);

}

#navlist a#active
{
color: #fff;
border-bottom: 0px solid #ccc;
background-color: #AD494C;
background-image: url();
	-webkit-box-shadow: 0 0 4px rgba(14, 32, 59, .55);
	-moz-box-shadow: 0 0 4px rgba(14, 32, 59, .55);

}



/*
grouping elements - layers / dividers =d
----------------------------------------*/
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/
#container{
width: 980px;
margin: auto;
}

#content{
padding: 0 0 0 20px;
width: 960px;
}

/* header */

header{
position: relative;
height: 216px;
}
header h1 img{
position: absolute;
left: 20px;
top: 0px;
}

#bg_1 { 
	position: fixed; 
	top: 0px; 
	right: 0px; 
	z-index: 2; 
}
#bg_2 { 
	position: absolute; 
	top: 0px; 
	left: 0px; 
	z-index: 0; 
}
#bg_3 { 
	position: absolute; 
	top: 1999px; 
	left: 0px; 
	z-index: 1; 
}
#bg_4 { 
	position: fixed; 
	bottom: 0px; 
	left: 0px; 
	z-index: 1; 
}

#bg_5 { 
	position: absolute; 
	top: 0px; 
	right: 0px; 
	z-index: 0; 
}




/* deck */
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/
#deck{
height: 288px;
position: relative;
margin-bottom: 48px;
}
#deck #quote{
float: left;
width: 300px;
margin-top: 48px;
z-index: 2;
}
#deck #quote p + p{
font-size: 14px;
line-height: 18px;
color: #321e1e;
}
#deck #main_img-wrap{
float: right;
width: 650px;
height: 288px;
border-left: 1px solid #999;
overflow: hidden;
}
#deck #main_img{
position: relative;
display: block;
vertical-align: text-bottom;
left: -240px;
z-index: 1;
}


#image-wrap{
float: right;
margin: 0 11px 14px 0px;
}
 #image{
position: relative;
}




/* border around images */
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/
.cover {
float: left; 
border: 1px solid #999; 
background-color: #fff; 
margin-bottom: 5px; 
margin-right: 10px; 
padding: 3px;
-moz-border-radius: 2px; -khtml-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
background: url(../img/blackdo_bg.gif) bottom left repeat-x;
	-webkit-box-shadow: 0 0 6px rgba(14, 32, 59, .5);
	-moz-box-shadow: 0 0 6px rgba(14, 32, 59, .5);


}




#foreword{
clear: both;
}

#foreword p{
float: right;
width: 620px;
margin: 0 20px 24px 10px;
}


/* album details */


.album-details {
clear: both;
}

.album-details h2{
float: right;
width: 300px;
text-align: left;
margin: 0 20px 24px 0;
}
.album-details figure{
float: left;
vertical-align: text-bottom;
margin: 0 0 0 309px;
}

.album-details h3{
margin-bottom: 24px;
}
.album-details h3,
.album-details ol{
float: right;
clear: right;
width: 300px;
margin-right: 20px;
}
.album-details ol{
margin-bottom: 24px;
}
.album-details ol li{
margin-bottom: 24px;
}
.album-details ol li h4{
display: inline;
font-weight: 600;
}
.album-details ol li p{
display: inline;
word-spacing: -0.034em;
}






/* main-content */

.main-content {
clear: both;
}
.main-content p,
.main-content form{
float: right;
}
.main-content p{
width: 620px;
margin: 0 20px 15px 0;
}






/*contact form*/
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/
.form {
	width:620px;
	margin: 25px 20px 100px 0px;
	background: url(../img/dot.png) repeat-x 0 0;
	font-size: 1em;
	font-family: 'American Typewriter', Georgia, serif;
	color: #2b3c45;
}
.form label {
	float: left;
	clear: left;
}
.form input {
	padding: 4px;
	font-family: 'American Typewriter', Georgia, serif;
	font-size: 2em;
	color: #2b3c45;
}
.form textarea {
	height: 141px;
	padding: 10px;
	font-family: 'American Typewriter', Georgia, serif;
	font-size: 1.5em;
	color: #2b3c45;
}
.form p {
	width: 100%;
	overflow: hidden;
	margin: 12px 0;
	padding: 1px 0;
}

#contactsend{
font-family: 'American Typewriter', Georgia, serif;
font-size: 16px;
width: 75px;
border: solid 1px #820F00;
background-color: #be3c14;
color: #fff;
margin: 15px 0 0px 20px;
padding: 8px 15px;
letter-spacing: 1px;
cursor: pointer;
-webkit-box-shadow: 0 0 4px rgba(14, 32, 59, .75); -moz-box-shadow: 0 0 4px rgba(14, 32, 59, .75)
}
#contactsend:focus,
#contactsend:hover{
background-color: #2b3c45;
border: solid 1px #2b3c45;
color: #fff;
}


.form p input {
	width: hidden;
}
.form p label {
	float: left;
	display: block;
	width: hidden;
	line-height: 26px;
}
.form-row {
	padding: 12px 0;
	background: url(../img/dot.png) repeat-x left bottom;
}


.form input.error {
	padding: 2px;
}
.form input.error, .form textarea.error {
	border: solid 1px #900;
	background-color: #fcc;
}
#error-message {
	display: block;
	clear: both;
	text-align: left;
	margin-top: 4em;
	padding: 12px 12px 12px 30px;
	border: solid 1px #900;
	background: #fcc url(../../i/fountain/ico-error.gif) no-repeat 8px 16px;
}


span{
	color: #AD494C;
}

/* -- Form Styling -- */
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/
.form label {
	width: 161px;
	
}
.form input {
	width: 604px;
}
.form textarea {
	width: 435px;
}





/* top of page */
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/
#top em { display: none; border: 0px}
#top ul { width: 100%; float: left; padding: 0px;  list-style-type: none; border: 0px}
#top li { float: left; padding: 0px; margin: 0px; display: inline;}
#top li a { DISPLAY: block; HEIGHT: 207px;  border: 0px}

#top li a.topofpage{ background: url(../img/topofpage.gif) no-repeat left top; WIDTH: 639px; border: 0px}
#top li a.topofpageActive { background: url(../img/topofpage.gif) no-repeat left bottom; WIDTH: 639px; border: 0px}

#top li a:hover { background-position: left bottom; border-top: 0px }

#top {
	width: 326px;
	height: 207px;
	margin: 0px 0 13px 0;
	clear: both;
	border: 0px solid #979797; 
}



/* footer */
/*/////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////*/
footer{
position: relative;
display: block;
clear: both;
border-top: 1px solid #999;
padding: 0px 0 72px;
background: transparent url(../img/bg-footer.png) 10% 90% no-repeat;
}
footer ul,
footer p{
margin-left: 340px;
width: 620px;
}
footer ul{
padding-top: 28px;
margin-bottom: 17px;
}
footer ul li{
font-size: 18px;
line-height: 1.333;
display: inline;
margin: 0 20px 0 0;
}
footer p{
font-size: 14px;
line-height: 1.286;
margin-bottom: 18px;
}
footer ul li img{
margin-right: 12px;
vertical-align: text-bottom;
}
footer p{
}

}/* END screen */