/* Layout for desktop version */

html {
       overflow-y: scroll;
}
	
body { background:#f5f4f3;}
.row { background:#fff; }

#header .logo { font-family: 'Passion One', Georgia, serif; display:block; font-size:3.4em; 
font-weight: lighter; letter-spacing: -.3px; line-height:2.5em; 
margin: 0 .71em; border:0; color: #c14040;}
#header p {text-align:right; margin: 15px;}
#header p a { margin:00px; }

/*#nav { background:#ecedec; font-size:1em; }*/
#nav { background:#c14040; font-size:1em; }
#nav ul { list-style:none; margin:0 0 0 1em; }
#nav li { float:left; margin:7px 1.5em; }
#nav a { color:#ffffff; text-shadow:0 -1px #bbb	; text-transform: capitalize; border:none; }

#content .breadcrumbs ul { list-style:none; margin:0; font-size:.9em; }
#content .breadcrumbs li { float:left; margin-right:.5em; text-transform: capitalize; }
#content .breadcrumbs li:before { content:"›  "; }
#content .breadcrumbs li:first-child:before { content:""; }

#content .nolineimg {
border-bottom: none;
position: relative; top: -11px;
}

#content .nolineimgrightcolumn {
border-bottom: none;
position: relative; top: -6px;
}

#content .nolineimgauthors {
border-bottom: none;
position: relative; top: -21px;
}

.textrightcolumn {
/*border-bottom: none;*/
position: relative; top: -21px;
font-size: 95%;
/*color: #6e7a80;*/
}

h1, h2, h3 { clear:left; }
.article { margin: 10px 0; padding:0 20px; border-right:1px solid #ddd; }
.article ul, .article ol { margin-left:20px; }

#aside h3 {margin:10px;}
#aside ul {list-style:none; padding:10px;font-size: 100%;}

#footer { background:#f5f4f3; }
#footer .logosmall { 	
margin-left:10px;
color: #6d6c6b;
font-family: 'Passion One', Georgia, serif;
text-transform: capitalize;
font-size: 200%;
line-height: 39px;		/* Changing this will break the baseline grid. */
font-weight: lighter;
letter-spacing: 0px; 
border:none; 
}
#footer .footbull {font-size: 90%;letter-spacing: 0px;line-height: 39px;text-shadow: 1px 1px 1px #ccc;font-weight: lighter;}
#footer .foottext {white-space:nowrap; text-transform: capitalize; font-size: 97%;letter-spacing: 0.06px;line-height: 39px;font-weight: lighter;}
#footer .footitem {font-size: 94%;}
#footer .noline {
border-bottom: none;
}
#footer h3 {margin:10px;}
#footer ul { padding:10px; margin:0; margin-left:5px; list-style: none; }

.centerornot {
width: 50%;
margin: 0px auto 0px auto;
text-align: center;
}

.centerornot img {
margin-left:auto;
margin-right:auto;
}

.gallery{
position: relative; 
top:20px
}

.galleryannotate{
position: relative; 
top:10px
}

.galleryannotate img{
position: relative; 
left:10px
}

.authorphoto{
margin-top: -5px; 
/*margin-right:5em; */
font-size: 0.9em; 
line-height: 1.618em;
}

.authorphoto img{
position: relative; 
top:8px;
left:10px;
}

.authorannotate{
margin-top: -5px; 
margin-right:7em;
font-size: 0.9em; 
line-height: 1.618em;
}

.authorannotate li{
margin-top: 10px; 
}

.feedbackannotate{
position: relative; 
top:-20px;
margin-right:7em;
font-size: 99%;
font-style: italic;
}

/* Layout for mobile version */

@media screen and (max-width: 480px) {

.rwdw-break { display: none; line-height:0; }
}

@media screen and (min-width: 500px) {

.fwd-break { display: none; line-height:0; }
}

@media handheld, only screen and (max-width: 767px) {

#header .logo { margin:0; }
#nav li { margin:5px 1em; }
.article {border:none;}
#aside {border-top:1px solid #ddd;}
}

.myButtonLink {
	display: block;
	width: 1099px;
	height: 250px;
	background: url('/img/artgorithms.png') bottom;
	text-indent: -99999px;
}
.myButtonLink:hover {
	background-position: 0 0;
	border-bottom: 0px;
}

.myButtonSyllabus {
	display: block;
	width: 609px;
	height: 100px;
	background: url('/img/syllabus.png') bottom;
	text-indent: -99999px;
}
.myButtonSyllabus:hover {
	background-position: 0 0;
	border-bottom: 0px;
}

/* Provide higher res assets for iPhone 4 */

@media only screen and (-webkit-min-device-pixel-ratio: 2) { 

/* An example of how to override an image with one twice the size for iPhone 4. Specify the original pixel size with background-size.
.download {
background: url(../img/downarrow@2x.png) no-repeat;
background-size: 27px 28px;
}
*/

}

/* Image Lightbox*/

a.lightbox img {
border: 1px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
margin: auto auto;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}

/* Styles the lightbox, removes it from sight and adds the fade-in transition */

.lightbox-target {
position: fixed;
top: -100%;
width: 100%;
background: rgba(0,0,0,.7);
width: 100%;
opacity: 0;
-webkit-transition: opacity .5s ease-in-out;
-moz-transition: opacity .5s ease-in-out;
-o-transition: opacity .5s ease-in-out;
transition: opacity .5s ease-in-out;
overflow: hidden;
}

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */

.lightbox-target img {
margin: auto;
position: absolute;
top: 0;
left:0;
right:0;
bottom: 0;
max-height: 0%;
max-width: 0%;
border: 3px solid white;
box-shadow: 0px 0px 8px rgba(0,0,0,.3);
box-sizing: border-box;
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
}

/* Styles the close link, adds the slide down transition */

.thumbnail {
  max-width: 148px;
  display: inline !important;
  line-height: 0px !important;
  margin-bottom: -4px !important;
}

.thumbnail:hover {
	text-decoration: none;
	border-bottom: none;
	color: #ffffff;
}

#nounderline{
	text-decoration: none;
	border-bottom: none;
	color: #ffffff;
}

.italic { font-style: italic; }
.small { font-size: 0.8em; }

/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 90%;
	margin-top: 2%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}