@charset "iso-8859-1";



/* 1. HTML tags that are replaced */



/* Colours - bg #eeeeff	
					blue font: #7b8193
				


*/


body	{
	background-color: #f1e8b4;	
	font-family: Helvetica, Verdana, Arial, Helvetica, sans-serif; /* sets the default san-serif fonts found on most computers */
	font-size:62.5%; /* this sets the default font size (10px) to 1em. This makes it easier to use em on firefox/ie and make them look the same */	
	background-attach ment: fixed;	
	color: #000000;
	}

p {
	font-size: 13px;
}
	
	
/* these set the link colours and how they will look */	
	
a:link {text-decoration:none; color: #c56600;}
a:visited {text-decoration:none; color: #c56600;}
a:active {text-decoration:none; color: #ffe6cb;}
a:hover {text-decoration:none; color: #ff9b2f;}

/* this moves the horizontal tag image into the actual horizontal hr code. Leaves gap of 50px above */

hr {
	border:0;
	background:  url('../images/hr3.png') no-repeat scroll center; 
	height: 10px; 
	margin-top:50px;
	margin-bottom:50px;
	padding-top: 20px;
	padding-bottom: 20px;
}

/* makes images have no border */

img { 
	border:0;
}

/* ID tags (denoted by the #) - there is only one of each of these in each page */

/* The #wrapper sets the whole page, margins-left/right make it centred and we set the width */
	

#twitstamp {
	float: left;
	width: 100px;	
	text-align: justify;
	padding: 25px 30px 30px 5px;

}	

#wrapper {
	margin-top: 10px;
	margin-right:auto;
	margin-left:auto;
	width: 880px;
	padding: 0px;
}
	

	
#header {
}

/* Setting the width of the intro bar and then creating two columns that "float" within it */

#intro {
	width: 900px;
}

#leftintro {
	backgro und-color: #000000;
	float: left;
	width: 450px;	
	text-align: justify;
	padding: 0px 0px 0px 0px;
	
	
}

#rightintro {
	float: right;
	width: 400px;
	text-align: justify;
}

#animreel {
	float: left;
	width: 380px;
	text-align: justify;
	padding-top: 0px;
	padding-bottom: 0px;
}

#compreel {
	float: right;
	width: 380px;
	text-align: justify;
	padding-top: 0px;
	padding-bottom: 0px;
}

#presentationreel {
	float: left;
	width: 380px;
	text-align: justify;
	padding-top: 0px;
	padding-bottom: 0px;
}


#showreel {
	text-align: justify;
}

#othervideos {
	text-align: justify;
	 
}



#clients {
	padding-top: 10px;
	}
	
#bluebox {
		background-color: #CCCCCC;
		border:black solid 0px;
		padding: 5px 5px 5px 5px;
		margin-top:20px;	
		font-weight: bold;
		}


/* 3. Class tags. These can be duplicated anywhere in the text, so good for changing text size, fonts etc */

/* This is the code that replaces the title text and 2ndry keywords with an image, but also hides the text off the screen */

.main-title {
	height: 210px; 
	width: 880px;
	background-image: url('../images/title3.png');
	background-repeat: no-repeat;
	background-position: center top;
	text-indent: -9999em;
	display: block;
	margin-right:auto;
	margin-left:auto;
}

.secondary-keywords {
	text-indent: -9999em;
	}

/* Instead of setting each section with an ID tag you could define in the section (or have both) */

.section {
	padding-top: 10px;
}

.section-image {
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 5px
	padding-right: 5px
}

/* The feedback section with different styling for each element */

.feedback-bold{
	font-weight: bold;
	color: "WHITE";
	font-size: 25px;
	padding: 5px 0 10px 0; 	/* this padding is for the Top and Bottom (Order is Top/Right/Bottom/Left */
	margin: 0px; 			/* This reduces any margins to 0 */
}

/* Margins and padding are slightly different. Padding is within the scope of your CSS 'box' and margin outside. */

.feedback {
	font-style: italic;
	font-size:	11px;
	padding: 3px 0 3px 0;
	margin: 0px;
}

.feedback-author {
	padding-left: 10px; 	/* Padded this author information by 10px to left to intent it slightly */
	margin: 0px;
	font-size: 	13px;
	font-weight: bold;
}
	
.feedback-link {
	font-size: 13px;
	font-weight: bold;
}

/* General styling of fonts, best done here rather than in the HTML */

.italics {
	font-style:italic;
	font-size: 12px;
	text-align:justify;
}

.boldtext {
	font-weight: bold;
	font-size: 16px;
}

.specialnotice {
	font-weight: bold;
	font-size: 22px;
	color: black;
}


.normaltext {
	font-size:13px;
	text-align:justify;
	}
	
/** Style the tweets */
.twitters {
  background-color: #CCCCCC;
  border:black solid 1px;
  padding: 5px;
  font-size: 14px;
}

.twitters ul {
  list-style: none;
  padding: 0;
}

.twitters span.prefix {
  font-weight: bold;
}

.twitters span.time {
  font-style: italic;
  color: #c5c5c5;
}

.twitters span.status {
  font-style: italic;
}

	

/*  ROLLOVER STUFF  */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}


.luckydip {
  border: 2px solid #c56600;  
  float: left;
  height: 113px;
  width: 150px;
  margin: 10px;
  overflow: hidden; 
}

.reels {
  border: 5px solid #c56600;  
  margin: 0px;
  overflow: hidden; 
}
	

/*TILT*/
.tilt {
  -webkit-transition: all 0.1s ease;
     -moz-transition: all 0.1s ease;
       -o-transition: all 0.1s ease;
      -ms-transition: all 0.1s ease;
          transition: all 0.1s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(-5deg);
     -moz-transform: rotate(-5deg);
       -o-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
          transform: rotate(-5deg);
}