/* ------------------------------------------------------------
Title: "Lace de GordeonBleu"
By: Gordon Mei - http://www.ocf.berkeley.edu/~gordeon
Creation Date: July 2007
Last Updated: May 23, 2010
------------------------------------------------------------ */

* {margin:0; padding:0; font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Arial",sans-serif; font-weight:300;}

body {background-color:#d7d7d7; background:url(/gordon/grannywallpaper.png) repeat-y top center; text-align:center;}
a:link {color:#a5a4d4; text-decoration:underline; font-weight:bold;}
a:visited {color:#993333; text-decoration:underline;}
a:active {color:#333; text-decoration:none;}
a:hover {color:#555; text-decoration:line-through;}

a img {border:0;}
p {margin:1em 0;}

a.pinklink:link {color:#e5b4d4; font-weight:bold;}
a.pinklink:visited {color:#e5b4d4; font-weight:bold;}
a.pinklink:active {color:#e5b4d4;}
a.pinklink:hover {color:#aaccff; border-bottom:1px dotted #e5b4d4; text-decoration:none;}

h1 a, h2 a, h3 a {font-weight:bold;}

h2, h2 a, h2 a:visited {color:#333; font-size:16pt; font-weight:bold; text-shadow:#fff 0 2px 0; text-align:center; text-decoration:none;}
h2 span {display:block; font-size:11pt;}
/* h2 {color:#555; font-size:14pt; letter-spacing:-1px; font-weight:bold; text-shadow:#fff 0 1px 0;} */
h3, h3 label {color:#777; font-size:13.5pt; letter-spacing:-1px; padding:0.2em 0 0.5em 0; font-weight:bold; text-shadow:#fff 0 1px 0;}
h4 {text-transform:uppercase; font-size:10pt; font-weight:bold; text-shadow:#fff 0 1px 0;}
h5 {text-transform:uppercase; font-size:9pt; letter-spacing:1px; color:#777;}
h6 {text-transform:uppercase; font-size:9pt; letter-spacing:1px; margin:0; padding:0 0 2px 0; color:#555;}

hr {clear:both; background-color:#dfdfdf; color:#dfdfdf; border:0; margin:20px 0 20px 0; padding:0; height:1px; width:738px;}


/* Layout */
/* keep everything from spilling over sheet */
#containyourself, .containyourself {margin:0 auto 0 auto; text-align:center; width:778px; padding:0; font-size:11pt;}

/* artificial padding to keep from edges of sheet, and keep content blocks centered */
.centerwrapper {margin-left:auto; margin-right:auto; text-align:center; width:738px; padding:0;}
.centerwrapper p {text-align:left;}

/* align content left */
.centerstage {margin-left:auto; margin-right:auto; text-align:left; width:738px; padding:0;}

.leftwing {text-align:left;}

#boxupper{background: url(/gordon/announcetop.png) no-repeat; width:701px; height:61px; border:0; padding:0; margin:40px auto 0 auto;}
#boxmiddle{background: url(/gordon/announcebkgd.png) repeat-y; width:701px; height:auto; border:0; padding:0px; margin:0 auto 0 auto;}
#boxmiddlenested{color:#2f4f4f; padding:50px; text-align:left;}
#boxmiddlenested h3 {color: #111; font: 18px "Century Gothic","Myriad Pro","Trebuchet MS","Trebuchet",verdana,helvetica,sans-serif; letter-spacing: -1px; padding-bottom: 15px;}
#boxmiddlenested a {font-weight:bold;}

#boxlower{background: url(/gordon/announcebottom.png) no-repeat; width:701px; height:40px; border:0; padding:0; margin:0 auto 0 auto;}

#banner, .banner {margin:2em auto 0 auto; text-align:center; width:778px; padding:0; color: #eee; background: #eee url(/gordon/headerornament.png) no-repeat top center; height:60px; color:#000;}

#sosumi {clear:both; margin:2em 0 1em 0;}
#sosumi a:hover {text-decoration:none; color:#abc;}
#sosumi, #sosumi a, #sosumi p, #sosumi p a {font-size:10pt;}
#sosumi p, #sosumi p a {color:#999; font-style:italic;}


/* Navigation */
#menubox {background:#d7d7d7 url(/gordon/tabularbkgd.png) 0px 1px repeat-x; width:100%; height:55px; position:relative; border-bottom: 5px solid #fff;}
#iconmenu {position:absolute; right:70px; top:0px; margin:0px auto; padding:0px; width:450px; height:55px; background-color: #d7d7d7;}
#iconmenu li {width: 58px; height: 55px; position: absolute; top: 0px; background: #d7d7d7 url(/gordon/tabular.png) 0 0 no-repeat; display: block; list-style: none;}

#iconmenu a {width: 58px; height: 55px; display: block; border: none; text-indent: -9999px;}

#iconmenu #home {left: 0px; background-position: 0px 0; width:75px;}
#iconmenu #comics {left: 75px; background-position: -75px 0;}
#iconmenu #motion {left: 133px; background-position: -133px 0;}
#iconmenu #photos {left: 191px; background-position: -191px 0;}
#iconmenu #journal {left: 249px; background-position: -249px 0;}
#iconmenu #lab {left: 307px; background-position: -307px 0;}
#iconmenu #about {left: 365px; background-position: -365px 0;}
#iconmenu #contact {left: 423px; background-position: -423px 0; width:75px;}

#iconmenu #homeon {left: 0px; background-position: -0px -55px; width:75px;}
#iconmenu #comicson {left: 75px; background-position: -75px -55px;}
#iconmenu #motionon {left: 133px; background-position: -133px -55px;}
#iconmenu #photoson {left: 191px; background-position: -191px -55px;}
#iconmenu #journalon {left: 249px; background-position: -249px -55px;}
#iconmenu #labon {left: 307px; background-position: -307px -55px;}
#iconmenu #abouton {left: 365px; background-position: -365px -55px;}
#iconmenu #contacton {left: 423px; background-position: -423px -55px; width:75px;}

#iconmenu #home a:hover {background: url(/gordon/tabular.png) 0px -55px no-repeat; width:75px;}
#iconmenu #homeon a:hover {background: url(/gordon/tabular.png) 0px -55px no-repeat;}
#iconmenu #comics a:hover {background: url(/gordon/tabular.png) -75px -55px no-repeat;}
#iconmenu #motion a:hover {background: url(/gordon/tabular.png) -133px -55px no-repeat;}
#iconmenu #photos a:hover {background: url(/gordon/tabular.png) -191px -55px no-repeat;}
#iconmenu #journal a:hover {background: url(/gordon/tabular.png) -249px -55px no-repeat;}
#iconmenu #lab a:hover {background: url(/gordon/tabular.png) -307px -55px no-repeat;}
#iconmenu #about a:hover {background: url(/gordon/tabular.png) -365px -55px no-repeat;}
#iconmenu #contact a:hover {background: url(/gordon/tabular.png) -423px -55px no-repeat; width:75px;}


/* General Form Styling */
input, textarea {font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Lucida Sans Unicode","Segoe UI","MS Sans Serif","Arial",sans-serif; font-weight:300;}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea, .textfield {display:block; margin:0.5em 0; padding:0.3em; background:url("/gordon/formfieldbkgd.gif") no-repeat scroll top left transparent; border:1px solid #e2e2e2;}

textarea {border-radius:0.5em; -moz-border-radius:0.5em; -webkit-border-radius:0.5em;}

textarea:focus {outline:0;}

input[type="text"]:hover, input[type="password"]:hover, textarea:hover, select:hover {background-color:#eeeeee}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus {background-color:#eceeec}

input[type="submit"], input[type="button"], input[type="reset"], button {margin:0; padding:0.3em 0.7em; border:1px solid #cfd6d9; border-radius:20px; -moz-border-radius:20px; -webkit-border-radius:20px; background-color:#fff; background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#e3e7ef)) !important; background:-moz-linear-gradient(top, #fff, #fff, #e3e7ef) !important; text-shadow: #fff 0 1px 0;}

input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, button:hover {cursor:pointer; background-color:#cf9; background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff), color-stop(0.5, #e3e7ef)) !important; background:-moz-linear-gradient(top, #fff, #e3e7ef, #fff) !important;}

#spyglass {margin:1em auto 0 auto; width:300px;}
#spyglass input {display:inline; font-size:10pt;}
#spyglass input[type="submit"] {font-size:10pt;}

#searchinput {margin:0 auto; padding:0.3em 0.6em; border:1px solid #ddd; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; width:300px; font-size:14pt;}
label#souplabel {margin:0 0.5em 0 0;}


/* Formatting */
.strike {text-decoration:line-through;}


/* Display */
.crouchingtigress {display:inline;}
.crouchingtiger {display:block;}
.hiddendragon {display:none;}


/* Animations */
.pulse {-webkit-animation-direction:alternate; -webkit-animation-duration:1s; -webkit-animation-iteration-count:infinite; -webkit-animation-name:glow; color:#e08;}
@-webkit-keyframes glow { 0% {color:#000;} 100% {color:#e08;} }


/* Landing Page */
#pagelanding h1 {margin-top:1em !important; text-indent:-9999px;}
#pagelanding .tabbycat {margin:1em auto 0 auto; width:680px; height:31px;}
#pagelanding .tabbycat li {float:left; list-style-type:none;}
#pagelanding .tabbycat li a {display:block; margin-right:1px; width:167px; height:31px; line-height:33px; text-align:center; border-width:1px 1px 0 1px; border-style:solid; border-color:#e5e5e5; border-top-left-radius:10px; border-top-right-radius:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; background-color:#e9edf1; text-decoration:none; font-weight:bold;}
#pagelanding .tabbycat a:hover {color:#892e2e;}
#pagelanding .tabbycat a.current {cursor:pointer; color:#333; background-color:#eef1f2; line-height:34px;}

#pagelanding .deckscontained {clear:both; margin:0 auto; padding-top:10px; width:704px; height:490px; border:1px solid #e5e5e5; border-bottom-right-radius:20px; border-bottom-left-radius:20px;-webkit-border-bottom-right-radius:20px; -webkit-border-bottom-left-radius:20px; -moz-border-radius-bottomright:20px; -moz-border-radius-bottomleft:20px; background-color:#e9edf1;}
#pagelanding .deckedout {position:relative; overflow:hidden; margin:0 auto; width:680px; height:480px; text-align:left; border-radius:12px; -webkit-border-radius:12px; -moz-border-radius:12px; background-color:#ddebf2;}
#pagelanding .deckedout div {float:left; display:block; margin:0 42px 0 39px; width:546px; background-color:#ddebf2;}
#pagelanding .deckedout .items {clear:both; position:absolute; width:20000em;}
#pagelanding .items div {float:left; width:680px;}
#pagelanding .items img {margin-left:1px; padding:3px; border:1px solid #ccc; background-color:#fff; box-shadow:0 0 2px 2px #ccc; -webkit-box-shadow:0 0 2px 2px #ccc; -moz-box-shadow:0 0 2px 2px #ccc;}
#pagelanding .pane .thumbs img:first-child {margin:0;}
#pagelanding .pane h3 {margin:1em 0 0.5em 0;}

#pagelanding .slidedots {margin:0.5em 0 0 360px;}
#pagelanding .slidedots a {float:left; display:block; margin:0 3px; background:url(navigator.png) 0 0 no-repeat; width:8px; height:8px; font-size:1px;}
#pagelanding .slidedots a:hover {background-position:0 -8px;}
#pagelanding .slidedots a.current {background-position:0 -16px;}

#pagelanding .leftyrighty {clear:both; padding-top:1em; text-align:center; width:100%;}
#pagelanding .abstract {width:540px;}

/* Panels Section */
#pagepanels #containyourself img {border:1px dashed #ccc; padding:2px; margin:0;}
#pagepanels #sosumi img {border:0;}
#pagepanels blockquote {margin:0.2em auto 0 auto;}
#panelscontainer {margin-left:auto; margin-right:auto; text-align:center; width:760px; padding:0; margin-top:20px; color: #eee;}


/* Motion Section */
.videomatted {border:1px solid #ccc; padding:3px; width:640px; background-color:#fff; margin-left:auto; margin-right:auto; text-align:center;}
#chatterbox {padding:15px 0 0 0;}


/* Gallery Section */
#pagegallerie p {text-align:center;}
#gallerygrid {clear:both; margin:0 auto; text-align:center; width:538px;}
.gallerygridrow {clear:both;}
.curledframes {background:transparent url(gallerie/bkgdframecurl240x180.png) no-repeat top left; width:269px; height:218px; margin:1em auto 0 auto; padding:10px 0 0 0; float:left;}


/* Canvas Section */
.entry-content li {margin-left:2em; list-style:square;}
.entry-content {font-size:11pt;}
.entry-content p {line-height:120%;}


/* Lab Section */
#pagelab {font:normal 11pt "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Arial",sans-serif; font-weight:300; text-shadow:#fff 0 -1px 0; color:#000;}
#labfilter {margin:0.3em 0;}


/* Profile Section */
#pageprofile h2 {display:none;}
#profileintro {margin:0 auto 1em auto; width:730px;}


/* Telegram Section */

/* temporary until overhaul for all pages */
#pagetelegram input, #pagetelegram textarea, #pagetelegram li, #pagetelegram ul {margin:0; padding:0;}

#pagetelegram .containyourself {text-align:center;}
#formula {margin-top:0.5em;}

#collegeruled {font:normal 20px "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue","Helvetica","Arial",sans-serif; font-weight:300;}

#collegeruled {position:relative; margin:0 auto !important; height:630px; width:650px; background-color:#dde; border:1px solid #ccc; padding:5px; border-width:1px; border-style:solid; border-color:#ccc; text-align:left; box-shadow:5px 5px 5px #ccc; -webkit-box-shadow:5px 5px 5px #ccc; -moz-box-shadow:5px 5px 5px #ccc;}
#collegeruled #liner {position:absolute; top:0; left:50px; width:2px; height:630px; padding:0; border:0; background-color:#f79;}
#collegeruled li {list-style:none; padding-left:60px; border-style:solid; border-color:#7bc; border-width:0 0 1px 0; height:25px; font-size:20px; line-height:25px;}
#collegeruled #headermargin {height:50px;}
#collegeruled input {display:inline; border-width:0 0 1px 0; border-style:solid; border-color:transparent; background-color:transparent; background-image:none; height:25px; font-size:20px;}
#collegeruled input[type="text"] {width:180px;}
#collegeruled input[type="email"] {width:240px;}
#collegeruled:hover input, #collegeruled input:focus, #collegeruled input:active {border-bottom:1px solid #555; background-color:transparent; outline:0;}
#collegeruled textarea {border:0; background-color:transparent; background-image:none; width:590px; height:400px; line-height:26px; font-size:20px; display:block;}
#collegeruled:hover textarea {background-color:#efe9e9; opacity:0.3; text-decoration:underline;}
#collegeruled textarea:focus, #collegeruled textarea:active {background-color:transparent; outline:0; text-decoration:none;}
#collegeruled label {display:none;}
#themessage {position:absolute;}

/* Safari needs -webkit-border-top-left and -webkit-border-bottom-left. Chrome is okay. */
#pagetelegram input[type="submit"], #sender {margin:0; padding:0.3em 0.7em; border:1px solid #cfd6d9; border-radius:0 20px 20px 0; -webkit-border-radius:0 20px 20px 0; -webkit-border-top-left-radius:0; -webkit-border-bottom-left-radius:0; -moz-border-radius:0 20px 20px 0; background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#e3e7ef)) !important; background:-moz-linear-gradient(top, #fff, #fff, #e3e7ef) !important; text-shadow: #fff 0 1px 0;}
#pagetelegram input[type="submit"]:hover, #sender:hover {cursor:pointer; background-color:#eee; background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#fff), color-stop(0.5, #e3e7ef)) !important; background:-moz-linear-gradient(top, #fff, #e3e7ef, #fff) !important;}

/* With captcha */
/*
#sender {float:left; display:block; font-size:20px; padding:9px 0.9em 9px 0.7em; height:42px; line-height:19px;}
#sendpreparation {margin:1em auto; text-align:center; width:340px; height:50px;}
#pagetelegram #labelcaptcha {display:block; margin-bottom:0.5em;}
#pagetelegram #captchaimage {float:left; border:1px solid #ccc;}
#pagetelegram #captchainput {float:left; width:90px; height:40px; font-size:20px; padding:0 3px 0 5px;}
*/

/* Without captcha */
#sendersimple {margin:1em auto 0 auto !important; width:90px; height:40px; font-size:20px; padding:0 3px 0 5px; border-radius:20px !important; -webkit-border-radius:20px !important; -moz-border-radius:20px !important;}

#validationwarning {color:#ff5c80; -webkit-animation-name:glow; -webkit-animation-duration:1s; -webkit-animation-iteration-count:infinite; -webkit-animation-direction:alternate;}
@-webkit-keyframes glow {0% {color: #000;} 100% {color: #555;}}


/* Thickbox */
#TB_window {position:fixed; z-index:102; top:50%; left:50%; display:none; border:4px double #eee; text-align:left; background:#fff;  color:#333; font-size:10pt;}
#TB_window img#TB_Image {display:block; margin:15px 0 0 15px; border:1px solid #eee;}

#TB_caption {float:left; height:25px; padding:11px 30px 10px 25px;}
#TB_secondLine {font-size:8pt; color:#666;}
#TB_prev {margin-left:1em;}
#TB_next {margin-left:0.6em; margin-right:1em;}
.TB_tip {color:#ccc; font-size:8pt;}
#TB_closeWindow {float:right; height:25px; padding:11px 25px 10px 0; text-align:right;}
#TB_closeWindow a {color:#c33;}

#TB_overlay {position:fixed; z-index:100; top:0; left:0; background-color:#000; filter:alpha(opacity=75); -moz-opacity:0.75; opacity:0.75; height:100%; width:100%;}
* html #TB_overlay {position:absolute; height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}

* html #TB_window {position:absolute; margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}

#TB_closeAjaxWindow {float:right; padding:11px 10px 5px 0; margin-bottom:1px; text-align:right;}
#TB_ajaxWindowTitle {float:left; padding:7px 0 5px 10px; margin-bottom:1px;}
#TB_title {background-color:#e8e8e8; height:27px;}

#TB_ajaxContent {clear:both; padding:2px 15px 15px 15px; overflow:auto; text-align:left; line-height:1.4em;}
#TB_ajaxContent.TB_modal {padding:15px;}
#TB_ajaxContent p {padding:5px 0px 5px 0px;}
#TB_load {position:fixed; display:none; height:13px; width:208px; z-index:103; top:50%; left:50%; margin:-6px 0 0 -104px;}

* html #TB_load {position:absolute; margin-top:expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}

#TB_HideSelect {z-index:99; position:fixed; top:0; left:0; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity:0; opacity:0; height:100%; width:100%;}
* html #TB_HideSelect {position: absolute; height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');}

#TB_iframeContent {clear:both; border:none; margin-bottom:-1px; margin-top:1px; _margin-bottom:1px;}