body {
	background-color: #fcfaf8;
}

/* Styling for logo */
div#logo {
	background-color: #efece0;
	}
div#logo img{		
		padding: 30px 0 0 25px;
		display: inline-block;
	}
#titlecard { 
	background: url(assets/home.jpg) 50% 0 no-repeat fixed; 
	height: 650px;
	margin: 0 auto; 
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    box-shadow: 0 0 0px rgba(0,0,0,0.8);
	overflow:hidden;
}
@media only screen and (max-width : 480px) {
	#titlecard {overflow:scroll;}}
@media only screen and (max-width : 320px) {
	#titlecard {overflow:scroll;}}
	
div#titlecard h2 {
	padding: 1.4em 2em 0 2.8em;
	color:#746c65;
	display: block;
	text-align: center;
	font-size: 1.4em;
	font-family: 'Bitter', serif;
	/*text-shadow: 0px 4px 3px #b3aba1;*/
	font-weight: normal;
	position: relative;
	max-width: 600px;
	line-height: 1.4em;
	word-spacing: normal;
	}
div#titlecard p {
	padding: 1.4em 2em 0 2.8em;
	display: block;
	text-align: center;
	font-size: 12pt;
	font-family: 'Bitter', serif;
	font-weight: normal;
	position: relative;
	max-width: 600px;
	line-height: 1.4em;
	word-spacing: normal;
	}
p a {
	color:#3e5aae;
	}
p a:hover, nav a:active {
	text-decoration:underline;
}
p a:visited {
	color:#746c65;
}
#artists { 
	box-shadow: 0px -4px 4px #c1bdc5; 
	height: 800px;
	background-color: #f8f4eb;
}

#contentpage { 
	background: url(assets/home.jpg) 50% 0 repeat-x fixed; 
	margin: -30px 0 auto; 
	height: auto;
    width: 100%; 
    max-width: 1920px; 
    position: relative; 
    box-shadow: 0 0 0px rgba(0,0,0,0.8);
	/*overflow:hidden;*/
}

div#contentpage p {
	padding: 1.4em 2em 0 2.8em;
	display: block;
	text-align: center;
	font-size: 12pt;
	font-family: 'Bitter', serif;
	font-weight: normal;
	position: relative;
	max-width: 600px;
	line-height: 1.4em;
	word-spacing: normal;
	}
div#contentpage h2 {
	padding: 1.4em 2em 0 2.8em;
	color:#746c65;
	display: block;
	text-align: center;
	font-size: 1.4em;
	font-family: 'Bitter', serif;
	/*text-shadow: 0px 4px 3px #b3aba1;*/
	font-weight: normal;
	position: relative;
	max-width: 600px;
	line-height: 1.4em;
	word-spacing: normal;
	}


/* Start of styling controlling responsive navigation */
/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

/* Basic navigation styling */

nav {
	height: 50px;
	width: 100%;
	font-size: 12pt;
	font-family: 'Bitter', serif;
	font-weight: normal;
	position: relative;
	border-bottom: 0px;
	background-color: #efece0; 
}
nav ul {
	padding: 0;
	width: 700px;
	height: 50px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	
}
nav li {
	display: inline;
	float: left;
}
nav a {
	color: #887f77;
	display: inline-block;
	width: 130px;
	text-align: center;
	text-decoration: none;
	line-height: 50px;
	text-shadow: 0px;
}
nav li a {
	border-right: 0;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
}
nav li:last-child a {
	border-right: 0;
}
nav a:hover, nav a:active {
	background-color: #f4f1ee;
}
nav a#pull {
	display: none;
}


/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
	nav { 
  		height: auto;
  	}
  	nav ul {
  		width: 100%;
  		display: block;
  		height: auto;
  	}
  	nav li {
  		width: 50%;
  		float: left;
  		position: relative;
  	}
 
  	nav a {
	  	text-align: left;
	  	width: 100%;
	  	text-indent: 25px;
  	}
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
	nav {
		border-bottom: 0;
	}
	nav ul {
		display: none;
		height: auto;
	}
	nav a#pull {
		display: block;
		background-color: #efece0;
		width: 100%;
		position: relative;
	}
	nav a#pull:after {
		content:"";
		background: url('nav-icon.png') no-repeat;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 20px;
	}
}

/*Smartphone*/
@media only screen and (max-width : 320px) {
	nav li {
		display: block;
		float: none;
		width: 100%;
	}
	
}
/* End of styling controlling responsive navigation */

/* Styling for the title page*/

h1.title {
    margin-top: 0px;
    position: relative;
    overflow:hidden; 
    padding: 0; /* needed to counter the reset/default styles */
}

h1.title a {
    position: absolute;
    height: 0; 
    width: 100%;
    background-position: left top;
    background-repeat: no-repeat;
}

h1#title {
    height: 184px;
}

h1#title a {
    padding-top: 184px;
    background-image: url("assets/h1lobster.jpg");
	background-position:center;
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
h1#title a {
    padding-top: 184px;
    background-image: url("assets/h1lobster-480.jpg");
	background-position:center;
}	
}
/*Smartphone*/
@media only screen and (max-width : 320px) {	
h1#title a {
    padding-top: 184px;
    background-image: url("assets/h1lobster-320.jpg");
	background-position:center;
}	
}
/*header 2*/
h2.artists {
    margin-top: 0px;
    position: relative;
    overflow:hidden; 
    padding: 0; /* needed to counter the reset/default styles */
}

h2.artists a {
    position: absolute;
    height: 0; 
    width: 100%;
    background-position: left top;
    background-repeat: no-repeat;
}

h2#artists {
    height: 95px;
}

h2#artists a {
    padding-top: 95px;
    background-image: url("assets/h2lobster.jpg");
	background-position:left;
}

/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
h2#artists a {
    padding-top: 95px;
    background-image: url("assets/h2lobster.jpg");
	background-position:left;
}	
}
/*Smartphone*/
@media only screen and (max-width : 320px) {	
h1#artists a {
    padding-top: 83px;
    background-image: url("assets/h2lobster-320.jpg");
	background-position:left;
}	
}


/* Artist list block*/
div#artist-list {
	width: 100%;
	font-size: 12pt;
	font-family: 'Bitter', serif;
	font-weight: normal;
	position: relative;
}
div#artist-list ul {
	padding: 30px 0 0 0;
	/*width: 700px;*/
	height: 50px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
div#artist-list li {
	display: inline;
	float: left;
	padding: 8px 8px 16px 8px;
}
div#artist-list a {
	color: #000;
	display: inline-block;
	width: 130px;
	text-align: center;
	text-decoration: none;
	padding: 6px;
	text-shadow: 0px;
}
div#artist-list li a {
	border-right: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

div#artist-list a:hover, nav a:active {
	text-decoration: none;
  	background: url(assets/link-line.gif) repeat-x 0 100%;
  }
  /* Artist list block*/
div#aboutnav {
	width: 100%;
	font-size: 12pt;
	font-family: 'Bitter', serif;
	font-weight: normal;
	position: relative;
}
div#aboutnav ul {
	padding: 30px 0 0 12%;
	/*width: 700px;*/
	height: 50px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
div#aboutnav li {
	display: inline;
	float: left;
}
div#aboutnav a {
	color: #000;
	display: inline-block;
	width: 130px;
	text-align: center;
	text-decoration: none;
	padding: 6px;
	text-shadow: 0px;
}
div#aboutnav li a {
	border-right: 0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

div#aboutnav a:hover, nav a:active {
	text-decoration: none;
  	background: url(assets/link-line.gif) repeat-x 0 100%;
  }
  
div#bookmark {
	height:600px;
    position:relative;
}

@media only screen and (max-width : 320px) {	
div#bookmark {
	height:auto;
    position:relative;
	overflow:scroll;
	overflow-style:marquee-line;
}}

h1#bookmark {
	color:#746c65;	
	font-family: 'lobster', cursive, serif;
	text-shadow: 0px 4px 3px #b3aba1;
    z-index:100;
    position:absolute;    
    font-size:2.8em;
    font-weight:bold;
	left:30px;
    top:0px;
	}
img.bookmark {
	position:absolute;
    left:0;
    top:0;
}
#commentary { 
	box-shadow: 0px -4px 4px #c1bdc5; 
	background-color: #f8f4eb;
	min-height: 600px;
}

div#commentary h2{
	color:#746c65;	
	font-family: 'lobster', cursive, serif;
	text-shadow: 0px 4px 3px #b3aba1; 
	text-align: left;
    font-size: 1.8em;
	padding: 1.4em 2em 0 2em;
	display: block;
	position: relative;
	max-width: 600px;
	word-spacing: normal;
	}
div#commentary h3{
	color:#746c65;	
	font-family: 'lobster', cursive, serif;
	text-shadow: 0px 4px 3px #b3aba1;
	text-align: left;
    font-size:1.4em;
	padding: 0em 2em 0 2.8em;
	display: block;
	position: relative;
	max-width: 600px;
	word-spacing: normal;
	}
div#commentary p {
	padding: 1.4em 2em 0 2.8em;
	display: block;
	text-align: left;
	font-size: 12pt;
	font-family: 'Bitter', serif;
	font-weight: normal;
	position: relative;
	line-height: 1.2em;
	word-spacing: normal;
	}
h1#about {
	color:#746c65;	
	font-family: 'lobster', cursive, serif;
	text-shadow: 0px 4px 3px #b3aba1;
    /*z-index:100;*/
    /*position:absolute;  */  
    font-size:2.8em;
    font-weight:bold;
	padding: 35px 0 0 10%;
	}