#once { clear: left; }
/* last of the default styles are above */


* { margin: 0; padding: 0; }

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    font-size: 12px;
    line-height: 16px;
    color: black;
    background: url(images/bg.gif) left repeat-y #eff0f4;
    background-color: #ddd;
}

/* body.page-1 { background: url(images/PROFILOGRAPHY_SPLASH_005.jpg) top left repeat-y; }
body.page-1 img { position: relative; top: 3px; } */

/* uncomment the following rule to check if 16px vertical rhythm is preserved */
/*body, #menu, #content {background-image:url(images/16.gif); } #content .text { background-color: transparent !important; } */

h1 { font-size: 32px; line-height: 48px; }
h2 { font-size: 24px; line-height: 32px; }
h3 { font-size: 16px; line-height: 16px; }
h4 { font-size: 12px; line-height: 16px; }

a { text-decoration: none; }
a img { border: none; }

img { height: auto; width: auto; }

.clickable { cursor: pointer; }

#menu {
    width: 220px;
    color: white;
    background-color: #a8317a;
    float: left;
    font-size: 11px;
}
#menu  > * {
    margin: 0 20px;
}
#menu a { color: white; }
#menu a:visited { color:#ddd; }
#menu p, #menu ul { margin-bottom: 16px; }
#menu ul { list-style: none; }
#menu .section-title { border-bottom: 1px solid white;  font-style: italic; line-height: 15px; position: relative; top: -2px}
#menu .expandable { background-color: blue }
#menu p:first-child { margin-right: 0; line-height: 48px; margin-bottom: 0; font-size: 18px; }
#menu p:last-child { font-size: 9px;  }


#content {
    background-color: #eaeaea;
    background-color: transparent;
    margin: 0em 2em 2em 236px;
    width: 708px;
}
#content > * { margin: 0; }
#content div.text { background-color: white; padding: 16px;}
#content div.text > * { margin: 16px 0; }
#content div.text :first-child { margin-top: 0; }
#content div.text :last-child { margin-bottom: 0; }

#content h1 {
    height: 32px;
    font-size: 16px;
    line-height: 32px;
    font-weight: normal;
    padding: 0 16px 0 0;
    width: 356px;
    background-color: white;
    float: right;
    text-align: right;
}

.thickbox_point .text { clear: right; }

.thickbox_point #content #img-container { overflow: hidden; padding-top: 16px; margin: 0 0 16px -12px; position: relative; top: 4px; }
.thickbox_point #content #img-container .image { display: block; float: left; overflow: hidden; margin: 0 0 12px 12px; width: 68px; height: 68px; }
.thickbox_point #content #img-container .image img { margin-left: -24px; }

.thickbox_point #content #img-container.hasShortLastRow { margin-bottom: -24px }
.thickbox_point #content #img-container.hasShortLastRow + h1 + div p:first-child { margin-top: 8px }

/* image replacement */

@media screen
{
    .images-on #menu ul li.section-title,
    .images-on #menu p:first-child,
    .images-on #content h1 { background-repeat: no-repeat; text-align: left; text-indent: -9999px; }
    
    .images-on #menu ul li.section-title { background-position: -2px 0; }    
    .images-on #menu p:first-child { background-image: url(images/logo.png); background-position: 0 15px; }    
    .images-on #menu_Info { background-image: url(images/info.png); }
    .images-on #menu_Projects { background-image: url(images/projects.png); }
    .images-on #menu_In-Process { background-image: url(images/in_process.png); }
    .images-on #menu_Lectures { background-image: url(images/lectures.png); }
    .images-on #menu_Blogs { background-image: url(images/blogs.png); }
    .images-on #menu_Press { background-image: url(images/press.png); }
 
 
    .images-on #content h1 { background-position: 88px 6px }
    
    .images-on .page-4  #content h1 { background-image: url(images/project-banners-strange-weather.png); }     
    .images-on .page-3  #content h1 { background-image: url(images/project-banners-parallel-projection.png); }
    .images-on .page-13 #content h1 { background-image: url(images/project-banners-100ft-mnemonic.png); }
    .images-on .page-29 #content h1 { background-image: url(images/project-banners-memento-mori.png); }
    .images-on .page-10 #content h1 { background-image: url(images/project-banners-topophotogram.png); }
    .images-on .page-5  #content h1 { background-image: url(images/project-banners-profilograph-muybridge.png); }
    .images-on .page-6  #content h1 { background-image: url(images/project-banners-profilograph-durer.png); }
    .images-on .page-36 #content h1 { background-image: url(images/project-banners-incident-angles.png); }
    .images-on .page-11 #content h1 { background-image: url(images/project-banners-prospects.png); }
    .images-on .page-12 #content h1 { background-image: url(images/project-banners-untitled-dance.png); }
    .images-on .page-16 #content h1 { background-image: url(images/project-banners-stereoviews.png); }    
    .images-on .page-14 #content h1 { background-image: url(images/project-banners-tees-anamorphosis.png); }
    .images-on .page-24 #content h1 { background-image: url(images/project-banners-sectional.png); }
    .images-on .page-8  #content h1 { background-image: url(images/project-banners-keepingup.png); }
    .images-on .page-9  #content h1 { background-image: url(images/project-banners-bicamera.png); }      
    .images-on .page-7  #content h1 { background-image: url(images/project-banners-stuff.png); }    
    .images-on .page-15 #content h1 { background-image: url(images/project-banners-fourthwall.png); }

    .images-on .page-18 #content h1 { background-image: url(images/project-banners-message-board.png);}
    .images-on .page-23 #content h1 { background-image: url(images/project-banners-drawing-machines.png);}
    .images-on .page-22 #content h1 { background-image: url(images/project-banners-catoptric-cistulae.png);}
    .images-on .page-17 #content h1 { background-image: url(images/project-banners-richardIII.png);}
    .images-on .page-25 #content h1 { background-image: url(images/project-banners-ars-in-luna.png);}
	
	.images-on .page-43 #content h1 { background-image: url(images/project-banners-tees-blindspot.png);}
	.images-on .page-42 #content h1 { background-image: url(images/project-banners-tees-near-far.png);}
	.images-on .page-41 #content h1 { background-image: url(images/project-banners-tees-afterimage.png);}
	.images-on .page-46 #content h1 { background-image: url(images/project-banners-high-point-park.png);}
	
	.images-on .page-44 #content h1 { background-image: url(images/project-banners-strangeweather-i.png);}
	.images-on .page-40 #content h1 { background-image: url(images/project-banners-strangeweather-ii.png);}

    .images-on .page-49 #content h1 { background-image: url(images/project-banners-conflictkitchen.png);}

.images-on .page-52 #content h1 { background-image: url(images/project-banners-highspeedbooth.png);}
.images-on .page-55 #content h1 { background-image: url(images/project-banners-2010watson.png);}
.images-on .page-53 #content h1 { background-image: url(images/project-banners-2011watson.png);}

.images-on .page-56 #content h1 { background-image: url(images/project-banners-passport.png);}

    .images-on .page-34 #content h1 { text-indent: 0 ; text-align: right; }
}