/*** typography ***/

@font-face { 
    font-family: "ConquerorSans";
    src: url('/fonts/AWConquerorSans-Light.otf');
    }

@font-face { 
    font-family: "ConquerorSlab";
    src: url('/fonts/AWConquerorSlab-Light.otf');
    }

@font-face { 
    font-family: "ConquerorBold";
    src: url('/fonts/AWConquerorCarved-Bold.otf');
    }


/* */


body {
    background-color: black;
	text-align: center;
	font-family: ConquerorSans, Tahoma, "Trebuchet MS", Arial, Verdana, sans-serif;
	background-image: url(images/background.png);
	background-position: top center;
	background-repeat: no-repeat; 
	}
	
#page {
    margin: auto;
	margin-top: 60px;
	text-align: left;
    width: 750px;
	}

#header {
    background-color: transparent;
	width: 100%;
	height: 55px;
	position: relative;
    margin-bottom: 5px;
	color: white;
	}
	
#header #logo {
    float: left;
	}
	
#header #menu {
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 10pt;
	font-weight: 500;
	letter-spacing: 2px;
	position: absolute;
	bottom: 20px;
	right: 0px;
	color: #008eb0;
	}
	
/* bit of jumping about to get the bars the right size */
	
#header #menu a {
	font-family: ConquerorBold, Tahoma, "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 14px;
	}
	
#content {
  clear: both;
	background-color: #28272d;
	color: white;
	padding: 10px 20px 60px 20px;
	position: relative;
	font-size: 12px;
	min-height: 420px;
	}
	
#content.video { background-color: black; }
#content.home  { background-color: #28272d; }
	
.columnleft {
    position: relative;
    width: 240px;
    float: left;
	}
	
.columnright {
    position: relative;
    margin-left: 260px;
	}
	
h2 {
	font-family: ConquerorBold, Tahoma, "Trebuchet MS", Arial, Verdana, sans-serif;
	font-weight: 500;
	margin-top: 0px;
	margin-bottom: 4px;
	color: #008eb0;
	text-transform: uppercase;
	}
	
h3 { 
	color: white;
	text-transform: uppercase;
	}
	
h4 {
	font-family: ConquerorSans, Tahoma, "Trebuchet MS", Arial, Verdana, sans-serif;
	font-size: 13px;
	font-weight: 500;
}

p { margin-top: 0px; }

a:link    { color: #999; text-decoration: none; }
a:active  { color: white; text-decoration: none; }
a:visited { color: #999; text-decoration: none; }
a:hover   { color: #008eb0; text-decoration: none; }

#header a:link    { color: white;  text-decoration: none;     font-size: 80%; }
#header a:active  { color: white; text-decoration: none;     font-size: 80%; }
#header a:visited { color: white;  text-decoration: none;     font-size: 80%; }
#header a:hover   { color: #008eb0; text-decoration: none; font-size: 80%; }

#header a.thispage:link    { color: #008eb0; text-decoration: none;      font-size: 80%; }
#header a.thispage:active  { color: white; text-decoration: none;     font-size: 80%; }
#header a.thispage:visited { color: #008eb0; text-decoration: none;      font-size: 80%; }
#header a.thispage:hover   { color: #008eb0; text-decoration: none; font-size: 80%; }

.preview a:link    { color: white; text-decoration: none; text-transform: uppercase; }
.preview a:active  { color: white; text-decoration: none; text-transform: uppercase; }
.preview a:visited { color: white; text-decoration: none; text-transform: uppercase; }
.preview a:hover   { color: #008eb0;  text-decoration: none; text-transform: uppercase; }

.portfolio a:link    { color: white; text-decoration: none;     text-transform: uppercase; }
.portfolio a:active  { color: white; text-decoration: none;     text-transform: uppercase; }
.portfolio a:visited { color: white; text-decoration: none;     text-transform: uppercase; }
.portfolio a:hover   { color: #008eb0;  text-decoration: none; text-transform: uppercase; }

#footer a:link    { color: #999; text-decoration: none; text-transform: none; }
#footer a:active  { color: white; text-decoration: none; text-transform: none; }
#footer a:visited { color: #999; text-decoration: none; text-transform: none; }
#footer a:hover   { color: #008eb0;  text-decoration: none; text-transform: none; }

.gallery h2 a:link    { color: #008eb0;  text-decoration: none; text-transform: uppercase; }
.gallery h2 a:active  { color: white; text-decoration: none; text-transform: uppercase; }
.gallery h2 a:visited { color: #008eb0;  text-decoration: none; text-transform: uppercase; }
.gallery h2 a:hover   { color: white; text-decoration: none; text-transform: uppercase; }

/*** section-specific ***/

 
.contact table {
    margin-top: 25px;
	padding: 0px;
	border: none;
	border-collapse: collapse;
	}

.contact table td { 
    padding: 0px 20px 20px 0px;
	vertical-align: top;
    }
	
.portfolio table {
    margin-top: 15px;
	padding: 0px;
	border: none;
	border-collapse: collapse;
	}

.portfolio table td { 
    padding: 0px 20px 10px 0px;
	vertical-align: top;
    }
	
.portfolio table p { 
	margin: 0px;
	}
	
.portfolio img {
    display: block;
	margin-bottom: 3px;
	}
	
.about table, .about .crew {
  width: 470px;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 40px;
	padding: 0px;
/*	background-color: #555; */
	border-spacing: 5px;
  border-collapse: separate;	
	}
	
.about table {
    border: 5px solid #555;
	}
	
.about td {
  background-color: transparent;
	vertical-align: top;
	padding: 5px;
	font-size: 110%
	}
	
.about h4 {
    text-transform: uppercase;
	font-weight: normal;
	margin: 0px;
	}

.about .crew {
/*    background-color: black; */
	}
	
.about .crew img {
    display: block;
	}

.about .crew p {
    margin-top: 5px;
	font-size: 120%;
	}

.gallery {
    padding-right: 5px;
	position: relative;
	}
	
.gallery img { 
    display: block; 
	border: none;
	}

.gallery .preview { 
    position: relative;
    float: left; 
	margin-right: 10px;
	margin-bottom: 10px;
    width: 225px;
	min-height: 10px;
	}

.gallery h2 {
    margin-bottom: 20px;
	}
	
.gallery h4 {
    margin: 4px 0px 3px 0px;
	text-transform: uppercase;
	}

.gallery p {
    color: #999;
	}

.home div.viewer {
    width: 550px;
    height: 400px;
	margin: auto;
    margin-top: 50px;
	}
	
.home p {
    font-size: 10px;
	margin: 4px 0px;
	color: #999;
	}

.home h3 {
    text-align: center;
	margin: 5px 0px 0px;
	}
	
	
.demoinner {
    width: 75%;
	margin: auto;
	margin-top: 40px;
	background-color: cyan;
	}
	
.demoreel .preview {
	float: left;
	margin-right: 8px;
	margin-bottom: 10px;
    width: 230px;
	}

	
.demoreel p {
    font-size: 9px;
	margin: 4px 0px;
	}

.demoreel h3 {
    text-align: center;
	margin: 5px 0px 0px;
	}

	
.login div {
    width: 50%;
	margin: auto;
    text-align: center;
	}
	
	
.login input {
    background-color: black;
	color: white;
	width: 150px;
	border: 1px solid white;
	}

	
#page.bio-overlay { width: 500px; }
	
#content.bio-overlay {
	width: 470px;
/*
padding-left: 150px;
	padding-right: 150px;
*/
background-color: black;
    }
	
.bio-overlay table {
    width: 100%;
	}
	
.bio-overlay h2 {
    margin: 10px 0px;
	}
	
.bio-overlay th {
    background-color: #222;
	text-transform: uppercase;
	font-weight: normal;
	border-bottom: 5px solid black;
	border-top:   10px solid black;
	}
.bio-overlay td {
    font-size: 10px;
	width: 50%;
    }


.users td {
    padding: 10px 10px 10px 0px;
    vertical-align: top;
	}

.video {
    text-align: center;
	}
	
.video .viewer {
	margin: auto;
    }

.video .notes {

/*
    width: 350px; 
	margin-left: 70px;
	margin-right: 75px;
*/
    }
	
.video .notes p {
  text-align: left;
  vertical-align: top;
	color: #999;
	font-family: ConquerorSans, Tahoma, "Trebuchet MS", Arial, Verdana, sans-serif;
	font-weight: 500;
	font-size: 12px;
	}	

.video #prev, .video #next {
    vertical-align: top;
	padding-top: 7px;
	} 
.video #prev {
text-align: left;
}
.video #next {
text-align: right;
}


.video h3 { 
	font-family: ConquerorBold,Tahoma,"Trebuchet MS",Arial,Verdana,sans-serif;
	font-weight: 500;
	font-size: 16px; /* change to 18 */
  margin-top: 5px; 
	margin-bottom: 5px;
	}
	
.video h4 {
  margin-top: 0px; 
	color: #999;
	}
	
.video #container {
	text-align: center;
	}
	
.viewer td {
	vertical-align: middle;
	}
	
	
	
/*******/


.graytext, .greytext {
    color: #999;
	}
	
.whitetext {
    color: white;
	}

#footer {
	font-family: ConquerorSans,Tahoma,"Trebuchet MS",Arial,Verdana,sans-serif;
	font-size: 12px;
  clear: both;
  margin-top: 10px;
	width: 142px;  /* needs to match image width */
	position: absolute;
	bottom: 20px;
	right: 20px;
	text-align: right;
	}	

#legal {
    position: relative;
	text-align: left;
	padding: 0px;
	margin: 0px auto 10px;
	}
	
#legal div {
    position: relative;
	text-align: left;
    width: 100%;
	margin: 0px;
	}
	
img { border: none; }

.aligncenter {
	text-align: center;
	}
	
.flushright {
	text-align: right;
	}
	
.floatleft {
	float: left;
	}
	

/* video dimensions */

#page.video { width: 700px; }
.video .viewer {  width: 700px; }
.video #container {  width: 550px; height: 310px; }
.viewer td { min-height: 350px; }