@import url(typo.css);
@import url(form.css);

/* ======================================================
Website for Gary Brouhard  version 1
Design and Build: Flia Montreal
URL:Fliawebdesign.com
========================================================*/


body { background: #f3f3f5 ; background: #efefef; /* Old browsers */
background: -moz-linear-gradient(top, #efefef 0%, #f3f3f5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#f3f3f5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #efefef 0%,#f3f3f5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #efefef 0%,#f3f3f5 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #efefef 0%,#f3f3f5 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#f3f3f5',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #efefef 0%,#f3f3f5 100%); /* W3C */
 font:14px/22px  proxima-nova ,"Helvetica Neue", helvetica,sans-serif ; color:#454545 ; border-top:15px solid #bc333e; text-shadow:0 1px 0 rgba(255, 255, 255, 0.8) ;text-rendering: optimizeLegibility; }


/*
 DEFAULTS
 ========================================================*/

.last {margin-right:0 !important;}
.sub_support {display:block;  color:#858585; font-size:90%; font-weight: 300}


img, iframe, embed{max-width:100%; }
img{display:block; margin-bottom: 22px;}

img.reg {border:1px solid #fff}
 img.thumb_small {  background:  repeat scroll 0 0 #CACACA;    display: block;    height: 80px;    margin-bottom: 18px;    width: 220px;  }

img.border{background:  repeat scroll 0 0 #CACACA; padding:10px; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px; box-shadow:inset 0 1px 0 rgba(0,0,0,.35); border:1px solid #fff;}

img.framed {margin:36px 0; border-top:1px solid #cacaca; border-bottom:1px solid #cacaca;padding:18px 0 }
.line { display: block; }

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
::-moz-selection {background: #b51723; color:#fff; text-shadow: none}
::-webkit-selection {background: #b51723; color:#fff;text-shadow: none}
.backtotop{background: url(../i/top.png) no-repeat 90% 70%; display:block; position:relative; bottom:0px; width:70px; left:93%;letter-spacing:2px;   text-align:center; text-transform: uppercase; font-size:12px;  color:#34363e !important; border:none; vertical-align: middle; text-shadow:none; color:#eee;padding-top:4px;padding-right:4px; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;}
.backtotop:hover{color:#fff;}

a{text-decoration:none; color:#B51723}
a:visited{text-decoration: none;}
a:hover {color: #34363e;}
section a:active, section a:focus{color: #34363e;}


/* BRANDING LOGO

========================================================*/

header#branding{     margin:0px 20px 0 0;     padding: 18px 0 0px 0;   width:285px; float:left; }

.row_inner {   border-bottom: 0px solid #CACACA; border-top: 0px solid #fff;   clear: both; margin-top:2px; margin-bottom: 18px; padding: 0px 0 9px 0; height:60px;  box-shadow: 0 0px 0 #FFFFFF, 0 -1px 0 #CACACA; /*background: url(../i/diago-dashed.png)*/  no-repeat 8% 50%; }
.row_inner header h1{ letter-spacing:0px; line-height:60px; }

#main { }


#meta_nav{border-top: 1px solid #CACACA;   padding-top:20px;   box-shadow: 0 -1px 0 #FFFFFF;  }


header#branding a#logo {    border-top: 1px solid #E6E8E0;    color: #31333C;    font-size: 24px;    width: 284px;}

#logo {    background: url("../i/gary_cyto_logo_NEW.png") no-repeat scroll 0 7px transparent;    display: block;    height: 110px;    text-indent: -9999px;}




/*

			Main navigation
			
==============================================================================*/

nav select {      display: none;    }

nav {position:relative; top:18px; right:0px; overflow:hidden;  }
nav ul li {margin-right:20px;  float:left; padding:15px 12px 4px 0; font-size:11px; line-height: 22px; text-transform:uppercase; letter-spacing:3px; width:128px; border-top:thin solid #e6e8e0; transition: all .3s ease-in ; -moz-transition: all ease-in .3s;-webkit-transition: all ease-in .3s;   }
nav ul li:last-child {margin-right:0;}
nav ul li a {color:#888 ; font-size: 11px; font-family: kulturista-web}
nav ul li   {font-size:14px; color:#dd0e30}
nav ul li a{ display: block}
nav ul li ul {margin-top: 10px}
nav ul li ul li  {padding:0; border:none; text-transform:capitalize;  margin-bottom:2px !important; padding-bottom:0;  line-height: 18px;}

nav ul li ul li a {margin-bottom:0; padding-bottom:0; font-size:12px; color:#9398a3;font-family:proxima-nova,"Helvetica Neue", Arial; letter-spacing:normal }

nav ul li ul li:hover {border:none;}
nav a:hover, a.on,  .nav_on {color: #34363e}

nav ul li:hover , header#branding a#logo:hover{border-top:thin solid #BABBB1}


span.nav_num {display:block}



/*

			Structure
			
==============================================================================*/

footer { background:#34363e url(../i/lab_footer_tile.png) repeat 0 0; margin-top:18px; padding: 18px 0 0 0;border-top:1px solid #2c2e33; border-bottom:20px solid #2c2e33; color:#f3fff3; text-shadow: none ;}
footer .page {padding:0;}
.page {width:940px;margin:0 auto;  position:relative; overflow: hidden;  padding:0 20px;  }
section{ padding:0px 0 0px  0; overflow: hidden; position: relative}


.col {width:220px; }
.col180{width:180px;  }
.col220{width:220px;  }

.col420{ width:420px; }
.col440{ width:440px; }

.col460{ width:460px; }
.double_col {width:480px;}

.col300{ width:300px}
.col310{width:310px;  }
.col380{width:380px;  }
.col540{width:540px;  }
.col620 {width:620px; }
.col580{ width:580px;}
.colsub {border-bottom: 1px solid #BABBB1;     border-top: 1px solid #BABBB1; width: 100%; height: 44px;    line-height: 44px;}

.desc440 {width:440px; }

.col_full  {width:840px; margin:0 auto; }

section#people {border-top: 10px solid #CACACA;    box-shadow: 0 1px 0 #FFFFFF;}



section#people  ul li h3{margin-bottom:0;}

section#people  ul li h4{color:#acacac; }

hgroup h1 {margin-bottom:0;}
.sub_heading {color:#acacac; font-size:14px;}





blockquote { font-style:italic; font-weight: 400 !important; border-bottom:2px dashed  #babbb1; border-top:2px dashed  #babbb1;width:400px; margin:0 0 36px -180px;  padding-top:36px; }

blockquote p {margin:0 0 36px  0px !important;  color:  #858583; font-family:georgia,serif; }
blockquote p:first-of-type {font-weight:normal !important;}




.top_tier  { width:100%; display:table; padding: 0 0 18px 0; background:/* #f2f3ef */ url(../i/gary_wave_bg.png) no-repeat 100% 0, url(../i/ledge.png) 0 100% repeat-x  #f5f5f7; overflow: hidden; border-bottom:solid 1px #fff;border-top:1px solid #FFFFFF}

span.num {     font-size:95%; }
span.num:after {content:': '}

/*  
		WORK homepage 3 columns
=========================================================================*/

#work{opacity:.95 ; transition: all .75s ease-in ; -moz-transition: all ease-in .75s;-webkit-transition: all ease-in .75; padding-top:36px;}
#work:hover {opacity: 1}
#work ul li h3 {border-bottom:1px dotted #666a73}
#work ul li:last-child {margin-right:0; }
#work ul li figure img {background:#f3f2eb ; background: rgba(243, 242, 235,.45);border:1px solid #babbb1; margin-bottom: 18px;  }
#work ul li  figcaption {text-transform:uppercase; margin-bottom: 18px;  padding:4px 2px; /* color:#454545 */}

#process h3 {font-size:150%; text-transform:uppercase; text-shadow:0 -1px 0 #999;}
#process ul li {border-top:2px dashed #babbb1; border-bottom:1px dashed #ececec; padding-top:36px;}





/*

			Contact
			
==============================================================================*/

#contact {padding-top:18px;}
#contact img {border:10px solid #2c2e33; width:580px;}



#contact-info , .process-content{float:right; display: inline;width:480px;}
#map_wrap { background:#dadada; padding:10px 10px 5px ;margin-bottom:36px; border:1px solid #babbb1; }
#map_wrap iframe {border:1px solid #babbb1;}
.double_col .col {width:200px;}
.double_col .col p,
.double_col .col h3 {margin-bottom:18px;}

ul#social li {float:left; width:30px; margin-right:20px }
ul#social li a {text-indent:-9999px; display:block;}
ul#social li a#twit {background:url(../i/social-sprite.png) no-repeat  0 0; width:40px; height:40px;}
ul#social li a#flickr {background:url(../i/social-sprite.png) no-repeat  -50px 0; width:40px; height:40px;}
ul#social li a#facebook {background:url(../i/social-sprite.png) no-repeat  -100px 0; width:40px; height:40px;}


.vcard {font-size:95%;}
.postal-code {font-variant: small-caps}


#signatures {clear:both; border-top:10px solid #2c2e33;  padding-top:36px; position:relative;}

#mcgill_info {width:200px; float:left;}
#mcgill a {background:url(../i/mcgill.png) no-repeat 0 0;  height:40px; float:left; width:200px;}
#flia {float:right; position:absolute; bottom:0px; right:0;z-index:33; text-transform:uppercase;font-size:11px; background:#2c2e33; padding:4px 12px 0 12px;  box-shadow:inset 0 1px 0 rgba(0,0,0,.35);-webkit-border-top-left-radius: 4px;-webkit-border-top-right-radius: 4px;-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px; border-top-left-radius: 4px;border-top-right-radius: 4px;}
#flia a {font-weight:900;}



.more_module {background:#2c2e33; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px; padding:10px 4px; box-shadow:0 1px 0 rgba(0,0,0,.5) inset}
.more_module a {font-family:kulturista-web;text-align:center; display:block; background:#b51723; width:92%; margin:0 auto;  border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px; padding:10px 5px; color:#fff; text-transform:uppercase; letter-spacing: 1px; }
.more_module a:hover {background:#fff; color:#2c2e33}



#interested_container {border-top:1px solid #BABBB1;  border-bottom:1px solid #BABBB1;  padding:72px 0 0 0; float:left; width: 940px; margin:36px 0 72px 0}
#interested_big {width:620px; float:right}
#interested_big  h4 {font-size:24px; color:#32343c}
#interested_big  p {font-size:20px; line-height:34px;margin-right:60px; font-style: italic}



#interested_big a {font-family: kulturista-web; background:#B51723; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px; padding:2px 4px; color:#fff; text-transform:uppercase; letter-spacing:2px;  display:block; width:220px; text-align:center;border:1px solid #bb0e30; font-style: normal; box-shadow: 0 1px 0 rgba(0,0,0,0.25) inset; text-shadow: 0 -1px 0 rgba(0,0,0,0.25)}
#interested_big a:hover {background: #bb0e30;}

#interested{border-top:10px solid #2c2e33; padding-top:32px; }


.read_more_module {background:#fefefe; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px; padding:10px 12px; box-shadow:0 1px 0 rgba(0,0,0,.35) inset; display:inline-block}
.read_more_module a {text-align:center; display:block; background:#b51723; width:90%; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px; padding:5px; color:#fff; text-transform:uppercase;}





/*

			Slider homepage
			
==============================================================================*/

#arrow_nav{position:absolute; top:74px; right:5px; z-index:9 ; display:none; opacity: .85}
#slider {width:940px;  border-top: 1px solid #CACACA;  border-bottom: 1px solid #CACACA;  padding:72px 0 36px 0; position:relative; margin-top:0px;}
#next, #prev { background: #cacaca ; font-size:22px; line-height:50px; text-align:center; width:50px; height:50px; display:inline-block ; font-weight:100 ; margin:0 -2px; padding:1px; }

#slider{}
#slider:hover #arrow_nav {display:block; opacity: 1}

 .slideshow{width:940px !important;   height:380px; padding-bottom:18px;  clear:both;  }
.slide_content {width:940px !important; clear:both;}
.slide_content img {border:1px solid  #fafafa; padding:9px;background:/* #e6e8e0 */  #cacaca; width: 920px}
.featured_desc{background: #f2f3ef ;   background: rgba(242,243,239, .98) url(../i/dash_pat.png) repeat 0 0;  width:220px; position:absolute; top:0px; left:0; height:371px; padding:0px 32px 0 36px;}
.featured_desc h2   {margin-bottom: 18px;  margin-top:54px; padding-top:18px; border-top: 1px solid #BABBB1; }
.featured_desc h2  a {color:#32343c; }
.featured_desc p {font-size:1.1em;}
.slidernav { position:absolute; top:30px; left:50%; text-align:center}
.slidernav a{   background: none repeat scroll 0 0 #E6E8E0;
    border: 1px solid #DDDDDD;     border-radius: 6px 6px 6px 6px;    box-shadow: 1px 1px 0 rgba(55, 55, 55, 0.15) inset;    display: block;
    float: left;    height: 10px;    margin-right: 10px;    text-indent: -9999px;    width: 10px;}
.slidernav a:hover, .slidernav a.activeSlide {box-shadow:inset 1px 1px 0 rgba(55,55,55,.15);  background: #d8dad3}



.read_more {background:transparent  url(../i/external.png) 25% 45% no-repeat; border-bottom: 1px dotted #BABBB1;     border-top: 1px dotted #BABBB1; width: 100%; height: 44px;    line-height: 44px; display: block; }


#footer_nav{width:480px;overflow:hidden; float:left}

#footer_nav  ul {width:140px; float:left; margin-right:20px;}

footer ul li h4{margin-bottom: 0;}
footer ul li h5 { text-transform: lowercase}
ul#tools_used , #books_used , #funder {padding-top:18px; width:980px; float:left; margin-right:36px;}



/*

			funder
			
==============================================================================*/

 #funder li figure{background: #eee; border-radius: 4px;  border: 1px solid #fff; text-align:center; padding:10px;border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px; margin-bottom:10px; min-height:70px;}
 #funder li figure img {margin:0 auto;}
#funder li figure:hover{background:#fff;}



 #funder li { overflow: hidden; margin-bottom:18px;margin-right:36px; padding: 0 0  9px 0; position:relative; float:left; width:440px; border-bottom:1px dotted; min-height:270px; }
 #funder li  p { margin:0 0 18px 0px; line-height:18px;}
 #funder  li  h3 { width:85% }




/*

			tools
			
==============================================================================*/
ul#tools_used  li { overflow: hidden; margin-bottom:18px;margin-right:20px; padding:36px 0; position:relative; float:left; width:460px; border-bottom:1px dotted; min-height:325px; }
ul#tools_used  li  img {float:left; display: block}
ul#tools_used  li  h2 {float:right; width:300px;}
ul#tools_used  li p {float:right; width:300px; margin:0 0 9px 0px; }
p.supplier_link { border-top:1px dotted; padding:9px 0; margin-top:36px;}
p.supplier_link span {display:block;text-transform:uppercase;letter-spacing:1px; font-size:13px;  margin:0 0 0px 0px;}


/*

			Books
			
==============================================================================*/
ul#books_used  li { overflow: hidden; margin-bottom:18px;margin-right:20px; padding:10px 0; position:relative; float:left; width:460px; border-bottom:1px dotted; min-height:270px; }
ul#books_used  li  img {float:left; display: block}
ul#books_used  li  h2 {float:right; width:300px;}
ul#books_used  li p {float:right; width:300px; margin:0 0 9px 0px; }
p.supplier_link { border-top:1px dotted; padding:9px 0; margin-top:36px;}
p.supplier_link span {display:block;text-transform:uppercase;letter-spacing:1px; font-size:13px;  margin:0 0 0px 0px;}


/*

			Contact deets
			
==============================================================================*/

ul#contactDeets {width:460px;float:right;margin:0 0 36px 0; }

ul#contactDeets li {width:100%;float:left;border-bottom:1px solid #cacaca;padding:10px  0;margin:10px 0 ; }

ul#contactDeets li:last-child {border:none}

ul#contactDeets li h4 {float:left;width:120px;text-transform:capitalize; }

ul#contactDeets li p {float:right; width:300px; margin:0;}

ul#contactDeets a {color:#E72C2E;}


footer a {color:#c2c4cc}
footer a:hover {color:#f3f3f3}

footer h2,footer p { color:#ebecf1 !important ; font-weight: 500; text-shadow:0 1px 0 #000;}

.support_heading { color:#acacac; font-variant:small-caps; letter-spacing:2px;}

#welcome_zone{ border-top:10px solid #cacaca; padding-top:72px;}
#welcome_content {width:400px; border-left:1px dotted #cacaca; padding-left:38px;min-height:325px;height:auto !important;height:325px;}


#gary_hero {border-bottom:1px solid #e5e5e5; overflow:hidden; margin-bottom:72px;}
#gary_hero  h1{margin-left: 320px;}

#gary_hero p, #section_hero p {font-size:124%; line-height:1.8;font-family:georgia}
#gary_hero img {margin-bottom:0; margin-top: -57px;}



#section_hero {border-bottom:1px solid #e5e5e5;overflow:hidden; margin-bottom:36px;}
#section_hero img {margin-top:0;}


/*

			Our people
			
==============================================================================*/

#our_peeps {clear:both; padding-bottom: 72px; overflow: hidden}
#our_peeps li {width:300px; float:left; margin-right:20px; min-height:530px;}
#our_peeps li.last {margin-right:0; }
#our_peeps li  h4 {border-bottom: 1px dotted}


#our_peeps li  h3 {margin-bottom:0; text-transform: capitalize}
#our_peeps li  h4 {color:#858585 !important; font-family: proxima-nova; font-style:normal; font-size: 10px; letter-spacing:1px; font-weight: 400}

#brouhard_lab  p{-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px;}



/*

			out about wrap
			
==============================================================================*/
#out_about_wrap {background:#fff; margin-bottom:0; padding-top:72px;}


ul#out-about li { display: block; overflow: hidden; border-bottom:1px dotted;padding:18px 0}
ul#out-about li h3 { text-transform: none}
ul#out-about li {max-width: 100%}
ul#out-about li  img {border:1px solid #fff;}


/*

			Publications
			
==============================================================================*/

#publication_content{clear:both;}


#publication_content  h3 {color:#34363e; border-top:0px solid #cacaca; border-bottom:#cacaca 1px solid; padding:18px 10px 18px 10px; font-style: italic; font-size:22px;}
#publication_content .col460 h3:before {content:'/ '; color:#888}

#publication_content ul { padding:18px 0 0 0;  }
.pub_thumb{margin-left:10px; border:5px solid #fff; }


#publication_content .year {margin-bottom:72px;}

#publication_content .year ul li { width: 460px; padding:0 0 36px; float:left; margin-right:20px;}

 #publication_content ul li { min-height: 250px; position:  relative; padding:18px 0; border-bottom:1px solid #cacaca; padding-right:10px; margin-bottom:28px;}


#publication_content ul li a {display:inline-block; background: url(../i/white_arrow.png) no-repeat 95% center #dd0e30 ; color:#fff;  border:1px solid #fff; margin:9px 0;padding:4px 32px 4px 22px; border-radius:0px;-moz-border-radius:0px; -webkit-border-radius:4px;  font-style: normal ; text-transform:uppercase ; text-shadow:none;position:absolute; left:10px; bottom:17px;}
#publication_content ul li a:hover { background-clip: padding-box  ; background-color: #cf0b2b}
#publication_content ul li h4 {font-size:14px; line-height: 20px; min-height:57px; font-weight:300; padding-top:10px; text-transform: none;}
#publication_content ul li p {font-style:italic; font-weight:300; color:#888; line-height:20px;}
#publication_content ul li:last-child{margin-bottom:0;}


#publication_list{clear:both;}


#publication_list  h3 {color:#34363e; border-top:1px solid #cacaca; border-bottom:#cacaca 1px solid; padding:18px 10px 54px 10px; font-style: italic; font-size:22px;}
#publication_list .col460 h3:before {content:'/ '; color:#888}

#publication_list ul { padding:18px 0 0 0;  }
.pub_thumb{margin-left:10px; border:5px solid #fff; }


#publication_list .year {margin-bottom:72px;}

#publication_list .year ul li { width: 460px; padding:0 0 36px; float:left; margin-right:20px;}

 #publication_list ul li { min-height: 280px; position:  relative; padding:18px 0; border-bottom:1px solid #cacaca; padding-right:10px; margin-bottom:36px;}


#publication_list ul li a {display:inline-block; background: url(../i/white_arrow.png) no-repeat 95% center #dd0e30 ; color:#fff; border:1px solid #fff; margin:9px 0;padding:4px 32px 4px 22px; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;  font-style: normal ; text-transform:uppercase ; text-shadow:none;position:absolute; left:10px; bottom:7px;}
#publication_list ul li a:hover { background-clip: padding-box  ; background-color: #cf0b2b}
#publication_list ul li h4 {font-size:12px; line-height: 20px; min-height:57px; font-weight:600; padding-top:10px;}
#publication_list ul li p {font-style:italic; font-weight:300; color:#888; line-height:20px;}
#publication_list ul li:last-child{margin-bottom:0;}




/*

			Cyto
			
==============================================================================*/

#cyto_content{padding-bottom: 72px}

#cytoskeleton {border-bottom: 10px solid #cacaca; }
#cytoskeleton img {margin-bottom:-4px; }
#cytoskeleton, .research {clear:both; overflow: hidden; margin:36px 0}


#stuff_we_like li {float:left; width:200px; margin-right: 20px; background: #eee; border-radius: 4px; padding:10px; border:1px solid #fff;}
#stuff_we_like li  h4 {font-weight: 600}





/*  media queries
=========================================================================*/

/* ipad  */	
@media screen and (max-width: 940px){


	.page{ width:760px; padding-bottom: 0px;  margin: 0 auto; display: table; overflow: hidden} 
	.top_tier { padding: 0 !important; background: none; border:none; }
	
	#logo {    background: url("../i/gary_cyto_logo_NEW-small.png") no-repeat scroll 0 7px transparent;    display: block;    height: 120px; width:200px;margin-right:10px;    text-indent: -9999px;}
	
	#main { width:100% } 
	.left {     float: left;     margin: 0px 10px 22px 0;   }
	.right {     float: right;     margin: 0 0 22px 10px;   }  
	section{padding-bottom: 9px}
	.slidernav{left:40%}
	.slideshow, .slider, #slider {width:720px; margin: 0; padding: 0;}
	.slideshow{ height: auto}
	#slider{margin-top:0; padding: 0px; height:280px}
	.featured_desc {height: 300px}
	.slide_content img{width:700px;}
	#slider {padding:54px 0 0 0px; border-bottom: none;}
	#work {padding-top:36px;		}
	header#branding{margin-bottom:0; padding-bottom:0; width:200px;}
	nav {padding-bottom:0; margin-bottom: 0}
	
	nav ul li {width:100px; margin-bottom: 10px; margin-right: 10px}  
	nav ul li a {font-size:80%; letter-spacing: .5px;}
	li.col300 ,.col300{width:220px; margin:0 10px}
	.col420 ,.col460, .col440{width:240px;}
	.research .col440{width:340px;}
	#our_peeps li {width:100%; min-height:320px;}
	.read_more{background:none;}
	.cap{font-size:inherit; float:none; padding:0; margin:0; line-height:inherit}
	
	
	#publication_content .year ul li {width:700px; float:none; clear:both }
	.pub_thumb{margin-left:10px; border:5px solid #fff;  margin-bottom: 0;}
	
	#funder li { overflow: hidden; margin-bottom:18px;margin-right:20px; padding: 0 0  9px 0; position:relative; float:left; width:330px; border-bottom:1px dotted; min-height:360px; }
	#funder li:nth-child(even){margin-right: 0}
	#funder  li  h3 { width:100% }
	
	.featured_desc h2 {margin-top: 18px;}
	.featured_desc {height: 302px}
	ul#tools_used , #books_used , #funder {padding-top:18px; width:auto; float:left; margin-right:36px;}
	
	ul#tools_used li {width:620px; min-height:inherit}
	ul#tools_used li h2  {float:right; width:420px;}
	ul#tools_used li p { float:right; width:420px; margin:0; }
	ul#tools_used li span.img_wrapper{clear:both; float:left }
	ul#tools_used li  img{float:left}
	
	ul#books_used li {width:620px; min-height:inherit}
	ul#books_used li h2  {float:right; width:420px;}
	ul#books_used li p { float:right; width:420px; margin:0; }
	ul#books_used li span.img_wrapper{clear:both; float:left }
	ul#books_used li  img{float:left}


	.backtotop{left:90%}
	
	
	#interested_container {width: 700px; margin:0 10px; /* border-bottom: none */ }
	#interested_big  { width:380px; }
	
	#gary_hero p, #section_hero p {    font-size: 100%;     line-height: 1.8; }
	
	form#contact_form {width:340px; float:left; padding-bottom:36px; margin-right:20px; }
	form#contact_form input, form#contact_form textarea {width:240px;}
	ul#contactDeets{width:340px;}  
	#stuff_we_like li {float:left; width:200px; margin-right: 10px;}
	
	
	#interested_big  p {font-size:20px; line-height:28px;margin-right:60px; font-style: italic}
	
	#where-we-are  img {display: none;}
	
	.backtotop{left:80%; top:50%;}
	
	.lab img.framed {width: 100% !important}
	
  }







/* media 480 
====================================================================*/

			@media screen and (max-width: 620px) {
			
			
			
			body{ font-size: 14px; line-height:18px; margin:0 auto;}
			.left{float: none ;margin:0 0 10px 0}
			.right{float: none; margin:0 0 10px 0} 
			
			header#branding {height: 100px}
			header#branding a#logo  {margin: 0 auto}
			header#branding a#logo:hover{border:none}
	
			nav select {      display: none;    }
			nav ul     { display: none; }
			
			
			.page{width:330px; padding:0 20px ; /*  background: #ff8598 */ }
		
			.top_tier {padding-bottom: 0px; border:none; background: none}
			#slider {display:none; }
			header#branding a#logo {    border-top: none;    color: #31333C;    font-size: 24px;    width: 320px; margin-left:20px}
			
			
			li.col300, .col300,.colsub, form#contact_form {     width: 300px; padding:9px 0px;   float:none;}
			ul#contactDeets ,	.col420 ,.col460, .col440,#publication_content .col460{width:300px; padding: 0 0px; float:none;}
			
			ul#tools_used  li { overflow: hidden; margin-bottom:10px;margin-right:0px; padding:36px 0; position:relative; float:none; width:400px; border-bottom:1px dotted;  min-height: inherit; overflow:hidden;}
			ul#tools_used  li  img {float:none;  clear:both; display: none !important}
			ul#tools_used  li p {float:none; width:320px; margin:0 0 9px 0px; clear:both ; }
			ul#tools_used  li  h2 {float:none; width:320px; clear:both}
			nav {clear: both; top:0; margin-bottom:0;}

			ul#books_used  li { overflow: hidden; margin-bottom:10px;margin-right:0px; padding:36px 0; position:relative; float:none; width:400px; border-bottom:1px dotted;  min-height: inherit; overflow:hidden;}
			ul#books_used  li  img {float:none;  clear:both; display: none !important}
			ul#books_used  li p {float:none; width:320px; margin:0 0 9px 0px; clear:both ; }
			ul#books_used  li  h2 {float:none; width:320px; clear:both}
			nav {clear: both; top:0; margin-bottom:0;}

			
			nav ul     { display: none; }
			
			nav select { display: block; margin:5px 10px; background:#e5e5e5; padding:10px 8px !important; border:1px solid #fff; width:300px; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.4) inset; display:inline-block; text-transform: uppercase; }
			#slider{padding:0; padding:0;border:none;}
			#section_hero img{display: none}
			#gary_hero h1, #section_hero h1{ margin-left:0; font-size: 120%}
			header#branding{margin-bottom:0; padding-bottom:0;}
			#interested_container ,#interested_big { text-align: center; width: 320px;  margin:0 auto; padding:18px 0;float:none; /* border: none */}
			#interested_big h4{ line-height: 28px;}
			#interested_big p {font-size:100%; margin:0 auto; line-height: 20px; }
			#interested_big p{margin-bottom: 20px;}
			#interested_big a {}
			#interested_container img, #gary_hero img{display: none}
			#gary_hero{margin-bottom: 0; border-bottom:none}
			#gary_hero p, #section_hero p {    font-size: 100%;     line-height: 20px; margin-bottom: 10px}
			
		
			/* #our_peeps  li img.left {float:none; border:20px solid rgba(255,255,255,.5);} */
			#our_peeps  li {border-bottom: 1px dotted #999 ; margin-bottom: 20px}
			
			#funder li { overflow: hidden; margin-bottom:18px;margin-right:36px; padding: 0 0  9px 0; position:relative; float:none; width:360px; border-bottom:1px dotted; min-height:inherit; }
			
			
			#cytoskeleton img {display: none}
			#cyto_content{padding-bottom: 10px}
			
			
			#publication_content .year ul li { width:300px; padding:0 0 36px; float:none; margin-right:20px;}
			
			#work {padding-top: 18px;}
			
			form#contact_form input { width: 200px}
			form#contact_form textarea { width: 250px}
			ul#contactDeets li h4 {margin-bottom: 9px}
			

			
}


/*

320
====================================================================*/

		
		@media screen and (max-width: 320px) {
		
		
					
					body{  font-size: 14px; line-height:18px;  }
					
					
					header#branding a#logo  {margin: 0 auto; height: 50px}
					
					
					
					
					
					.page{width:310px; padding:0 5px ;  margin:0 auto;}
					.top_tier {padding-bottom: 0px; border:none}
					#slider {display:none; }
					header#branding a#logo {    border-top: none;    color: #31333C;    font-size: 24px;    width: 300px; margin-left:20px}
					#logo:hover{border:none;}
					
					li.col300, .col300,.colsub,#section_hero, .row_inner {     width: 280px; padding:9px 0px; float: none }
					.col420 ,.col460, .col440, #publication_content .col460{width:280px; padding: 0 0px; float: none }
					
					li.col300  img {border:1px solid #fff !important;}
					
					ul#contactDeets,ul#contactDeets li{float:none;}
					
					nav ul     { display: none; }
					nav select { display: block; margin-left:25px; background:#e5e5e5; padding:18px 8px; border:1px solid #fff; width:240px; border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:0 1px 1px rgba(0,0,0,.4) inset; display: block}
					
					#section_hero img{display: none}
					#gary_hero h1, #section_hero h1{ margin-left:0; }
					
					header#branding{margin-bottom:0; padding-bottom:0;}
					.row_inner {   border-bottom: 1px solid #CACACA; border-top: 1px solid #fff;   clear: both; margin-top:18px; margin-bottom: 18px; padding: 9px 0 9px 0; height:60px;  box-shadow: 0 1px 0 #FFFFFF, 0 -1px 0 #CACACA; width: 300px}
					
					.row_inner header h1 { line-height: 60px ; font-size:16px;}
					
			
					#interested_container ,#interested_big { text-align: center; width: 280px;  margin:0px 10px; padding:9px 0;float:none;}
					#interested_big p {font-size:100%; margin:0 auto; line-height: 18px; margin-bottom: 10px }
					#interested_container img, #gary_hero img{display: none}
					#gary_hero p, #section_hero p {    font-size: 100%;     line-height: 20px; margin-bottom: 10px}
					#publication_content .year {width: 280px;}
					#publication_content .year ul li {width: 280px; float: none; margin: 0 5px; margin: 0 auto}
					#publication_content .year ul li.last {  }
					
					#tools_content  { width:280px; background: #ff7}
					ul#tools_used   { width:280px;}
					ul#tools_used  li { overflow: hidden; margin-bottom:10px;margin-right:0px; padding:36px 0; position:relative; float:none; width:300px; border-bottom:1px dotted;  min-height: inherit; overflow:hidden; }
					ul#tools_used  li  img {float:none;  clear:both; display: block !important}
					ul#tools_used  li p {float:none; width:260px; margin:0 0 9px 0px; clear:both ;  }
					ul#tools_used  li  h2 {float:none; width:260px; clear:both}
					

					#books_content  { width:280px; background: #ff7}
					ul#books_used   { width:280px;}
					ul#books_used  li { overflow: hidden; margin-bottom:10px;margin-right:0px; padding:36px 0; position:relative; float:none; width:300px; border-bottom:1px dotted;  min-height: inherit; overflow:hidden; }
					ul#books_used  li  img {float:none;  clear:both; display: block !important}
					ul#books_used  li p {float:none; width:260px; margin:0 0 9px 0px; clear:both ;  }
					ul#books_used  li  h2 {float:none; width:260px; clear:both}
			


					form#contact_form {width:280px; float:none; padding-bottom:36px; margin:0px; }
					
					ul#contactDeets li {padding: 10px 0; border:none;margin-bottom: 5px}
					
					.title { width:280px;}
					#funder{ width:300px; padding: 0;  margin: 0 auto}
					#funder li  {width: 290px; padding: 0; margin:5px 5px; float: none; }
					.backtotop{left:0;}

		
		}
		



 * {
	transition: width .35s;
	-moz-transition: width .35s;
	-webkit-transition: width .35s;
}