/* george-walbye.css */

/* general styles */
html, body { background: #D8CDAF; color: #333333; margin: 0px; padding: 0px; font-family: Arial, Helvetica, sans-serif; }
a {	text-decoration: none;	color: #6B432F; }
a:hover { text-decoration: none;	color: #08e5d8; }

/* header styles */

#header1l { width: 3%; background-image: url(images/common/header-left.jpg); }
#header1c { width: 600px; height: 200px; }
#header1r { width: 80%; background-image:url(images/common/header-right.jpg); text-align: center; font-style: italic; padding-bottom: 30px; }
#header1cbox { position: relative; }
#header1cbottom { position: relative; z-index: 10; }
/* #header1ctop { position: absolute; left: 200px; bottom: 18px; z-index: 20;  } */
#header1ctop { position: absolute; left: 200px; bottom: 0px; z-index: 20; line-height: 24px; }

#header2 { position: relative; background-color: #FEF1CF; }
#header2bgndbtn { position: relative; left: 0px; top: 0px; }
#header2bgnd { position: relative; z-index: 0; left: 0px; top: 0px; }
#header2btnbox { position: absolute; z-index: 10; right: 5%; top: 30%; }
#header2menu { display: none; }
#header2menu { width: 200px; position: relative; left: 10%; padding-bottom: 10px; }

/* content styles */
#content { min-height: 200px; background: linear-gradient( #FEF1CF, #D8CDAF ); margin: 0px; padding: 0px; border-top: 1px solid #FEF1CF;  }
.boxwidth { width: 1400px; margin-left: auto; margin-right: auto; }
.col1 { width: 96%; margin-left: 2%; margin-right: 2%; vertical-align: top; clear: both; }
.col2 {	width: 46%;	margin-left: 2%;	margin-right: 2%;	float: left;	vertical-align: top; }
.clear { clear: both; }
.title { font-size: 20px; font-weight: bold; font-style: italic; }
.indent10 { text-indent: 10px; }
.pic { width: 100%; border: 2px solid #FFFFFF; }
.biopic { width: 300px; height: 400px; border: 2px solid #FFFFFF; }		
.caption { font-size: 12px;	font-weight: bold; font-style: italic;	text-align: center;	line-height: 16px; }
div.sculpture {	margin: 5px;	text-align: center;	float: left; }
div.details { width: 644px; margin-left: auto; margin-right: auto; }
.letter { border: #FFFFFF solid 1px; background-color: #FFF2CF; }
.big { font-weight: bold; font-size: 30px; }
.bio-left { width: 340px; float: left; margin-right: 10px; margin-bottom: 10px; }
.bio-right { width: 340px; float: right; margin-left: 10px; margin-bottom: 10px; }

/* footer styles */
#footercontact { text-align: center; padding: 10px; }
#fcww { font-size: 10px; text-align: right; padding-top: 10px; padding-bottom: 10px; padding-right: 20px; }

/* responsive section */

/* screen width > 1400px */
#header1 { display: block; }
#header2 { display: none; }
#header2btn { width: 30px; }
#footercontact { display: none; }
#header1nosplit { display: inline; }
#header1split { display: none; }
.letterinfonosplit { display: inline; }
.letterinfosplit { display: none; }

/* screen width <= 1400px */
@media only screen and (max-width : 1400px) 
{
.boxwidth { width: 100%; }
}

/* screen width <= 1340px */
@media only screen and (max-width : 1340px) 
{
#header1nosplit { display: none; }
#header1split { display: inline; }
}

/* screen width <= 1150px */
@media only screen and (max-width : 1150px) 
{
.bio-left { float: none; margin-left: auto; margin-right: auto; margin-bottom: 10px; }
.bio-right { float: none; margin-left: auto; margin-right: auto; margin-bottom: 10px;  }
}

/* screen width <= 860px */
@media only screen and (max-width : 860px) 
{
#header1 { display: none; }
#header2 { display: block; }
#footercontact { display: block; }
.big { font-size: 20px; }
}

/* screen width <= 700px */
@media only screen and (max-width : 700px) 
{
.bio-left { width: 100%; }
.bio-right { width: 100%; }
}

/* screen width <= 644px */
@media only screen and (max-width : 644px) 
{
div.details { width: 100%; margin-left: 0px; margin-right: 0px; }
}

/* screen width <= 560px */
@media only screen and (max-width : 560px) 
{
.letterinfonosplit { display: none; }
.letterinfosplit { display: inline; }
}

/* screen width <= 500px */
@media only screen and (max-width : 500px) 
{
#header2btn { width: 20px; }
.col2 { width: 96%;	margin-left: 2%;	margin-right: 2%;	clear: both; }
}