/* stylesheet for matthewhollett.com */

body {background-color: #828371; color: #222; font-family: Georgia, "Times New Roman", serif; text-align: center; margin: 0;}
/* font-family: Helvetica, Arial, sans-serif; */


a {text-decoration: none;}
a:link, a:visited {color: #c7b052;}
a:hover, a:active {color: #e3c444; text-decoration: underline;}
a img {border: none;}
a:hover img {border-color: #f0d66c;}
.anchor {font-size: 0; height: 0; clear: both;}

ul {list-style: none; margin: 0 0 1em 4px; padding: 0;}
ul li, .links li ul li {background: url("images/bullet-peagreen.png") 0 4px no-repeat; margin: 0; padding: 0 0 0 19px;}
ol {list-style-position: inside; margin: 0 0 1em 4px; padding: 0 0 0 4px;}
ol li {margin: 0; padding: 0 0 0 20px; text-indent: -20px;}
.menu li, .icons li, .dropdown li, .designmenu li, .thumbs li {background: none; padding: 0;}

.smallcaps {font-size: 0.9em;}

.head a:link, .head a:visited, .foot a:link, .foot a:visited {color: #ddd;}
.head a:hover, .head a:active, .foot a:hover, .foot a:active {color: #f0d66c;}
.head a:hover, .head a:active {text-decoration: none;}

div, ul, li {text-align: left; border: 0px #ddd solid;}


/* head */
.head {position: relative; width: 100%; font-size: 0.8em; font-family: "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Arial, sans-serif; padding: 2px 0 0 0; margin: 0; background-color: #2d2d2d; border-bottom: 1px #d7bf5f solid;}
.head-inside {width: 960px; position: relative; margin: 0 auto;}
.menu {position: relative; width: 800px; list-style: none; margin: 0; padding: 0; overflow: hidden;}
.menu li {float: left; position: relative; margin: 0; padding: 3px 0 5px 0; text-align: center;}
.menu li a {padding: 0 20px;}
.menu li.selected a span {padding: 0 0 1px 0; border-bottom: 4px #d7bf5f solid;}
.menu li#menu-index, .menu li#menu-index a {margin-left: 0; padding-left: 0;}
.icons {position: absolute; top: 1px; right: 1px; width: 150px; list-style: none; margin: 0; padding: 2px 0 0 0; text-align: right; z-index: 10;}
.icons li {display: inline; margin: 0 0 0 5px; padding: 0;}
.icons li a {opacity: .70; filter: alpha(opacity=70);}
.icons li a:hover {opacity: .99; filter: alpha(opacity=99);}
.email-link {background: url("images/icon-email.png") 0 0 no-repeat; padding: 0 0 16px 16px; margin: 0;}
.facebook-link {background: url("images/icon-facebook.png") 0 0 no-repeat; padding: 0 0 16px 16px; margin: 0;}
.twitter-link {background: url("images/icon-twitter.png") 0 0 no-repeat; padding: 0 0 16px 16px; margin: 0;}


/* body */
#page {position: relative; width: 960px; margin: 0 auto; overflow: hidden;}
.body {position: relative; margin: 6px 0 0 0; padding: 0; background-color: #fff; overflow: hidden;}
.bodyinside {padding: 20px; line-height: 1.3em;}
.homecolumn {float: left; width: 460px; margin: 0; padding: 0; /*border: 1px red solid;*/}


/* indexical column */
.blogcolumn {float: right; width: 446px; margin: 0 0 20px 10px; padding: 0; background: #555; /*border: 1px blue solid*/} /* was width: 392 */
.blogcolumn .blog-column-head {margin: 0; padding: 5px 15px 2px 15px; background-color: #222; border-bottom: 3px #605a52 solid; opacity: .80; filter: alpha(opacity=80);}
.blogcolumn .blog-title {font-size: 1.1em; margin: 0; padding: 4px 15px;}
.blogcolumn .blog-post-title {margin: 0 15px; padding: 2px 15px; background-color: #ccc; border-top: 1px #999 solid;}
.blogcolumn .blog-post-date {color: #fff;}
.blogcolumn .blog-post-body {margin: 0 15px 0 15px; padding: 12px 12px 30px 12px; background-color: #fff;}
.blogcolumn .blog-post-body img {border: 1px #ccc solid;}

.blogcolumn a:link, .blogcolumn a:visited {color: #c58f54;}
.blogcolumn a:hover, .blogcolumn a:active {color: #eebe60; text-decoration: underline;}


/* foot */
.foot {position: relative; clear: both; width: 960px; padding: 4px 0 0 0; margin: 0 auto; font-size: 0.75em; color: #bbb; text-align: right;}
.foot p {margin-top: 0;}


/* art and design portfolios */
.portfoliohead {position: relative; width: 960px; height: 75px; padding: 12px 0 5px 19px;}
#tagline {margin: 0 0 0 240px; font-size: 1.8em;}
#tagline .subtagline {font-size: 0.7em; color: #bbb;}
#tagline .subsubtagline {font-size: 0.75em;}
.design-available {position: relative; right: 46px; top: 18px; background: url("images/checkmark.png") 0 0 no-repeat; padding: 18px 0 40px 46px; margin: 0;}

.portfoliomenu {width: 238px; float: left; list-style: none; margin: 0 0 1em 0; padding: 0;}
.portfoliomenu li {float: left; width: 238px; font-size: 0.95em; margin: 0; padding: 0; background: url(design/images/designmenu-background.png) left bottom no-repeat; overflow: hidden; cursor: pointer;}
.portfoliomenu li span {display: block; float: left; width: 175px; padding: 2px 0 5px 25px; margin: 0; background: url('design/favicons/blank.png') 4px 4px no-repeat; opacity: .70; filter: alpha(opacity=70);}
.portfoliomenu li:hover span {opacity: .99; filter: alpha(opacity=99);}
.portfoliomenu li.portfoliomenuli-lit {background: url(design/images/designmenu-background-lit.png) left bottom no-repeat; border-bottom: 1px #ccc solid; cursor: default;}
.portfoliomenu li.portfoliomenuli-lit span {opacity: .99; filter: alpha(opacity=99);}
.portfoliomenu li span.tagline {display: none;}

.thumbs {display: none; float: left; width: 38px; list-style: none; margin: 0; padding: 0; background: #fff; z-index: 10;}
.thumbs li {width: 38px; position: relative; text-align: center; font-family: 'Helvetica'; font-size: 1em; color: #bbb; margin: 0; padding: 4px 0; background: transparent; border: 0; cursor: default;}
.thumbs li:hover {color: #222; cursor: pointer;}
.thumbs li.thumb-lit {background: #f6f6f6 url(design/images/arrow-right.png) 29px 50% no-repeat; color: #222;}
.thumbs li.thumb-lit:hover {cursor: default;}

.portfoliobody {position: relative; width: 722px; min-height: 585px; float: right; margin-bottom: 1em; font-size: 0.9em;}

.panel {display: none; clear: both; position: relative;}
.panel .slideholder {position: relative;}
.panel .textslide {height: 500px; border-left: 1px #ccc solid; padding: 0 20px 20px 20px; line-height: 1.3em; font-size: 1.3em; color: #a1a1a1;}
.panel .borderless img {border: 0;}

.panel .slide {position: relative; border: 1px #ccc solid; z-index: 2;}
.panel .caption {line-height: 1.4em; font-size: 0.9em; margin: 0; padding: 0 10px 0 1px;} /* captions */
.panel .slidefadebottom {position: absolute; left: 0; bottom: 0; border: 0; z-index: 10;}
.panel .noborder {border: 0;}

.portfoliofoot {clear: both; position: relative; width: 960px; padding: 0; margin: 0; background: #eee; border-top: 1px #ccc solid; overflow: hidden;}
.portfoliofoot .x4 {float: left; width: 25%; font-size: 0.9em;}
.portfoliofoot ul {list-style: none; padding: 0 0 1em 0; margin: 0.5em 10px 0.5em 10px;}
.portfoliofoot ul li {background: url("images/bullet-go-tan.png") 0 2px no-repeat; padding: 0 0 0 17px; margin: 0;}


/* teaching and blog */
.class-profile {float: left; width: 291px; margin: 10px 20px 10px 0; padding: 0; border: 1px #ccc solid;}
.class-profile-inside {margin: 0; padding: 10px;}
.class-image {margin-top: 10px;}
.class-image img {border: 1px #ccc solid;}
.class-date {margin-bottom: 0;}
.class-name {font-size: 0.9em; margin-top: 0;}
.class-place {font-size: 0.9em; margin-top: 0;}

.blog-profile {float: left; width: 291px; margin: 10px 20px 10px 0; padding: 0; border: 1px #ccc solid;}
.blog-profile-inside {margin: 0; padding: 10px;}
.blog-image {margin-top: 10px;}
.blog-image img {border: 1px #ccc solid;}
.blog-name {margin-top: 0;}
.blog-date {font-size: 0.9em; margin-bottom: 0;}
.blog-notes {font-size: 0.9em; margin-top: 0;}

.profile-row-last {margin-right: 0;}


/* projects */


/* links */
.links h3 {margin: 2em 0 0.5em 0; font-family: "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", Arial, sans-serif;}
.links h3:first-child {margin-top: 1em;}


/* about */