/*---------------------------------------------------------*/
/*                Formatting for whole body                */
/*---------------------------------------------------------*/
body{
    line-height: 1;
    margin:0;
	padding:0;
	color: #000000; /*Black*/
    background: url('../imgs/background.jpg');
    font-family: 'Alegreya Sans', sans-serif;
    background-repeat: no-repeat;
	background-size:cover;
	background-attachment:fixed;
    font-size: 14px;
}


h1 {
    text-transform: uppercase;
}

h2 {
	font-size: 200%;
	text-transform: uppercase;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
    font-family: 'Special Elite', cursive;
}

#pageHead {
    text-transform: uppercase;
    font-size: 400%;
}
h3 {
	font-size: 120%;
	text-align: center;
	margin-bottom: 20px;
}

p {
	font-size: 120%;
	line-height: 20px;
    margin-bottom: 20px;
}
.small {
	font-size: 100%;
	line-height: 20px;
    margin-bottom: 0px;
}

strong{
    font-weight: bold;
}

/*---------------------------------------------------------*/
/*                Formatting for main body                 */
/*---------------------------------------------------------*/
.wrap{
    width: 90%;
    margin: 5px auto;
    background-color: rgba(0, 0, 0, 0.4);/*transparent black*/
    color: #f4f0e9;
    position:relative;
}

.clearfix {
    clear: both;
}
.maincontent{
    clear: both;
    margin-bottom: 20px;
    padding-top: 10px;
}
/*---------------------------------------------------------*/
/*                 Formatting for Header                   */
/*---------------------------------------------------------*/
header{
   /* display: block;*/
    float: left;
    width: 100%;
/*    margin-bottom: 20px;*/
}

header img{
    float:left;
	margin-left: 2%;
	width: 10%;
}
/*-------------------------------------------------------------------------*/
/*                      Formatting for nav bar                             */
/*                  Some help for this code gotten from                    */
/* http://www.webdesignerdepot.com/2012/08/create-a-stunning-menu-in-css3/ */
/*-------------------------------------------------------------------------*/
header nav{
    background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
    background-image: linear-gradient(#fff, #ccc);
    border-radius: 6px;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.4);
    padding: 0 0px;
    float: left;
    width:100%;
    font-weight: 600;
    position: relative;
}

header nav ul{
/*    velda added*/
	clear:left;
	float:left;
	position:relative;
	text-align:center;
	margin:0;
    width:100%;
    height:100%;
    padding:0;
/*    velda added*/
    list-style: none;
}

header nav ul li{
    position: relative;
    float: left;
    display: block;
    width:11.11%; /*make all menu items the same size*/
}

header nav ul li a{
    color: #444;
    display: block;
    font-size: 14px;
    line-height: 20px;
    padding: 6px 12px;
    margin: 8px 8px;
    vertical-align: middle;
    text-decoration: none; 
}

header nav ul  a:hover{
    background: -webkit-gradient(linear, center top, center bottom, from(#ededec), to(#fff));
    background-image: linear-gradient(#ededed, #fff);
    border-radius: 12px;
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
    color: #222;    
}



/*set the hover state*/
header nav ul li:hover a{
    background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
    background-image: linear-gradient(#ccc, #ededed);
    border-radius: 12px;
    box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
    color: #222;
}


header h1{
    display: block;
    font-size: 300%;
    font-family: 'Special Elite', cursive;
    text-align: center;
}
/* styles for the "you are here" visual indicator*/
/*To do this, place an unique ID in BODY tag of each page, and place an unique ID in each link, then use contextual styping and grouping*/
#home a#homelink,
#shorts a#shortlink, 
#features a#featureslink,
#music a#musiclink,
#adverts a#advertslink,
#corporate a#corporatelink,
#updates a#updateslink,
#misc.html a#misclink,
#contact a#contactlink /*etc for each page*/
	{ 
	background: -webkit-gradient(linear, center top, center bottom, from(#ccc), to(#ededed));
    background-image: linear-gradient(#ccc, #ededed);
    border-radius: 12px;
    box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
    color: #222;}

/*---------------------------------------------------------*/
/*                 Formatting for show reel video          */
/*---------------------------------------------------------*/

.showreel{
    width: 70%;
    margin: 0 auto;
}
.ctrBtns{
    margin: auto;
}
/* https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php*/
/*Used to help with displaying videos correctly*/
.showreel {
    display: block;
	position: relative;
	padding-bottom: 38%; /* 16:9 */
	padding-top: 2px;
	height: 0;
}
.showreel iframe {
    border: 5px solid #f4f0e9;
    box-shadow: 2px 2px 2px #8b8c8e;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.reelDesc{
    width: 60%;
    margin: 0 auto;
    padding-top: 40px;
    padding-bottom: 40px;
    text-align: center;
}

.reelDesc li{
    
	font-size: 120%;
	line-height: 20px;
}
/*---------------------------------------------------------*/
/*                 Formatting for Current Projects         */
/*---------------------------------------------------------*/

article{
    width: 45%;
    text-align: left;
    float: left;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 10px;
}
article:first-child{
    border: blue solid 1px;
}

article img{
    width: 100%
}

.cast{
    text-align: center;
}

.cast article {
    width: 45%;
  /*  height: 270px;*/
    float: left;
    border-radius: 10px;
    border: 1px solid #f4f0e9;
    box-shadow: 3px 3px #f4f0e9;
    margin-top: 20px;
}

.cast article img {
    width: 45%;
    float: right;
    margin-bottom: 20px;    /*tring to center the image*/
    margin-top: 20px;
    padding-right: 5px;
}

.cast article h4 {
    font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
    margin-top: 10px;
	border-bottom: 1px solid #f4f0e9;
	padding-bottom: 10px;
    text-align: center;
}

.cast article .leftText {
    margin-left: 10px;
    width: 50%;
}

/* got code from http://www.sanwebe.com/2013/01/40-css-buttons-from-codepen and used css3 solft button as a base*/
.regButton {
    /*transition*/
    margin: 20px;
    text-decoration: none;
    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
	cursor: pointer;
}
.regButton a{
    color: black;
    text-decoration: none;
    font-size: 24px;
	font-weight: bold;
	margin-bottom: 10px;
    margin-top: 10px;
	padding-bottom: 10px;
    text-align: center;
}
.regButton:hover>a {
    color: #00aeff;
    text-shadow: -1px -2px 1px #000;
}
.regButton {
    display: block;
    float: left;
    font-size: 28px;
    background-color: #434343;
    background-image: -webkit-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -moz-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -o-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -ms-linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: linear-gradient(100% 100% 90deg, #515151, #7A7A7A);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#7A7A7A), to(#515151));
    border: none;
    border-top: 3px solid #c2c2c2;
    /*border-radius*/
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    /*box-shadow*/
    -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
    -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222;
    padding: 10px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    margin-right: 10px;
    text-decoration: none;
    color: #242424;
    background-image: -webkit-radial-gradient(  50%   0%,  8% 50%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),                        -webkit-radial-gradient(  50% 100%, 12% 50%, hsla(0,0%,100%,.6) 0%, hsla(0,0%,100%,0) 100%),                        -webkit-radial-gradient(   0%  50%, 50%  7%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),                        -webkit-radial-gradient( 100%  50%, 50%  5%, hsla(0,0%,100%,.5) 0%, hsla(0,0%,100%,0) 100%),                                                -webkit-repeating-radial-gradient(    50% 50%, 100% 100%, hsla(0,0%,  0%,0) 0%, hsla(0,0%,  0%,0)   3%, hsla(0,0%,  0%,.1) 3.5%),                        -webkit-repeating-radial-gradient(    50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0)   6%, hsla(0,0%,100%,.1) 7.5%),                        -webkit-repeating-radial-gradient(    50% 50%, 100% 100%, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.2) 2.2%),                                                -webkit-radial-gradient(    50% 50%, 200% 50%, hsla(0,0%,90%,1) 5%, hsla(0,0%,85%,1) 30%, hsla(0,0%,60%,1) 100%);
}
.regButton:before,
.regButton:after {
    content: "";
    top: 0;
    left: 0;
    position: absolute;
    width: inherit;
    height: inherit;
    /*border-radius*/
    -webkit-border-radius: inherit;
    -moz-border-radius: inherit;
    border-radius: inherit;
    /* fake conical gradients */
    background-image: -webkit-radial-gradient(  50%   0%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),                        -webkit-radial-gradient(  50% 100%, 10% 50%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),                        -webkit-radial-gradient(   0%  50%, 50% 10%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%),                        -webkit-radial-gradient( 100%  50%, 50% 06%, hsla(0,0%,0%,.1) 0%, hsla(0,0%,0%,0) 100%);
}
.regButton:before {
    /*transform*/
    -webkit-transform: rotate( 65deg);
    -moz-transform: rotate( 65deg);
    -ms-transform: rotate( 65deg);
    -o-transform: rotate( 65deg);
    transform: rotate( 65deg);
}
.regButton:after {
    /*transform*/
    -webkit-transform: rotate(-65deg);
    -moz-transform: rotate(-65deg);
    -ms-transform: rotate(-65deg);
    -o-transform: rotate(-65deg);
    transform: rotate(-65deg);
}
.regButton:active {
    border-top: 0px solid #dde1e7;
    /*box-shadow*/
    -webkit-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
    -moz-box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 1px 0 #2D2D2D, 0 2px 0 #2D2D2D, 0 3px 0 #2C2C2C, 0 4px 0 #2A2A2A, 0 0 0 6px black, 0 4px 0 6px black, 0 0 0 7px #222, 0 4px 0 7px #222,0px 0px 5px #00aeff,0px 0px 50px #00aeff,0px 0px 50px #93d9fa;
    /*transform*/
    -webkit-transform: translateY(4px);
    -moz-transform: translateY(4px);
    -ms-transform: translateY(4px);
    -o-transform: translateY(4px);
    transform: translateY(4px);
}
/*---------------------------------------------------------*/
/*                  table formatting                       */
/*---------------------------------------------------------*/

table{
    width: 100%;
    border: 10px groove #f4f0e9;
}

th, td{
    text-align: left;
    padding: 10px;
    vertical-align: middle;
    border-bottom: 5px groove #f4f0e9;
}

.firstcol{
    width: 20%;
}

.secondcol{
    width: 30%;
    border-right: 5px groove #f4f0e9;
}

/*---------------------------------------------------------*/
/*                  slider formatting                      */
/*                     got code at                         */
/*      https://github.com/mukhortov/Pure-CSS3-Slider      */
/*---------------------------------------------------------*/


.container {
    max-width:70%;
	margin: auto;
    background-color: #f4f0e9;
    color: #222;
    border: 10px solid #f4f0e9;
}


/* Slider */
.slider,
.slider li,
.slider img{
    width:100%;
/*	height: 400px;*/
}


.slider {
	overflow: hidden;
	list-style: none;
	padding: 0;
	margin: 0;
	white-space: nowrap;
	border-radius: 3px;
	word-spacing: -2px; /* removing inline elements spacing */
	letter-spacing: -2px;
}

.slider li {
	display: inline-block;
	word-spacing: normal; /* restoring spacing */
	letter-spacing: normal;
}

@keyframes slider {
	0%, 18% {margin-left: 0;}
	20%, 38% {margin-left: -100%;}
	40%, 58% {margin-left: -200%;}
	60%, 78% {margin-left: -300%;}
	80%, 99.9% {margin-left: -400%;}
	100% {margin-left: 0;}
}

@-webkit-keyframes slider {
	0%, 18% {margin-left: 0;}
	20%, 38% {margin-left: -100%;}
	40%, 58% {margin-left: -200%;}
	60%, 78% {margin-left: -300%;}
	80%, 99.9% {margin-left: -400%;}
	100% {margin-left: 0;}
}
.slider li:first-child {
	animation: slider 20s ease-out infinite;
	-webkit-animation: slider 20s ease-out infinite;
}

/* pause animation on mouse over */
.slider:hover li:first-child {
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
}

/*---------------------------------------------------------*/
/*                  Home page formatting                   */
/*                    got code from                        */
/*                  Practical 3 in class                   */
/*---------------------------------------------------------*/

/* Secondary content styling */
.homeContent {
	padding: 105px 0;
	width: 100%;
    margin: auto;
    background: url('../imgs/Shane.JPG');
    background-repeat: no-repeat;
	background-size:cover;
    background-attachment: fixed;
    clear: both;
    float: left;
}

.textArea{
    width: 55%;
    float: right;
    background: rgba(0, 0, 0, 0.75);
	padding: 20px;
    margin-right: 5%;
    border-radius: 10px;
    box-shadow: 3px 3px #f4f0e9;
}
.social{
    text-align: center;
    
}
.formInput h2 {
	font-size: 200%;
	text-transform: uppercase;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
    font-family: 'Special Elite', cursive;
}

.maincontent .textArea{
    margin-bottom: 20px;
}

.formInput{
    width: 45%;
    float: right;
    background: rgba(0, 0, 0, 0.75);
    padding: 55px 20px;
    margin-right: 5%;
    border-radius: 10px;
    box-shadow: 3px 3px #f4f0e9;
}

.formInput h3 {
	font-size: 150%;
	text-align: center;
    font-family: 'Special Elite', cursive;
}
.formInput a{
    text-decoration: none;
    color:#f4f0e9;
}

.formInput h4 {
    font-family: 'Special Elite', cursive;
    font-size: 24px;
	margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
}

#lined{ 
    border-style: solid; 
    border-color: #f4f0e9; 
    border-width: 0 0 3px 0; 
    border-radius: 0 0 10px 0;  
}

label{
    display: block;
	font-size: 120%;
}

input, textarea{
    margin: 10px;
    border-radius: 10px;
    padding: 10px;
}

/****************************************************************************/
/*                  social media buttons                                    */
/****************************************************************************/
.mediaButton {
	cursor:pointer;
  display: inline-block;
    margin-right: 25px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding-right: 30px;
  padding-left: 30px;
  position: relative;
  background-color:rgb(0,0,0);
  color:rgb(255,255,255);
  text-decoration: none;
  letter-spacing: 1px;
/*
  margin-bottom: 15px;
  margin-top: 15px;
*/
  background: #25292C;
  border-radius: 50%;
    box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), 
              inset 3px 15px 45px rgba(255,255,255,0.1),
              inset -1px -1px 2px rgba(0,0,0,0.5), 
              inset -3px -15px 45px rgba(0,0,0,0.2),
              1px 5px 30px -4px rgba(0,0,0,1);
  -webkit-transition: 0.1s ease-out;
  -moz-transition:    0.1s ease-out;
  -o-transition:      0.1s ease-out;
  transition:         0.1s ease-out;
}

.mediaButton:before {
  content: "";
  background: #1A1A1A;
  width: 80px;
  height: 80px;
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: -1;
  border-radius: 50%;
}

.mediaButton:active {
  color: rgba(0,0,0,0.7);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), 
              inset 3px 15px 45px rgba(0,0,0,0.2),
              inset -1px -1px 2px rgba(0,0,0,0.5), 
              inset -3px -15px 45px rgba(255,255,255,0.1),
              1px 5px 10px -4px rgba(0,0,0,1);
}
     
     .blob, .blob:before {
  -webkit-animation: blob 1s linear;
  -moz-animation:    blob 1s linear;
  -o-animation:      blob 1s linear;
  animation:         blob 1s linear;
}

.blob {
  color: rgba(0,00,0,0.7);
  text-shadow: 1px 1px 0px rgba(255,255,255,0.15);
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.3), 
              inset 3px 15px 45px rgba(0,0,0,0.2),
              inset -1px -1px 2px rgba(0,0,0,0.5), 
              inset -3px -15px 45px rgba(255,255,255,0.1),
              1px 5px 10px -4px rgba(0,0,0,1);
}

     
.mediaButton:hover{
    text-decoration: none;
  color: #eeeaee;
}

.mediaButton span {
  position: absolute;
  left: 0;
  width: 60px;
  font-size:40px;
  -webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 1px solid  rgba(0,0,0,0.15);
    text-decoration: none;
}

footer{
    background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
    background-image: linear-gradient(#fff, #ccc);
    border-radius: 6px;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.4);
    padding: 0 0px;
    float: left;
    width:100%;
    font-weight: 600;
    position: relative;
    display: block;
	color: #444;
}
footer p{
	text-align: center;
    margin-bottom: 0px;
}
footer a{
    text-decoration: none;
    color: #444;
}
/*Media query*/
 @media screen and (max-width: 1000px) {

      /* Make the main content fill the whole screen */

      .wrap {
        width: 90%;
      }

      /* readjust the header */
     header img{
         float:right;
     }
     
      nav {
          clear: both;
          float: left;
     }

     /*reformat the index page */
     .formInput, .textArea{
        width: 80%;
        margin-right: 10%;
     }
     
     /*reformat the current page*/
     .cast article {
         width: 90%;
     }
     
     /*reformat videos*/
     .maincontent{
         padding-top: 30px;
     }
     .showreel{
        width: 90%;
     }
     .showreel {
        padding-bottom: 56.25%; /* 16:9 */
    }
     
    .reelDesc{
        width: 80%;
    }

}