/* Start of CMSMS style sheet 'new-styles' */
@charset "UTF-8";

/*******
* reset *
*******/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

h1 { behavior: url(iepngfix.htc); }

.ieresize {
  max-width: 256px;
  max-height: 284px;
  height: expression(this.height > this.width && this.height > 286 ? '284px' : true);
  width: expression(this.height < this.width && this.width > 258 ? '256px' : true);
}

/*******************
*                  *
* wireframe layout *
*                  *
********************/

body {
  font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	background-color: #b0b0b0;
}

.small #wrapper {
  font-size: 95%;
  width: 776px;
  height: 368px;
  margin: 100px auto 100px auto;
  background: url(uploads/images/bg-2bar.png) no-repeat;
  position: relative;
}

.big #wrapper {
  font-size: 95%;
  width: 776px;
  height: 368px;
  margin: 100px auto 100px auto;
  background: url(uploads/images/bg-1bar.png) no-repeat;
  position: relative;
}

#menupane {
  width: 198px;
  height: 344px;
  float: left;
  margin: 8px 0;
}

#subpane {
  width: 197px;
  height: 344px;
  float: left;
  margin: 8px 0 8px -570px;
}

.small #mainpane {
  width: 373px;
  height: 344px;
  float: left;
  margin: 8px 0 8px 197px;
}

.big #mainpane {
  width: 568px;
  height: 344px;
  float: left;
  margin: 8px 10px 8px 0;
}

#host {
  position: absolute;
  bottom: -50px;
  left: 0;
}

/***********
*          *
* menupane *
*          *
************/

h1 {
  background: url(uploads/images/logo.png) no-repeat;
  width: 180px;
  height: 42px;
  text-indent: -9999px;
  margin: 10px auto;
}

h1 a {
  width: 180px;
  height: 42px;
  display: block;
}

#nav {
  text-align: right;
  margin: 40px 10px 0 10px;
}

#nav li {
  margin: 15px 0 0 0;
  padding: 0 20px 0 0;
}

#nav a {
  text-decoration: none;
  color: black;
  font-size: 110%;
  letter-spacing: 1px;
}

#nav .current, #nav .highlight {
  font-weight: bold;
  background: url(uploads/images/menu-icon.png) no-repeat right;
}

/***********
*          *
* mainpane *
*          *
************/

#content { /*wrapper that makes the borders*/
  margin: 10px;
  border-top: 15px solid #8b97ba;
  border-bottom: 15px solid #8b97ba;
  height: 284px;
  padding: 5px 0;
}

#Resume #content a, #Resume #content a:active, #Resume #content a:visited {
  color: #8b97ba;
  text-decoration: none;
}

#Resume #content a:hover {
  text-decoration: underline;
}

#mainpane .inner-wrap {
  height: 284px;
  width: 548px;
  overflow: auto;
}


.small #mainpane .inner-wrap {
  width: 353px;
}

* html #mainpane .inner-wrap {
  width: 548px;
}

#Home #mainpane .inner-wrap {
  margin-right: 0;
}

#subpane .inner-wrap {
  height: 322px;
  overflow: auto;
}

.album {
  margin-bottom: 10px;
  width: 100%;
  /* height: 55px; */
  overflow: hidden;
}

body:first-of-type .album {
  margin-bottom: 0;
}

.album img {
  float: left;
  margin-right: 10px;
}

.album h3, #info h3 {
  color: #8B97BA;
  text-transform: uppercase;
  /* font-weight: bold; */
  font-family: "Arial Black", "sans serif";
  margin-bottom: 10px;
}

.album .big-block h3 {
  margin-bottom: 0;
}

.album .big-block {
  /* margin-left: 100px; */
  /* height: 50px; */
}

.album .desc {
  margin-bottom: 0px;
}

#thumbnails {
  width: 80px;
  height: 284px;
  float: left;
  padding-right: 5px;
  border-right: 1px solid black;
}

#thumbnails img {
  cursor: pointer;
}

#thumbnails .scroll-pane, #info .scroll-pane {
  height: 284px;
  overflow: auto;
}

#thumbnails ul {
  -webkit-padding-start: 0; /*safari fix*/
}

#info {
  width: 180px;
  height: 284px;
  float: left;
  margin-left: 10px;
  border-right: 1px solid black;
  padding-right: 5px;
}

.off {
  display: none;
}

.on {
  display: visible;
}

#artwork {
  height: 284px;
  width: 256px;
  margin-left: 10px;
  float: left;
}

/**********
*         *
* subpane *
*         *
***********/

#subpane .scroll-pane {
  height: 322px;
}

/**********
*         *
* styling *
*         *
***********/

.scroll-pane {
  line-height: 15px;
}

.scroll-pane p {
  margin: 0 0 5px 0;
}

strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

.desc {
margin-top: 12px;
}

.big-block {
margin-top: 12px;
}
/* End of 'new-styles' */

/* Start of CMSMS style sheet 'jscrollpane' */
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
        padding-right: 15px;
}

* html .jScrollPaneContainer {
        padding-right: 0;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #aaa;
}
.jScrollPaneDrag {
	position: absolute;
	background: #8b97ba;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}
/* End of 'jscrollpane' */