/****************************** BASIC ******************************/
body {
	font-size: 1.0em;
	font-family: "Lucida Grande", Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
  margin: 20px;
}
h1, h2, h3, p, ul {
	padding: 0;
	margin: 0;
}
#wrapper {
	width: 100%;
  background-color: #000;
	margin: 0;
}
@viewport {
  width: device-width ;
  zoom: 1.0 ;
}
/****************************** BANNER ******************************/

#banner {
  background-image: url(images/Bob_800x500.png);
  background-repeat: no-repeat;
  background-position: 0% 25%;
  background-size: 500px;
  position: relative;
  height: 143px;
  font-size: 0.7em;
}
@media screen and (min-width:960px) {
  #banner #subtitle1 {
    color: #FFF;
    font: bold 4.0em Georgia, "Times New Roman", Times, serif;
    position: absolute;
    top: 25%;
    left: 40%;
  }
  #banner #subtitle2 {
    color: #DDD;
    font: bold 3.1em Georgia, "Times New Roman", Times, serif;
    position: absolute;
    top: 31%;
    right: 5%;
  }
}
@media screen and (max-width:960px) {
  #banner #subtitle1 {
    color: #FFF;
    font: bold 2.5em Georgia, "Times New Roman", Times, serif;
    position: absolute;
    top: 25%;
    left: 40%;
  }
  #banner #subtitle2 {
    color: #DDD;
    font: bold 2.0em Georgia, "Times New Roman", Times, serif;
    position: absolute;
    top: 28%;
    right: 5%;
  }
}
@media screen and (max-width:640px) {
  #banner #subtitle1 {
    color: #FFF;
    font: bold 2.0em Georgia, "Times New Roman", Times, serif;
    position: absolute;
    top: 25%;
    left: 60%;
  }
  #banner #subtitle2 {
    color: #DDD;
    font: bold 1.5em Georgia, "Times New Roman", Times, serif;
    position: absolute;
    top: 70%;
    left: 60%;
  }
}
* html #banner {
	height: 1px;
}
#banner ul {
	position: absolute;
	right: 100px;
	bottom: 5px;
	margin: 0px;
	padding: 0px;
	list-style: none;
}
#banner li {
	display: inline;
	margin-left: 10px;
}
#banner li a {
	color: #88F;
	text-decoration: none;
  font-variant: small-caps;
}
.separator {
	border-right: 4px solid #88F;
	padding-right:10px;
}


/****************************** NAV BAR ******************************/
@media screen and (min-width:640px) {
  #mainNav ul {
  	margin: 0;
  	padding: 0px 0 0 0;
  	list-style: none;
  	background: url(images/bg_nav_45.png) repeat-x left top;
  	float: left;
  	/*border: 1px solid #000;*/
  	width: 100%;
    height: 45px;
  }
  #mainNav li {
  	float: left;
  	padding: 0;
  	margin: 0;
    width: 160px;
    text-align: center;
  }
  #mainNav li a, #mainNav li a:link {
    color: #FFFFFF;
    text-decoration: none;
    padding: 15px .5em 0 1em;
    border-right: 1px solid #000;
    display: block;
    font: bold 0.8em sans-serif;
  }
}

@media screen and (max-width:640px) {
  #mainNav {
    width:100%;
    height: 150px;
  }
  #mainNav ul {
    margin: 0;
    padding: 0px 0 0 0;
    list-style: none;
    background: url(images/bg_nav_45.png) repeat-x left top;
    width: 100%;
  }
  #mainNav li {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 35px;
    text-align: center;
  }
  #mainNav li a, #mainNav li a:link {
    color: #FFFFFF;
    text-decoration: none;
    padding: 15px .5em 0 1em;
    display: block;
    font: bold 0.8em sans-serif;
  }
}




#mainNav li a:hover {
	background: url(images/bg_nav_h_45.png) repeat-x left top;
  height: 30px;
}

#home #homeLink, 
#commercial #commercialLink,
#personal #personalLink,
#portraits #portraitsLink,
#collected #collectedLink {
	background: url(images/bg_nav_h_45.png) repeat-x left top;
  height: 30px;
}

* html #mainNav a { width: 1px; }

/****************************** MAIN CONTENT WRAPPER ******************************/
#contentTable {
  table-layout: fixed;
  width: 100%;
  height: 600px;
  border-collapse: collapse;
  background-color: #FFFFFF;
  margin-bottom: 25px;
}

/****************************** MAIN CONTENT ******************************/
.centred {
  text-align: center;
}
.italic {
  font-style:  italic;
}

@media screen and (min-width:960px) {
  #mainContent {
    width:75%;
    vertical-align:top;
    padding-left:20px;
    background-color:#1f1f31ff;
    color: #fff;
    font-family: 'EB Garamond', serif;
  }
  #mainContentDiv {
    /*height:600px;
    overflow-y:scroll;*/
  }
  #mainContent .spaceabove {
    margin-top: 10px;
  }
  #mainContent h1 {
    font-family: 'EB Garamond', serif;
    font-size: 2.0em; 
    line-height: 1.4em;
    font-weight: bold;
    padding-top: 5px;
    /*text-align: left;*/
  }
  #mainContent ul {
    list-style-position: inside;
    list-style-type: circle;
    margin-bottom: 10px;
  }
  #mainContent li {
    margin-top: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 1.2em; 
    line-height: 1.0em;
    font-weight: normal;
  }
  #mainContent .spaceabove {
    font-family: 'EB Garamond', serif;
    font-size: 1.3em; 
    line-height: 1.2em;
    font-weight: bold;
    margin-top: 10px;
    padding-top: 10px;
  }
  #mainContent a {
    color: #CCF;
  }
}

@media screen and (max-width:960px) {
  #mainContent {
    width:75%;
    vertical-align:top;
    /*padding-left:20px;*/
    background-color:#1f1f31ff;
    color: #fff;
  }
  #mainContentDiv {
    /*height:100%;
    overflow-y:scroll;*/
  }
  #mainContent h1 {
    font-family: 'EB Garamond', serif;
    font-size: 1.5em; 
    line-height: 1.4em;
    font-weight: bold;
    padding-top: 5px;
    /*text-align: left;*/
  }
  #mainContent ul {
    list-style-position: inside;
    list-style-type: circle;
    margin-bottom: 10px;
  }
  #mainContent li {
    margin-top: 8px;
    font-family: 'Cairo', sans-serif;
    font-size: 1.2em; 
    line-height: 1.0em;
    font-weight: normal;
  }
  #mainContent .spaceabove {
    font-family: 'EB Garamond', serif;
    font-size: 1.0em; 
    line-height: 1.0em;
    font-weight: bold;
    margin: 10px 10px 10px 10px;
    padding: 10px 10px 10px 10px;
  }
  #mainContent a {
    color: #CCF;
  }
}
@media screen and (max-width:640px) {
  #mainContent h1 {
    font-family: 'EB Garamond', serif;
    font-size: 1.0em; 
    line-height: 1.1em;
    font-weight: bold;
    padding-top: 5px;
    /*text-align: left;*/
  }
}

@media screen and (min-width:960px) {
  .sng_photo {
    /*float: right;*/
    position:absolute;
    right: 0px;
    top: 0px;
    padding: 10px 10px;
    width: 300px;
  }
  .sng_photo_large {
    /*position:absolute;
    right: 0px;
    top: 0px;*/
    padding: 10px 10px;
    width: 50%;
  }
  /*.sng_photo_large {
    position:relative;
    right: 0px;
    top: 0px;
    padding: 10px 10px;
    width:90%;
  }
  */
  .photo_90 {
    padding: 10px 10px;
    width: 60%;
  }
  .photo_60 {
    padding: 10px 10px;
    width: 60%;
  }
  .photo_50 {
    padding: 10px 10px;
    width: 30%;
  }
  .spaced_div_portrait {
    position: relative;
    padding-top:20px;
    padding-bottom:20px;
    height: 400px;
  }
  .spaced_div_landscape {
    position: relative;
    padding-top:20px;
    padding-bottom:20px;
    /*height: 405px;*/
    text-align: center;
  }
  .centred_div {
    position: relative;
    padding-top:30px;
    padding-bottom:10px;
    text-align: center;
  }

  .sng_photo_comment {
    width: calc(100% - 485px);
    text-align: justify;
  }
  .sng_photo_comment_large {
    width: calc(100% - 485px);
    text-align: justify;
  }
  .photo_comment {
    /*width: calc(100% - 485px);*/
    text-align: center;
    padding-bottom:10px;
  }
}

@media screen and (max-width:960px) {
  .sng_photo {
    position:relative;
    right: 0px;
    top: 0px;
    padding: 10px 10px;
    width:90%;
  }
  .sng_photo_large {
    position:relative;
    right: 0px;
    top: 0px;
    padding: 10px 10px;
    width:90%;
  }
  .photo_90 {
    padding: 10px 10px;
    width: 90%;
  }
  .photo_60 {
    padding: 10px 10px;
    width: 60%;
  }
  .photo_50 {
    padding: 10px 10px;
    width: 50%;
  }
  .spaced_div_portrait {
    position: relative;
    padding-top:20px;
    padding-bottom:20px;
  }
  .spaced_div_landscape {
    position: relative;
    padding-top:20px;
    padding-bottom:20px;
  }
  .centred_div {
    position: relative;
    padding-top:30px;
    padding-bottom:10px;
    text-align: center;
  }
  .sng_photo_comment {
    text-align: justify;
  }
  .sng_photo_comment_large {
    text-align: justify;
  }
  .photo_comment {
    /*width: calc(100% - 485px);*/
    text-align: center;
    padding-bottom:10px;
  }
}

/****************************** COPYRIGHT INFO ******************************/

@media screen and (min-width:960px) {
  #copyright {
    clear: both;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 30px;
  }

  #copyright .copyrightMessage {
    position: absolute;
    left: 5px;
    padding: 8px 0 8px 0;
    font: bold 0.8em sans-serif;
    color: #CCC;
  } 
  #copyright .postproductionBy {
    position: absolute;
    left: 25%;
    padding: 8px 0 8px 0;
    font: bold 0.8em sans-serif;
    color: #CCC;
  }
  #copyright .websiteBy {
    position: absolute;
    left: 55%;
    padding: 8px 0 8px 0;
    font: bold 0.8em sans-serif;
    color: #CCC;
  }
  #copyright .lastUpdate {
    position: absolute;
    left: 75%;
    padding: 8px 0 8px 0;
    font: bold 0.8em sans-serif;
    color: #CCC;
  }
}
@media screen and (max-width:960px) {
  #copyright {
    clear: both;
    position: relative;
    display: inline-block;
    width: 100%;
    height: 90px;
  }

  #copyright .copyrightMessage {
    position: absolute;
    left: 5px;
    padding: 8px 0 8px 0;
    font: bold 0.8em sans-serif;
    color: #CCC;
  }
  #copyright .postproductionBy {
    position: absolute;
    left: 5px;
    top: 20px;
    padding: 8px 0 8px 0;
    font: bold 0.8em sans-serif;
    color: #CCC;
  }
  #copyright .websiteBy {
    position: absolute;
    left: 5px;
    top: 40px;
    padding: 8px 0 8px 0;
    font: bold 0.8em sans-serif;
    color: #CCC;
  }
  #copyright .lastUpdate {
    position: absolute;
    left: 5px;
    top: 60px;
    padding: 8px 0 8px 0;
    font: bold 0.8em sans-serif;
    color: #CCC;
  }
}


#copyright .lastUpdate:after {
  content: "FEBRUARY 2023";
}

img.contrast {
  filter: brightness(80%) contrast(150%);
}