/* ###############
##################
PORTFOLIO */



/* portfolio items */

body#portfolio #page-intro { display: none; }

body#portfolio #page-middle { padding-top: 0; margin-bottom: 60px; }

#portfolio-items div.region { padding: 0; clear: both; margin: 60px 0 60px 0; position: relative; border: 0;
-moz-border-radius: 3px;
-webkit-border-radius: 3px; }

#portfolio-items div.selected { margin-top: 10px; }

#portfolio-items .item { padding: 0 40px; position: relative; }

#portfolio-items h2 { font-size: 24px; padding: 40px 0 10px 0; line-height: 22px;  }

#portfolio-items h2 em { font-weight: normal; color: #666; font-size: 18px; }

#portfolio-items .role { padding: 0; float: left; display: inline; }
#portfolio-items .role li { padding: 2px 6px; margin: 0 1em 0 0; list-style: none; font-size: 13px; line-height: 22px; font-family: Helvetica Neue, Helvetica, Arial; float: left; display: inline; background: #e6e2d5; 
-moz-border-radius: 3px;
-webkit-border-radius: 3px; }

#portfolio-items .role .myrole { background: transparent; padding: 2px 0; font-weight: bold; color: #666; font-size: 11px; text-transform: uppercase; }

/* view buttons */

#portfolio-items .view { float: right; display: inline; padding: 0; clear: both; margin: 20px 0 0 0; }
#portfolio-items .view li { float: right; display: inline; padding: 0 0 0 10px; position: relative; z-index: 8; }
#portfolio-items .view li a { font-weight: bold; font-size: 14px; line-height: 28px; background: #e6e2d5; float: right; display: inline; padding: 0 10px; text-shadow: 1px 1px 1px #fff; border: 1px solid #e6d8bf; border-bottom: 0; color: #0c75ce;
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px; }

#portfolio-items .view .sample a { background: #181818; border-color: #111; color: #5CB1E6; text-shadow: 1px 1px 3px #000; text-decoration: none; }

#portfolio-items div.viewed .view .sample a { color: #395D73; }

#portfolio-items .hovered .view .sample a,
#portfolio-items .view a:hover { color: #fff; background: #0f5376; text-shadow: 1px 1px 1px #111b29; border-color: #004060; }

#portfolio-items .selected .close-preview a { background: #ff4800; color: #fff; text-shadow: 1px 1px 3px #ff4800; border: 1px solid #f2eee1; padding: 0 25px; line-height: 40px; height: 40px; margin-top: -6px; margin-bottom: -8px; text-decoration: none; text-transform: uppercase;
-moz-border-radius: 3px;
-webkit-border-radius: 3px; }

#portfolio-items .selected .close-preview a:hover { background: #181818; color: #ff4800; border-color: #181818; text-shadow: 1px 1px 3px #000; }


/* graphic */

#portfolio-items .interactive-content { margin: 0 -40px 0 -40px; padding: 0; position: relative; width: 960px; clear: both; background: #181818; 
-moz-border-radius-bottomleft: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px;}

#portfolio-items .graphic { clear: both; margin: 20px 0 0 0; position: relative; }

#portfolio-items .graphic a { display: block; margin: 0; border-width: 10px 20px; border-color: #181818; border-style: solid; overflow: hidden; width: 920px; height: 140px; 
-moz-border-radius-bottomleft: 3px; text-decoration: none;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-webkit-border-bottom-right-radius: 3px; }

#portfolio-items .hovered .graphic a,
#portfolio-items .graphic a:hover { border-color: #0f5376; background: #093a68 url(../img/blue-bground.jpg) 0 0; }

#portfolio-items .graphic span { float: left; display: inline; width: 328px; height: 85px; padding: 34px 20px 19px 19px; text-shadow: 1px 1px 3px #111; color: #f2eee1; font-family: Vollkorn; font-size: 18px; line-height: 1.6em; border: 1px solid transparent; border-right: 0; }


#portfolio-items .graphic a img { margin: 0; padding: 0; float: right; display: inline; width: 551px; height: 140px; border: 1px solid transparent; border-left: 0;}


#portfolio-items .hovered .graphic span,
#portfolio-items .graphic a:hover span,
#portfolio-items .hovered .graphic img,
#portfolio-items .graphic a:hover img { border-color: #115c82; }

/* extended graphic */

#portfolio-items .extended { position: relative; z-index: 4; left: 20px; width: 920px; display: block; margin: 0 0 0 0; padding: 20px 0; }

#portfolio-items .extended { display: none; }


/* item-specific rules */

#page-middle div.viewed { background: #DEDCD7; color: #999; margin-top: 10px; margin-bottom: 10px; text-shadow: 1px 1px 3px #DEDCD7; }
#page-middle div.viewed h2 { padding-top: 20px; }
#page-middle div.viewed h2,
#page-middle div.viewed h2 em,
#portfolio-items div.viewed .role .myrole { color: #999; }
#portfolio-items div.viewed .role li { background: transparent; }
#portfolio-items div.viewed .view { margin-top: -10px; }
#page-middle div.viewed .graphic span { color: #bbb; }

#toktok { display: none !important; }