@pagewidth:1020px;
@pageheight:745px;
@contentwidth:690px;
@contentcolumheight:472px;
@gallerytop:28px;
@galleryheight:430px; /* This should be set to be at least the height of the largest image in the slideshow */
@gallerywidth:570px;
@captionwidth:177px;
@homeimagewidth:229px;
@leftcolum:227px;
@rightcolum: @pagewidth - @leftcolum - 4; /* 4px margin */

.pagecolor { background-color: #455059 }

.th { /* Top row */
	background-color: #1b2329;
	font-size: 20px;
	height: 32px;
	line-height: 32px;
	width: 100%; }

.sh { /* Sub-menu row */
	font-size: 24px;
	height: 70px;
	line-height: 70px;
	width: 100%; }

.lh { /* Logo row */
	height: 115px;
	width: 100%; }

.mh { /* Main row */
	background-color: #c8cdd2;
	height: 528px;
	width: 100%; }

.centerme {
	margin: 0 auto;
	text-align: center; }

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, form, select, input, textarea {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline; }

/* remember to define focus styles! */
:focus { outline: 0; }

body {
	background: white;
	color: black;
	line-height: 1; }

ol, ul { list-style: none; }

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0; }

caption, th, td {
	font-weight: normal;
	text-align: left; }

blockquote:before, blockquote:after,
q:before, q:after { content: ""; }

q { quotes: none; }

@font-face {
	font-family: nyala;
	src: url('../fonts/nyala.ttf'); }

a {
	color: #8d9194;
	font-family: nyala;
	text-decoration: none; }

	a:hover { color: #fff; }

	a img { border: 0; }

	a:hover img { border: 0; }

#wrapper {
	height: @pageheight;
	margin: 5px auto;
	width: @pagewidth; }

#leftcol {
	float: left;
	width: @leftcolum; }

#home {  }

#about {
	position: relative;
  .sh; 
  .centerme;
  }

#glogo{ 
  .lh; 
  img { margin: 19px 32px; }
}

#mainleft { 
  .mh;
  position: relative; }

#address {
	bottom: 10px;
	color: #fff;
	height: 55px;
	left: 0px;
	position: absolute;
	text-align: center;
	width: @leftcolum; 
		p{
		color: #333333;
		font-family: nyala;
		font-size: 17px;
		font-weight: bold;}
}

#rightcol {
	float: left;
	margin-left: 4px;
	width: @rightcolum; }

#home_btn{
	position: relative;
  .th;
  .centerme; }
#topbar { 
  .th;
  position: relative; }

#btn_contact {
	left: 29px;
	position: absolute; }
	
#btn_blog {
	left: 226px;
	position: absolute; }
	

#btn_soundboard {
	position: absolute;
	left: 305px;}

#submenu {  
  a { padding: 0 28px; }
  }

#logobar{
  .lh; 
  img { margin: 19px; }
  }

#mainright { 
  .mh;
  position: relative; }

#content {
	min-height: @contentcolumheight;
	width: @contentwidth; }


#entrance {
	height: @contentcolumheight;
	overflow: hidden;
	position: relative;
	width: @contentwidth; 
  ul {
  	left: 0;
  	position: absolute;
  	top: 0; }
  li {
  	border-left: 1px solid #CCCCCC;
  	float: left;
  	height: @contentcolumheight;
  	overflow: hidden;
  	width: @homeimagewidth; 
      a {
      	background-position: 0 0;
      	display: block;
      	height: @contentcolumheight;
      	position: relative;
      	text-indent: -5000px;
      	width: @homeimagewidth; 
          span {
          	background-position: @homeimagewidth *  -1  0;
          	display: block;
          	height: @contentcolumheight;
          	left: 0;
          	position: absolute;
          	top: 0;
          	visibility: hidden;
          	width: @homeimagewidth; }
    }
  }
}


#controls {  }

#btnRight {
	background: url("../images/controls_right.png") repeat-y 0 0 #7B8688;
	left: -24px; }

#btnLeft {
	background: url("../images/controls_left.png") repeat-y 0 0 #7B8688;
	right: 73px; }

#btnLeft, #btnRight {
	display: block;
	height: 64px;
	position: absolute;
	text-indent: -5000px;
	top: 0;
	width: 20px; }

#shadowLeft, #shadowRight {
	height: @contentcolumheight;
	position: absolute;
	top: 0;
	width: 40px; }

#shadowRight {
	background: url("../images/panel_slide_right.png") repeat-y scroll 0 0 transparent;
	left: 0; }

#shadowLeft {
	background: url("../images/panel_slide_left.png") repeat-y scroll 0 0 transparent;
	right: 98px; }

#col-about a, #col-about a span { background-image: url("../images/about_us_home.jpg"); }

#col-logo_branding a, #col-logo_branding a span { background-image: url("../images/logos_branding_home.jpg"); }

#col-creative_production a, #col-creative_production a span { background-image: url("../images/creativeproduction_home.jpg"); }

#col-illustration a, #col-illustration a span { background-image: url("../images/sketches_home.jpg"); }

#col-goofinaround a, #col-goofinaround a span { background-image: url("../images/goofin_around_home.jpg"); }

#thumbs {
	padding: 5px 28px;
	position: absolute;
	top: 0px; }

#gallery {
	height: @galleryheight;
	width: @gallerywidth;
	left: 0;
	overflow: hidden;
	padding: 0;
	position: absolute;
	top: @gallerytop;}

div.controls {
	height: 23px;
	margin-top: 5px; }

	div.controls a { padding: 5px; }

div.ss-controls { float: left; }

div.nav-controls { float: right; }

div.slideshow-container {
	clear: both;
	height: @galleryheight;
	position: relative; }

div.loader {
	background-image: url('loader.gif');
	background-position: center;
	background-repeat: no-repeat;
	height: @galleryheight;
	left: 0;
	position: absolute;
	top: 0;
	width: @gallerywidth; }

div.slideshow {  
  span.image-wrapper {
  		display: block;
  		left: 0;
  		position: absolute;
  		top: 0; }
  a.advance-link {
		display: block;
		height: @galleryheight;
		line-height: @galleryheight; 
		text-align: center;
		width: @gallerywidth; }
	img {
		/*border: 1px solid #000;*/
		left:0;
		top:0;
		position:absolute; }
  }

		div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited { text-decoration: none; }

div.download { float: right; }

#caption-bg {
	background-color: #455059;
	height: @galleryheight;
	left: @gallerywidth + 1;
	position: absolute;
	top: @gallerytop;
	width: @captionwidth; }

.whitebar {
	background-color: #fff;
	height: 2px;
	width: 151px; }

div.caption-container {
	clear: left;
	height: @galleryheight;
	position: relative; }

span.image-caption {
	display: block;
	left: 0;
	position: absolute;
	top: 0;
	width: @captionwidth; }

div.caption {
	color: #fff;
	padding: 12px;
		p{
		font-family: arial,verdana,sans-serif;
		font-size: 14px;
		font-style: inherit;
		font-weight: normal;
		padding: 2px 0;
		text-align: center;}
	}

div.image-title {
	font-size: 1.4em;
	font-weight: bold;
	text-align: center; }

div.image-desc {
	line-height: 1.3em;
	padding-top: 12px;
	text-align: justify; }

div.navigation { /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */ }

ul.thumbs {
	clear: both;
	margin: 0;
	padding: 0; 
  li {
		background-color: #fff;
		float: left;
		list-style: none;
		margin: 2px 3px 2px 0;
		padding: 0; }
	li.selected a.thumb {
  	background-color: #1099c1;
    background: #1099c1;
    border: 1px solid #1099c1; }
  img {
  	border: none;
  	display: block;
    height: 47px;
    width: 47px;}
}

a.thumb {
	border: 1px solid #ccc;
	display: block;
	padding: 2px; 
  :focus { outline: none; }
  }

.allpagination{
	border: 1px solid #ccc;
	color: #FFF;
	display: block;
	float: left;
	margin-right: 2px;
	padding: 4px 7px 2px 7px; }

div.pagination {
  clear: both;
  a{.allpagination; }
  a:hover {
  	background-color: #eee;
  	color: #000;
  	text-decoration: none; }
	span.current {
	  .allpagination;
  	background-color: #1b2329;
  	border-color: #000;
  	color: #fff;
  	font-weight: bold; }
  span.ellipsis {
    .allpagination;
  	border: none;
  	padding: 5px 0 3px 2px; }
}

div.navigation {
  div.top {
  	height: 11px;
  	margin-bottom: 12px; }
  
  div.bottom { 
    margin-top: 12px; }
}
#btn_home{
	position: absolute;
	left: 70px;
}
#btn_about{
	position: absolute;
	left: 70px;
}