/* @override http://www.mulderstudios.com/css/mulder.css */

pre { position: absolute; margin: 0px; padding: 0px; text-align: left; visibility: hidden; }

body { 
	background: #fff;
	text-align: center;
	font-family: Georgia, "Times New Roman," Times, serif;
}
 
#header { 
	width: 100%; 
	height: 115px;
	text-align: center;
	background: #ddd url(/img/common/cementback2.jpg) repeat-x;	
}

.headillo-left {
	float:left;
	height: 98px;
	width: 69px;
	background: url(/img/common/headillo-left.gif) no-repeat top center;
}

.headillo-ms {
	float:left;
	height: 98px;
	width: 352px;
}

.headillo-right {
	float:right;
	height: 98px;
	width: 227px;
	background: url(/img/common/headillo-right.gif) no-repeat top center;
	overflow: hidden;
}

a.headillo-ms {
	display: block;
	position: relative;
	height: 98px; 
	width: 352px;
	padding: 0px; margin: 0px;
	background: url(/img/common/headillo-ms.gif) no-repeat top center; border: 0px;
}

a.headillo-ms:hover { background-position: 0px -98px; }

#inner_header {
	width: 648px;
	height: 98px;
    margin: 0px auto;
    padding-left: 140px;
}


#inner_header h1 {
    display: none;
}


#mailinglist_form {
	float: right;
	width: 177px;
	height: 30px;
/*  border: 1px solid #000; */
	margin-top: 50px;
}

.mailinglistfield {
	float: left;
	width: 105px;
	height: auto;
	padding: 1px;
	font-size: .8em;
	color: #888;
	font-family: Georgia, "Times New Roman," Times, serif;
	
}
	
.mailinglistfieldbutton {
   float: right;
   top: 0px;
   background: url(/img/common/subscribebutton.gif) no-repeat top center;
   width: 60px;
   height: 25px;
   border: 0px;
   margin-top:-1px;
}

.mailinglistfieldbutton:hover {
   background-position: 0px -25px;
}


/* @end */

/* @group Navigation */
/* the containers for the main navigation */

#nav { 
	width: 785px; 
	margin: 0px auto;
	height: 80px;
	overflow: hidden;
	border-bottom: 1px dashed #000;
	border-top: 1px dashed #000;
	margin-bottom: 5px;
}

#insidenav { 
	width: 785px; 
	margin: 0px auto;
	height: 80px;
	overflow: hidden;
/*	background: url(/img/common/menulines.gif) no-repeat 0px 10px; */
}

/* @end */

/* @group Structure */

#wrap { 
	width: 785px; 
	margin: 0px auto;
}

#content, #frontcontent {
	width: 785px;
	height: 420px;
	margin: 0px auto;
	text-align: left;
}

#frontcontent {
	height: 400px;
	margin-top: 5px;
	border-top: 1px dashed #000;	
}

/* @end */

/* @group Filmstrip */

#slideNav { /* the background to the project 'filmstrip' on the home page, uses #thumbnails_lrg */
	width: 860px; 
	height: 142px; 
	overflow: hidden;
/*	background: #eee; only for checking */
	margin: 0px auto;
}

#slideNav li { 
	float: left; 
	margin-right: 5px; 
	list-style: none; 
	width: 140px; 
	height: 140px; 
	overflow: hidden; 
	border: 1px solid #000;
}

#slideNav li:hover { /* creates the accentuated border when you hover-over */
	width: 134px;
	height: 134px;
	border: 4px solid #000;
}

#slideNav a { width: 138px; display: block; border-bottom: none;}
#slideNav a.activeSlide { background: none; border-bottom: none;}
#slideNav a:focus { outline: none; border-bottom: none;}
#slideNav img { border: none; display: block; }

/* @end */

#bigpic { /* for home page */
    float: left;
    width: 470px;
    height: 425px;
    background: #eee;
    overflow: hidden;
    padding-right: 5px;
    margin-right: 5px;
    border-right: 1px dashed #000;
/*  padding-top: 5px; */
    margin-top: 5px;
}

#bigpic_inner { /* for home page */
    float: left;
    width: 420px;
    height: 425px;
    background: #fff;
    overflow: hidden;
    padding-right: 5px;
    margin-right: 5px;

}

/* @group Portfolio Pages */

#projectwindow { /* for portfolio subpage */
    float: left;
    padding: 0px;
    width: 475px;
    background: #fff;
    border-right: 1px dashed #000;
    height: 477px;
    position: relative;
}

#projectwindow_new { /* for portfolio subpage */
    float: left;
    padding: 0px;
    width: 475px;
    background: #fff;
    border-right: 1px dashed #000;
    height: 511px;
    position: relative;
}

#projectwindow_inner { /* for portfolio subpage */
    position: relative;
    float: left;
    padding: 0px;
    width: 474px;
    background: #fff;
    height: 477px;
    overflow: hidden;
}

#controls { 
	z-index: 1000; 
	position: absolute; 
	top: 0; left: 0; 
	display: none;
    background-color: #eee; 
    border: 1px solid #ddd; 
    margin: 0; 
    padding: 6px; 
    width: 218px;
}

#controls2 { 
/*	z-index: 1000; 
	position: absolute;
    border: 1px solid #fff; 
	top: 200px; left: 0px; */
    margin: 0px; padding: 0px; 
    width: 468px;
    height: 30px;
}

.leftcontrol {float: left; position: relative; }
.rightcontrol {float: right; position: relative; }

#controls span, #controls2 span { margin: 0 5px; }

.projectthumb { width: 153px; height: 153px; border-right: 1px solid #999; border-bottom:1px solid #666; }
.albumfiller { width: 153px; height: 153px; background: url(/img/common/blank_2.jpg) center center; overflow: hidden; border-right: 1px solid #fff; border-bottom:1px solid #fff;}

#slideshow { /* big wide window for project slideshow */
    padding: 0px;
    width: 785px;
    background: #fff;
    height: 420px;
    overflow: hidden;
}

#slideshowcaption { height: 30px; width: 270px; background: #fff; text-align: left; margin-left: 22px;}

#slidetext { 
	width: 785px;
	border-bottom: 1px dashed #000;
	height: 67px;
	margin-bottom: 5px;
}

#slidetext.murals { 
	background: url(../img/headlines/murals.gif) no-repeat top left;
	text-align: left;
}

#slidetext.public {
	background: url(../img/headlines/communityandpublicart.gif) no-repeat top left;
	text-align: left;
}

#slidetext.education {
	background: url(../img/headlines/education.gif) no-repeat top left;
	text-align: left;
}

#slidetext.misc {
	background: url(../img/headlines/miscwork.gif) no-repeat top left;
	text-align: left;
}

/* @end */

#bigpic_2ndary { /* for the 'static pages' */
    float: left;
    padding: 0px;
    width: 266px;
    height: 420px;
    background: #fff;
    border-right: 1px dashed #000;
    overflow: hidden;
}

#bigpic_2ndary_inner { /* for the 'static pages' */
    padding: 0px;
    width: 260px;
    height: 420px;
    background: #000;
    color: #fff;
    overflow: hidden;
}

#news, #text { /* news is home page, text is portfolio section page */
    float: right;
    text-align: left;
    padding: 3px 3px 3px 0px;
    width: 295px;
	background: #fff;
	overflow: hidden;
	color: #888;
	font-size: .8em;
/*	border: 1px solid #eee; */
}

#news {height: 430px;}
#newsboxes {height: 357px; overflow: auto;}

#text {height: 511px; width: 305px;}

#text .entry {width: 300px; }

#staticpart { /* text area for the static pages */
    float: right;
    text-align: left;
    width: 517px;
    height: 420px;
	overflow: hidden;
	background: #fff;
	color: #888;
	font-size: .8em;
}

#footer { 
	width: 785px;
	clear: both;
	border-top: 1px dashed #000;
	border-bottom: 1px dashed #000;
	background: #fff;
	padding: 5px 0px 5px 0px;
	margin-top: 3px;
}

#innerfooter {
	width: 100%;
	padding-top: 6px;
	padding-bottom: 6px;
	background: #c00;
	color: #fff;
	font-size: .8em;
}

/* @end */

/* @group headlines */
 
h2 {width: 510px; height: 65px; margin-bottom: .1em; padding-bottom: 5px; border-bottom: 1px dashed #000;}
h3 {width: 138px; height: 35px; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px dashed #000; border-top: 1px dashed #000;}

h2 span { display: none; }
h3 span { display: none; }
h4 span { display: none; }
	 
h2.news2 { background: url(../img/headlines/news_lc.gif) no-repeat top left;}
h2.news { background: url(../img/headlines/news.gif) no-repeat top left;}
h2.about { background: url(../img/headlines/aboutmulderstudios.gif) no-repeat top left;}
h2.detail { background: url(../img/headlines/miscwork.gif) no-repeat top left;}
h2.miscwork { background: url(../img/headlines/miscwork.gif) no-repeat top left;}
h2.ianmulder { width: 217px; background: url(../img/headlines/ianmulder.gif) no-repeat top left;}
h2.education { background: url(../img/headlines/education.gif) no-repeat top left;}
h2.press { background: url(../img/headlines/mulderstudiosinthepress.gif) no-repeat top left;}
h2.commissioned { background: url(../img/headlines/commissionedwork.gif) no-repeat top left;}
h2.community { height: 51px; background: url(../img/headlines/communityandpublicart.gif) no-repeat top left;}
h2.services { background: url(../img/headlines/services.gif) no-repeat top left;}
h2.contact { background: url(../img/headlines/contact.gif) no-repeat top left;}
h2.portfolio { background: url(../img/headlines/portfolio.gif) no-repeat top left;}
h2.murals { background: url(../img/headlines/murals.gif) no-repeat top left;}

h3.contact_small { margin-top: 3px; background: url(../img/headlines/contact_small.gif) no-repeat top left; background-position: 0px 3px;}

h4.thisimage {margin-top: 3px; background: url(../img/common/thisimage.gif) no-repeat top left; width: 103px; height:29px;}
h4.casestudytitle {color: #999;}
 
/* @group Headline and Text Formats */

#header h1 span {display: none;}

h1 { 
	font-size: 3em;
	font-family: "Helvetica Neue", Arial, verdana, sans-serif;
}

h2 { 
	font-size: 4em;
	font-family: "Helvetica Neue", Arial, verdana, sans-serif;
}

#content h2 {
	margin-left: 6px;
	text-transform: lowercase;
}

#content h4 {
	margin: 6px 0em 0em 6px;
	font-size: 1.5em;
	color: #000;
}

#content h5 {
	margin: 1em 0em 0em 6px; 
}


#content h6 {
	margin: 1em 0em 0em 1em; 
}

/* @end */


/* @group entries */

.newsentry {
	border-bottom: 1px dashed #000;
	margin-top: 0px;
	padding-bottom: 5px;
	margin-bottom: 3px;
}

.entry p {
	margin: .5em 1em 1em 5px; 
	line-height: 1.3em;
}

.newsentry p {
	margin: .2em 0em .2em 0em;
	line-height: 1.3em;
}

.entry ul, .newsentry ul {
	margin: .2em 1em 1em 10px;
	line-height: 1.3em;
}

.entry_head, .newsentry_head {
	font-family: "Trebuchet MS", Verdana, Arial;
	font-weight: bold;
	font-size: 1.1em;
	line-height: 1.2em;
	padding-bottom: .2em;
}

/* @group About Page */

#aboutleft { /* about page - contact column */
    float: left;
    padding: 0px;
    width: 143px;
    height: 502px;
    background: #fff;
    border-right: 1px dashed #000;
    overflow: hidden;
    color: #888;
	font-size: .7em;
}

#aboutmiddle { /* about page - middle */
    float: left;
    padding: 0px;
    width: 233px;
    height: 502px;
    background: #fff;
    border-right: 1px dashed #000;
    overflow: hidden;
    margin-right: 3px;
    color: #888;
	font-size: .8em;
}

#aboutright { /* about page - right */
    float: right;
    padding: 0px;
    width: 400px;
    height: 502px;
    background: #fff;
    overflow: hidden;
    margin-left:3px;
    color: #888;
	font-size: .8em;
}

#aboutright_text {
	float: right;
	width: 178px;
	margin: 0px;
	padding: 0px;
	padding-left: 5px;
	border-left: 1px dashed #000;
}

#bigpic_about { /* adjust the widths for the about pic */
    float: left;
    padding: 0px;
    width: 200px;
    height: 420px;
    background: #fff;
    overflow: hidden;
}


#ianpic { 
	background: #000;
	width:138px;
	height:180px;
	margin-bottom: 5px;
	overflow: hidden; 	
}

.entryabout, .entryaboutmiddle {
	margin: 0px; padding: 0px;
	border-bottom: none;
}

.entryabout p {
	margin: 0px; padding: 0px;
	line-height: 1.3em;
}

.entryaboutmiddle p {
	margin: 0px; padding: 0px 5px 0px 6px;
	line-height: 1.3em;
}

.entryabout ul, .entryaboutmiddle ul {
	line-height: 1.3em;
}

.entryabout_head {
	font-family: "Trebuchet MS", Verdana, Arial;
	font-weight: bold;
	font-size: 1.1em;
	padding-bottom: .2em;
}

/* @end */

/* @group Galleries */

#thumbnails_projects, #thumbnails_detail, #thumbnails_lrg {
    width: auto;
    padding: 0px;
    text-align: center;
}

#thumbnails_projects caption, #thumbnails_detail caption, #thumbnails_lrg caption {
    margin-top: 10px;
}

#thumbnails_projects ul, #thumbnails_detail ul, #thumbnails_lrg ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

#thumbnails_projects li {
    float: left;
    position: relative;
    display: inline;
    width: 153px;
    min-height: 153px;
    _height: 153px; /* Terrible underscore hack for IE because min-height won't work - grrrr! */
    margin-right: 4px;
    margin-bottom: 4px;
    padding: 0px;
    text-align: center;
    overflow: hidden;
	/* border: 1px solid #111; */
}

#thumbnails_detail li {
    float: left;
    position: relative;
    display: inline;
    width: 233px;
    min-height: 125px;
    _height: 125px; 
    margin: 3px;
    padding: 0px;
    text-align: center;
	overflow: hidden;
}

#thumbnails_lrg li {
    float: left;
    position: relative;
    display: inline;
    width: 180px;
    min-height: 95px;
    _height: 95px;
    margin: 0px;
    padding: 0px;
    text-align: center;
	overflow: hidden;
}

#thumbnails_lrg ul:after, #thumbnails_detail ul:after, #thumbnails_projects ul:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
}

#thumbnails_lrg li br, #thumbnails_detail li br, #thumbnails_projects li br {
	display: block;
	height: 0;
}


/* @group jScrollPane CSS */

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #eee;
}

.jScrollPaneDrag {
	position: absolute;
	background: #aaa;
	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 */

/* @group jCarousel */

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 75px;
    height: 75px;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}

.jcarousel-skin-tango .jcarousel-container {
/*    -moz-border-radius: 10px; */
/*    background: #F0F6F9; */
/*    border: 1px solid #346F97; */
}

.jcarousel-skin-tango .jcarousel-container-horizontal {
    width: 785px;
    padding: 0px 39px 0px 38px;
}

.jcarousel-skin-tango .jcarousel-clip-horizontal {
    width:  782px;
    height: 142px;
}

.jcarousel-skin-tango .jcarousel-item {
    width: 75px;
    height: 75px;
}

.jcarousel-skin-tango .jcarousel-item-horizontal {
    margin-right: 10px;
}

.jcarousel-skin-tango .jcarousel-item-placeholder {
    background: #fff;
    color: #000;
}

/**
 *  Horizontal Buttons
 */
.jcarousel-skin-tango .jcarousel-next-horizontal {
    position: absolute;
    top: 5px;
    right: 8px;
    width: 32px;
    height: 128px;
    cursor: pointer;
    background: transparent url(/img/common/next-horizontal2.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-next-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal {
    position: absolute;
    top: 5px;
    left: 4px;
    width: 32px;
    height: 128px;
    cursor: pointer;
    background: transparent url(/img/common/prev-horizontal2.png) no-repeat 0 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
    background-position: -32px 0;
}

.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
    background-position: -64px 0;
}

.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
    cursor: default;
    background-position: -96px 0;
}


/* @group InfoBox - hovering overlay over the main image */

.infobox {
	position:relative;
}
    
.infobox img {
	position:relative;
	z-index:1;
    }
    
.infobox .more {
	display:none;
    }
.infobox:hover .more {
	display:block;
    position:absolute;
    z-index:2;
    left:-1px;
    top:300px;
    width:350px;
    height:60px;
    padding:5px 85px 5px 5px;
    background: url(/img/common/visitbar.png) no-repeat;
    color: #000;
    font-size:.8em;
    }

/* @end */    

/* @group Credits and Misc */

.albumfiller { width: 140px; height: 140px; background: url(/img/blanks/cement_blank.jpg) center center; overflow: hidden;}

#credits {
	font-size: .7em;
	color: #ccc;
	margin: 10px;
	text-align: center;
}

/* @end */

/* @group Link Appearance */

#innerfooter a:link {color: #fff; text-decoration: none;}
#innerfooter a:visited {color: #fff; text-decoration: none;}
#innerfooter a:hover {color: #fff; text-decoration: none; border-bottom: 1px dashed #fff;}
#innerfooter a:active {color: #fff; text-decoration: none; border-bottom: 1px solid #fff;}

#thumbnails_projects a:link {border: 0px; text-decoration: none;}
#innerfooter a:visited {border: 0px; text-decoration: none;}
#innerfooter a:hover {color: #fff; text-decoration: none; border-bottom: 1px dashed #fff;}
#innerfooter a:active {color: #fff; text-decoration: none; border-bottom: 1px solid #fff;}

#credits a:link, #credits a:visited {color: #ccc; text-decoration: none; font-weight: bold;}
#credits a:hover, #credits a:active {color: #c00; text-decoration: none; border-bottom: 1px dashed #c00; font-weight: bold;}

a.leftcontrol, a.rightcontrol {display: block; width: 52px; height:30px; text-decoration: none;}
a.leftcontrol span, a.rightcontrol span {display: none;} 

a.leftcontrol {background: url(/img/nav/mural_prev.png) no-repeat; text-decoration: none; border-bottom: none;}
a.rightcontrol {background: url(/img/nav/mural_next.png) no-repeat; text-decoration: none; border-bottom: none;}

a.leftcontrol:hover {background: url(/img/nav/mural_prev.png) no-repeat; text-decoration: none; border-bottom: none; background-position: 0px -30px;}
a.rightcontrol:hover {background: url(/img/nav/mural_next.png) no-repeat; text-decoration: none; border-bottom: none; background-position: 0px -30px;}

/* @end */