/*
   ======================================

   Written by: Steve Beeston
   Date:       January/February 2016
   Notes:      Pull quote formatting taken from HTML Dog - http://htmldog.com/techniques/pullquotes/
   Changes:    3/6/18 by Steve Beeston to add stuff for sticky navbar - https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

   ======================================
*/

@import url(grid.css);
@import url(menu.css);
@import url(buttons.css);

* {
   padding: 0;
   margin: 0;
}

body {
   background: #e8e8e8;
   font-family: 'Noto Serif', serif;
}



/*
   ======
   LAYOUT
   ======
*/


.outer-wrapper {
   position: relative;
   float: left;
   width: 100%;
   min-height: 100%;
   background: white;
}


#container {
   position: relative;
	margin: 0 auto;
   width: 100%;
   max-width: 980px;
   box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
   -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.1);
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
   background: #fff;
}

.inner-wrapper {
   position: relative;
	margin: 0 auto;
   width: 100%;
   max-width: 980px;
}

header, footer, #footer {
	width: 100%;
   background-color: #822;
}

header {
   /*  box-shadow: 0px 0px 6px 0px silver;
   border-bottom: 1px solid #ddd;
   border-bottom: 1px solid #f1b7b7; */
}

footer {
   background-color: #f8f8f8;
   border-radius: 0 0 7px 7px;
   margin-bottom: 50px;
}

footer ul {
    list-style-type: none;
    margin-left: 0;
}

#navbar {
   background-color: #822;
   /* overflow: hidden; */
}

.panel {
   float: left;
   background: #f8f8f8;
   width: 100%;
   padding: 10px
}

.panel h2 {
   font-family: 'Noto Serif', arial, sans-serif;
   color: #00579A;
   font-size: 24px;
}

.panel h3 {
   font-family: 'Noto Serif', arial, sans-serif;
   color: black;
   font-size: 16px;
   padding: 0;
}

.panel img {
   margin-top: 10px;
   width: 100%;
}

.text-center {
   text-align: center;
}

.text-right {
   text-align: right;
}

.text-left {
   text-align: left;
}

.no-padding {
   padding: 0;
}

.content {
   padding: 0px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

#sidebar {
   background-color: #e8e8e8;
}

.links li {
   width: 20%;
}

.subheading-film {
   color: #822;
   font-weight: bold;
}

/* -----------
   Pull Quotes
   -----------
*/

.pquote {
   float: right;
   max-width: 300px;
   background: url(../img/openquote.gif) top left no-repeat;
   color: #666;
   font-style: italic;
   padding: 13px;
   margin-left: 15px;
}

blockquote p {
   line-height: 32px;
   font-size: 24px;
   margin: 0;
}

.pquote p:first-letter {
   font-size: 60px;
   font-weight: bold;
}


/*
   ==========
   TYPOGRAPHY
   ==========
*/


h1, h2, p, a, li, td, label {
   color: #444; 
}

h1, h2, h3, h4 {
   font-family: 'Noto Serif', serif;
   color: #822;
}

h1 {
   font-size: 30px; 
   font-weight: normal; 
   padding: 8px 0;
}

h2 {
   font-size: 24px; 
   font-weight: normal; 
   padding: 8px 0;
}

h3 {
   font-size: 22px; 
   font-weight: normal;
   padding: 8px 0;
}

#acting-reviews h3,
#acting-testimonials h3,
#presenting-testimonials h3 {
   font-size: 18px;
   border-top: 1px solid #822;
    border-bottom: 1px solid #822;
    margin: 20px 0 10px 0;
}

h4 {
   font-size: 18px; 
   font-weight: bold;
   padding: 8px 0;
}

h4.cv-name {
   text-align: center;
}

p, a, li, td, label {
   font-family: 'Noto Serif', serif;
   font-size: 17px; 
   line-height: 26px;
   padding: 10px 0;
}


a { 
   text-decoration: none;
   border-bottom: 1px dotted;
   padding-bottom: 0;
}

h1 a {
   border: none;
}

#footer,
#footer p,
#footer a,
#copyright-notice {
   font-size: 16px;
   color: #eee;
}



img.profile-photo {
   float: right;
   margin-left: 20px;
   border-bottom: 0;
}


/*
   ================================
   TABLES 
   ================================
*/

table { 
   width: 100%; 
   border-collapse: collapse; 
}

td, th { 
   padding: 6px; 
   border: 1px solid #ccc; 
   text-align: left; 
}

.cv td,
.cv th {
   font-size: 16px;
   vertical-align: top
}

td.cv-year,
td.cv-presenting-year,
td.cv-voice-year {
   width: 80px;
}

tr:nth-child(even) {background: #EEE}
tr:nth-child(odd) {background: #FFF}


/*
   ================================
   GALLERY
   ================================
*/

div.thumbnail {
   width: 150px;
   float: left;
   clear: right;
   margin: 15px;
   display: inline;
   background: #fff;
}

.thumbnail .img {
   display: inline;
   margin: 0px;
   background: #fff;
}

.thumbnail a {
   border: 0px !important;
}

.thumbnail a img {border: 0px;}

#gallery h2,
#gallery h4,
#links h2 {
   text-align: center;
}

#gallery a {
   border-bottom-width: 0px;
}

/*
   -----------------------------------
   Experimental FLEX stuff for gallery
   -----------------------------------
*/

.parent {
   display: flex;
   height: 300px;
}

.child {
   width: 100px;
   height: 100px;
   margin: auto;
}

.flex-container {
   padding: 0;
   margin: 0;
   list-style: none;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-flex-flow: row wrap;
   justify-content: space-around;
/*
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   flex-flow: row wrap;
   justify-content: space-around; */
}

.flex-item {
   background: tomato;
   background: white;
   padding: 5px;
   width: 160px;
   height: 100%;
   margin-top: 10px;
   /* line-height: 150px; */
   color: white;
}

ul.modelling li img {
   height: 105px;
}

ul.modelling li img.portrait {
   height: 225px;
}

/* 
   ================================
   MESSAGES 
   ================================
*/

.success, 
.failure {
   font: bold 13px arial;
   display: inline; 
   padding: 3px; 
   border-radius: 4px; 
   border-width: 2px; 
   border-style: solid; 
   margin: 3px;
}

.success {
   color: green; 
   border-color: green;
}

.failure {
   color: red; 
   border-color: red;
}







/*
   =======================================
   S M A L L   S I Z E D   S C R E E N S
   =======================================
*/

@media only screen and (max-width: 800px) {

   .pquote blockquote p {
      font-size: 20px;
   }

   .pquote {
      max-width: 100%;
   }

}


@media only screen and (max-width: 639px) {

   header .text-right,
   footer .text-right,
   #footer .text-right,
   footer .text-left {
      text-align: center;
   }

   footer .columns {
      padding-top: 0;
      padding-bottom: 0;
   }

   .featurebox {
      float: none;
      margin: 15px auto;
   }

   li {
      list-style-type: none;
   }

   img.profile-photo {
      float: none;
      margin: 10px auto;
   }

   .links li {
      width: 100%;
   }

}




/*
   ===========================================================
   T A B L E   R E L A T E D   R E S P O N S I V E   S T U F F
   ===========================================================

   Source: https://css-tricks.com/responsive-data-tables/

   Max width before this PARTICULAR table gets nasty
   This query will take effect for any screen smaller than 760px
   and also iPads specifically.

*/

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	th { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 30%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "Year"; }
	td:nth-of-type(2):before { content: "Role"; }
	td:nth-of-type(3):before { content: "Production"; }
	td:nth-of-type(4):before { content: "Director"; }
	td:nth-of-type(5):before { content: "Company"; }
	td:nth-of-type(6):before { content: "Venue"; }
}