@charset "UTF-8";
/* CSS Document */
@import url("styles_googleSearchLookAndFeel.css");
/*
@import url(http://fonts.googleapis.com/css?family=Rosario:400,400italic,700,700italic);

@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,400i,700');
*/
@import url('https://fonts.googleapis.com/css?family=Muli:400,400i,700');

/* ========================= General classes ================================= */
.paddingfix {
	box-sizing: border-box;
}

.hide {
		display:none;
}

.skipToContent {
		display:none;
}


.clearLeft {
	clear:left;
	}

.clearRight {
	clear:right;
	}
	
.clearAll{
	clear:both;
	}
	
.alignRight {
	text-align: right;
}

.alignLeft {
	text-align: left;
}

.alignCenter {
	text-align:center;
}

.alignBottom {
	position: relative;
	bottom: -.3125em;  /* for some reason the fake mail links on the syllabi like +.3125; may neeed a new style rule */
	/*background-image: url(images/toolImages/penTool.png);*/
}

.alignTop {
	vertical-align:top;	
}

.indent  {
	margin-left:2em;
}

pre.indent  {
	margin-left:0;
}
.indent-less  {
	margin-left:1em;
}
.hangingIndent {
	text-indent:-4em;
	margin-left:4em;
}

.marginLeft {
	margin-left:1em;	
}

.whiteSpace {
	margin:2em 0;
}

.spaceAbove {
	margin-top: 0.7em;
}

.spaceBelow {
	margin-bottom: .5em;
}

.noSpaceBelow {
	margin-bottom:0;
	padding-bottom:0;
	}
	
.noSpaceAbove {
	margin-top:0;
	padding-top:0;	
}

a.linkNoDecoration {
	border:none;
	background:none;	
}


.red {
	color:#F00;
}

.green {
	color:#390;
}

.shadow {
	box-shadow: 2px 2px 5px 0 #333;

}
/* ========= image sizes ============ */

.halfsize {
	width:50%;
}

.fortyfivepercent {
	width:45%;
	
}

.fortyeightpercent {
	width:48%;
	
}
.fullwidth {
		width: 100%;
	}

.floatRight {
	float: right;
}

.floatRight-leftMargin {
	float: right;
	margin: 0 0 .5em 1em;
}

.floatLeft {
	float: left;
}
.floatLeft-rightMargin {
	float: left;
	margin: 0 1em .5em 0;
}

.half-200max {
	width: 50%;
	max-width:200px;
	margin-bottom:1em;
}


/* ========================= body and wrapper ========================= */


body {
	
	background-image: url(/images/topStripe-n5.png);
	background-repeat: repeat-x;
	background-position: top;
	width: 100%;
	min-width: 320px;
	max-width: 1032px;
	margin: 0 auto;
	font-size: medium;
	background-color: #eeece7; /*#eee;*/
	/*	
	font-family: 'Rosario', sans-serif;
	font-family: 'Libre Franklin', sans-serif;
	*/
 	font-family: 'Muli', sans-serif;
    
}



#container {           /*  aka "wrapper"   */
	padding:0 2%;
	position:relative;
	background-color:#fff;
	background-image: url(/images/topStripe-n5.png);
	background-repeat: repeat-x;
	background-position: top;
	
	box-sizing: border-box;  
	box-shadow: 1px 1px 8px 0px rgba(0,00,00,.3);
}



/* ========================= headings, paragraphs, other text ========================= */

p {
	font-size: .85em;	
	line-height: 1.5em;
	margin-bottom: .7em;
}

blockquote {
	font-size: .85em;	
	line-height: 1.5em;
	margin-bottom: .7em;
	margin-left:2em;
}


p.caption {
	color:#61624a;
	font-size:.75em;
	text-align:center;
	margin-bottom:.3em;
	font-style: italic;
}

.seemore a {
	display: block;
		text-align: center;
		padding: .5em;
		background-color: #eeece7;
		width: 10em;
		margin: 0  auto 1em;
}



 figcaption {
	color:#93928a; /* had been commented out for some reason */	
	font-size:.75em;
	text-align:center;
	margin-bottom:.5em;
}

figure img {
	margin-bottom:.5em;	
	width:100%;
}
small {
	font-size: .85em;	
}

h1 {
	font-size:1.3em;
	margin-bottom:.7em;	
}

main h1 {
		font-size:1.7em;
}

h2 {
	font-size:1.0em;
	margin-bottom:.3em;
	color:#61624a; /*warm gray*/

}

#home main h2 {
	font-size:1.0em;	
}

h3 {
	font-size:.9em;	
}


h3.asideH3 {
	color:#61624a; /*warm gray*/
	text-align: center;
	margin-bottom: .5em;
	
} 
h4 {
	font-size:.85em;	
}

/*  i've decided to drop the arrow icon for external links ...

a[href^="http:"], a[href^="https:"] {
	background: url(images/externalLink.png) no-repeat right top;
	padding-right: 12px;
}
*/

a[href^="mailto:"] {
	background: url(images/mailIcon.png) no-repeat right top;
	padding-right: 14px;
}


a[href$=".zip"], 
a[href$=".doc"], 
a[href$=".pps"], 
a[href$=".ppt"], 
a[href$=".pptx"],
a[href$=".docx"] {
	background: url(images/download.png) no-repeat right top;
	padding-right: 18px;
}

a:link {
	color:#3f7597;  /* grayish blue */
	text-decoration: none;
	border-bottom: 1px dotted #3f7597;
}

a:visited {
	color:#627d8e;  /* grayer blue */
	border-bottom: 1px dotted #627d8e;
}
a:hover {
	color:#3f7597;  /* grayish blue */
	text-decoration: none;
	border-bottom: 1px solid #3f7597;
}

/*

a[href^="http:"]:visited, 
a[href^="https:"]:visited {
	background: url(images/externalLinkVisited.png) no-repeat right top;
	padding-right: 12px;
}
*/

a[href^="mailto:"]:visited  {
	background: url(images/mailIcon.png) no-repeat right top;
	padding-right: 14px;
}

/*
a[href^="http://www.danfergusdesign"], 
a[href^="http://www.danfergusdesign"]:visited {
	background: none;
	padding-right: 0;
}
a[href$=".pdf"]:link, 
a[href$=".pdf"]:visited {
	background: url(images/pdf.gif) no-repeat right top;
	padding-right: 20px;
	color:#b34b6a;
}
*/

code {
	font-family: Monaco, monospace;
}
	
pre {
	font-family: Monaco, monospace
	
}

.code {
	padding: 5px 10px;
	background-color:#f8fbfc;
	border: 2px solid #ECF3F6;
	margin: 3px 10px 10px 10px;	
	font-size:.8em;
	overflow:auto;
	color:#006;
}

li .code {
	font-size:90%;
		
}

.newcode {
	font-weight: bold;
	color: #3793FF;	
}
.comment {
	color:#999;
}

.smallCaps {
	font-variant:small-caps;	
}


ul.bulletList li {
	font-size: .85em;	
	line-height: 1.5em;
	margin-left:1em;
	list-style-type:disc;
}

/* ========================= page headers ========================= */

#topOfPage {
	position:relative;
}

header {
	clear:left;
	position:relative;
}

/* Daniel C Fergus masthead */
header h1 {
	font-size:36px;	
	position:absolute;
	top:10px;
	left:5px;
	margin:0;
	padding:0;
}

header h1 a:link, header h1 a:visited {
	color:#627d8e;/* Gray blue */
	text-decoration:none;
	display:block;
	border-bottom:none;
}

/* Artist and Educator masthead */
header p {
	font-size:25px;
	position:absolute;
	top:45px;
	/*left:61px;  adjust according to font ... was 90 */
    left:24px; /* adjust according to font ... was 80 */
	margin:0;
	padding:0;
	line-height:1.2em;
}

header p a:link {
	color:#93928a;
	display:block;
	text-decoration:none;
	border-bottom:none;
	
}

 header p a:visited {
	color:#93928a;
	display:block;
	text-decoration:none;
	border-bottom:none;
	
}

header a:hover {
	border-bottom:none;	
}


/* ========================= Search ========================= */

#searchForm {
	/*width: 220px;
	margin:0 auto;*/
	position:absolute;
	top:5px;
	left:5px;
	text-align:left;
}


#searchField {
		width:150px;
}

input#searchBtn {
	font-family:Arial, Helvetica, sans-serif;
  color: #627d8e;
  /*text-shadow: 0 1px 2px #FFFFFF;*/
 background-color: #eeece7 ;
 cursor:pointer;
 border:none;
  border-radius: 8px;
}


/* ================= utility navigation (Portfolio-About-Contact-Student Resources) ================== */


nav a.menu_button {
	display:block;
	text-align:right;
	padding-right:10px;
	border-bottom:none;	
	color:#fff;
	padding-top:5px;
}


#utilityNav {
	width:100%;
	/*position:fixed;
	top:0;
	background-image: url(/images/topStripe-n5.png);
	background-repeat: repeat-x;
	background-position: top;
	z-index: 2000;*/
	
}
#utility ul
{
	display: none;
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 0;
	width:100%;
	}
	
#utility ul.expanded {
    display: block;
	margin-top:4px;
}


#utilityNav li a {
	text-decoration: none;	
	display: block;
	font-size:100%;
	line-height:3em;
	/*font-weight:bold;*/
	text-align:center;
	
	border-bottom:none;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #eeece7;
	color:#000;
	background-color: #fff;
	
    }
	
#utilityNav li.current a {
	font-weight:bold;
	color:#000; 
	background-color: #eeece7;
}
		

	
/* ================== Main navigation (portfolio section tabs) ========================= */

nav a.menu_button2 {
	clear:both;
	display:block;
	text-align:center;
	border-bottom:none;	
	background-color:#627d8e;
	color:#fff;
	line-height:2em;
}

#portfolioSections, #resourceSections {
	clear:both;
	width:100%;

}

#portfolioSections div {
	padding-top: 85px;
}

#portfolioSections ul, #resourceSections ul {	
	width:100%;
	display: none;
}
	
#portfolioSections ul.expanded, #resourceSections ul.expanded {
    display: block;
	
}

#portfolioSections ul li {
	box-sizing: border-box;
		border-bottom: 1px solid #eeece7;
	
}	

#portfolioSections ul li a, 
#resourceSections ul li a {
	box-sizing: border-box;
	line-height: 3em;
	width:100%;
	text-decoration: none;
	display: block;
	color:#61624a; 
	/*background-color: #eeece7;*/
	background-color: #fff;
	text-align: center;	
	padding: 0;
	 border-bottom:none;/* removed blue link underlines */
	border-top: 1px solid #fff;
	transition-duration:.5s;
}

/* removed the hover since it's irrelevant on mobile screens */

#portfolioSections ul li a.current, 
#resourceSections ul li a.current {
	color:#000; 
	background-color: #eeece7;
	font-weight: bold;
}

#home nav#portfolioSections {
	
	display:none;
}

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

#main, main {
	
	padding-top:20px;
}



/* no longer relying on a background on the main (I think). BG color should be on the .container element instead */




/* ========================= footer ========================= */
footer {
	text-align: center;
	clear:both;
	border-top: 1px solid #c8c7c5;
	margin: 0 5%;
}


#socialNetworks img {
	height:32px;
	margin: 16px 8px 0 8px;
}

#socialNetworks span {
	display:none;
}

#socialNetworks a {
	border-bottom:none;	
	background-image:none;
	padding:0;
	margin:0;
}

#fbbutton {
	clear: both;
	margin-top:1em;
}


footer p {	
	margin: 0 5px;
	padding: 10px 0 10px 0;
	font-size: .75em;
	color: #93928a;
}

#html5logo {
	width:60px;
	

}


/* ====================== Home page items =========================  */


#home main {
	 margin-top:-40px;  
}



/* ====================== slide show ====================== */


#introMovie {
	clear: both;
	margin-top: 80px;
}

#shadow  {
	background: url(images/shadow1.png) no-repeat scroll 0% 0% / 100% auto;
	 
	width: 100%;
	position: relative;
	top: 0px;
	height: 30px;
	background-attachment: scroll;
}

a.cycle-slide {
	border-bottom:none;	
}

.cycle-slideshow {
	width: 100%;	
	height:0;
	padding-top:41.18%;
	overflow:hidden;
	}
	
.cycle-slideshow img, .cycle-slideshow a {
	width: 100%;
	height:auto;
	
}

.cycle-slideshow a:link {
	border-bottom:none;
}
.cycle-slideshow a:visited {
	border-bottom:none;
}

.cycle-slideshow a:hover {
	border-bottom:none;
}


#progress { position: absolute; top: 0; height: 6px; width: 0px; background: rgba(255, 255, 255, 0.6); z-index: 500; }


.cycle-prev, .cycle-next { 
     position: absolute; 
     top: 0; 
     width: 15%; 
     opacity: 1; 
     z-index: 1000; 
     height: 100%; 
     cursor: pointer; 	
     }

.cycle-prev { 
    left: 0;  
    background: url(/images/leftArrow.png) 5% 50% no-repeat;
    }	

.cycle-next { 
    right: 0; 
    background: url(/images/rightArrow.png) 95% 50% no-repeat;
    }	
/*
.cycle-prev:hover, .cycle-next:hover { 
    opacity: 1.0; 
    }

.disabled { 
    opacity: .5; 
    }
*/

 .cycle-overlay { 
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute; 
    z-index: 200;
    font-family: 'Rosario', arial, sans-serif; 
	font-size:12px;
	 font-weight: 700;
	
    bottom: 0px;  
    left:0px;  
   
    color: white; 
    padding: 5px 5px; 
    opacity: 1;  
	  text-shadow: 1px 1px 1px rgba(0,00,00,.9);  /*letter-spacing: .5px;
	 	background: black;   */
}
	
/* I added the .slideDesc class below to the cycle2 JS file: line 8 */
	
.cycle-overlay .slideDesc { 
	color:#eeece7;
	font-size:10px;	
	font-style:normal;

}
  .cycle-overlay div {
	  display:block;
  }

/* ================= Home page thumbnail navigation (section links) ========================= */



#mainMenu   {
	width:100%; /* was 300px */
	display:block;
	margin:0 auto;	
}

#sectionLinks h2 {
	text-align:center;
}

#sectionLinks ul li
 {
	width:100%;	
	/*float:left;*/
	 position: relative;
	 display:block;
}

#sectionLinks ul li a
 {
	text-decoration:none;
	display:block;
	font-size:.8em;
	font-weight:700;
	padding: 2%;
	margin-bottom: 10px;
	border:none;
	 background-color: #fff;
	 
 }
 
 #sectionLinks ul li a img {
	display:block; 
	width:100%;
	/*margin-top:5px;*/
 }


#sectionLinks ul li a span {
	position: absolute;
	left: 13px;
	bottom: 18px;
	background-color: rgba(0,0,0,.00);
	padding: 2px 5px;
	display: block;
	
}
 
#sectionLinks ul li a:link, #sectionLinks ul li a:visited {
	
	/*color:#1e6795;*/
	color:#fff;
	font-weight: bold;
	font-size: 150%;
	text-shadow: #000 0px 1px 3px;
	opacity:1;/**/
	transition-duration:.5s;
}

#sectionLinks ul li a:link img, #sectionLinks ul li a:visited img {
	
}

#about #main, #contact #main {
	/*margin-top:10px;
	border-top: 1px solid #ccc; #97884a;
	padding-top:10px;*/
}


#about #main .fb-page {
	margin: 0 auto 1em auto;  
	width:280px;
	display:block;

 
  }

/* ================= Bio links (about and contact page)  ================= */


#bioLinks h2 {
	text-align:center;	
}

section#bio, section#contactInfo {	
	box-sizing: border-box;
	padding:0 5px 5px;
	
}

#socialNetworkLinkBox  {
	box-sizing: border-box;
	background-color: #eeece7;	
	padding:.5em 1em;
}

#alsoOfNoteLinks {
	margin-top:1em;
	
}

#alsoOfNoteLinks ul li {
	font-size:.85em;
	line-height:2em;
	text-align: center;
}
#about #main #alsoOfNoteLinks ul li a {
	padding: 0 0 0 .7em;
	display:inline;
	
}

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


#emailLink {
	margin:10px 0;
}

#emailImage {	
	position:relative;
	top:5px;
	left:0;
}

#contactForm {
	width:100%;
	overflow:hidden;
}

#contactInfo fieldset {
	margin: 0 0 1em -1em;
	padding: 1em;
	border: solid 0 transparent;
	background-color: #eeece7;
}

#contactInfo form input, #contactInfo form textArea {
	margin-bottom: .3em;
}

#contactInfo form input.fieldText, #contactInfo form textArea.fieldText {
	width:100%;  
	font-size:1em;
	background-color:#fff;
	padding:.2em;
}

.button1 {
	font-family:Arial, Helvetica, sans-serif;
	margin: 1em .5em 0;
}	

p.formCredit {
	font-family:Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	font-style: italic;
	text-align:right;
	clear:both;
}



/* ================= media section intro pages ================= */

h2.sectionTitle {
	text-align:center;
	font-size:.95em;
}
 

#bigThumbColumn {
	box-sizing: border-box;
	width:310px;
	display:block;
	margin: 0 auto 10px auto;
}

#bigThumbColumn a {
	display: block; 
	float:left;
	margin: 10px;
	width:130px;  
	height:130px;  
	background-color: #fff;
}

#bigThumbColumn a:link, #bigThumbColumn a:visited {
	border: none;
	}
	
	
#bigThumbColumn img {
	margin: 5px;
	padding: 0px;
	height: 120px;
	width: 120px;

}

#textColumn {
	clear:left;
	padding:1em;
	/* max-width: 750px;so it doesn't get too wide to read easily */
	margin: 0 auto;
	text-align: justify;
}

/* .seemore and .backtophoto are for the links at the bottom of the photo page. I may use something similar for the drawing page and other pages if a need arrises */

.seemore {

}

.seemore p {
	margin: 0;
	padding: 0;

	font-weight: bold;
		
}
.seemore a:link, 
.seemore a:visited, 
.seemore a:hover  {
	border: none;	
	transition-duration:.5s;
	color: #61624a;
	background-color: #eeece7
}




.backtophoto a {
	display: block;
	 clear: both;
	 text-align: center;
		padding: .5em;
		background-color: #eeece7;
		width: 10em;
		margin: 0 auto 1em;

}

.backtophoto p {
	margin: 0;
	padding: 0;

	font-weight: bold;
		
}
.backtophoto a:link, 
.backtophoto a:visited, 
.backtophoto a:hover  {
	border: none;	
	transition-duration:.5s;
	color: #61624a;
}


/* ================= art pages ================= */

#art, #artcontinued, #artAndText, .artandx  {
	position:relative;	
}

/*
#art .containingBox img {
	display:inline;
	margin-left: 20px;
	margin-right: 20px;	
}
*/

#art img, 
#art video, 
#art object
{
	display:block;
	margin:0 auto 10px auto;
	box-shadow: 2px 2px 5px 0 #666;
	position: relative;
}


#artAndText img.noShadow,
#artAndText div.noShadow img,
#artAndText video.noShadow,  
#artAndText object.noShadow 
{
	box-shadow: none;
}

/* the box containing artwork image and close button image */
#artAndText .artandx {
	display:block;
	margin:0 auto;
	
}

#artAndText  .artandx.veryWide {
	width:100%;
	max-width:900px;
}


#artAndText  .artandx.wide {
	width:100%;
	max-width:800px;
}

#artAndText  .artandx.wideish {
	width:95%;
	max-width:700px;
}

#artAndText  .artandx.square {
	width:90%;
	max-width:600px;
}

#artAndText  .artandx.tallish {
	width:90%;
	max-width:550px;
}

#artAndText .artandx.tall {
	width:90%;
	max-width:500px;	
}


#artAndText  .artandx.veryTall {
	width:85%;
	max-width:400px;
}


/* experiment to see how to handle videos and objects. Move the sizes to  .artandx as above? Will that work? */

#artAndText .artandx.video320 {
	width:100%;
	max-width:320px;

}

#artAndText .artandx.video500 {
	width:100%;
	max-width:500px;

}

#artAndText .artandx.video640 {
	width:100%;
	max-width:640px;

}
#artAndText .artandx.video720 {
	width:100%;
	max-width:720px;
}

/* causes the artwork image to fill the artandx containing box */

#artAndText .artandx img {
	width:100%;
}

#artAndText .artandx video {
	width:100%;
}

.artandx a {
	display:block;
 	border:none;
 	opacity:1;
	/*transition-duration:.5s;*/
}
/*
.artandx a:hover {
	opacity: 1;
	transition-duration:.5s;
}*/

#artAndText div .artandx img.closebtn {
	position: absolute;
 	top:5px;
 	right:5px;
 	margin:0;
 	padding:0;
 	box-shadow:none;
 	width:30px;
}

#artSpecs {
	margin:.8em 0 1em;	

}

#artSpecs h2 {
	color:#93928a;	
	font-style:italic;
	text-align: center;	
	margin-bottom: 0;
	font-size:1.1em;
}

#artSpecs h2.noItalic {
	font-style:normal;
}

#artSpecs p {
	color:#93928a;
	text-align: center;	
}

.artDescriptionImage {
	display:block;
	margin:1em auto;
	
}

#artInfo  {
	width:90%;
	/*max-width:650px;*/
	clear:right;
	margin:0 auto;
	border-bottom: 1px solid #c8c7c5;
	text-align: justify;
	
}
#artDescription {
	

}

#myPrevLink {
	display: block;
	position: absolute;
	left: 0px;
	bottom: 20%;
	text-indent: -999em;
	height: 60%;
	width: 30%;
	border: none;
	background-color: rgba(255,255,255, 0);
	background-image: url(images/leftArrow.png);
	background-repeat: no-repeat;
	/*background-position: -999em center;*/
	margin-left:5%;
background-position: left center;
	opacity: .5;
}



#myNextLink {
	display:block;
	position: absolute;
	right: 0px;
	bottom: 20%;	
	text-indent: -999em;
	height:60%;
	width:30%;
	border:none;
	background-color:rgba(255,255,255,0);
	background-image: url(images/rightArrow.png);
	background-repeat: no-repeat;
	/*background-position: 999em center;*/
	margin-right:5%;
		background-position: right center;
		opacity: .5;
}






#smallthumbNails {
	width: 90%;
	margin: 0 auto 10px auto;
	margin-top: 20px;	
}

 #subThumbnails  {
	margin: 0 auto 10px auto;	
}


#smallthumbNails ul, #subThumbnails ul {
	text-align:center;	
}

#smallthumbNails ul li, #subThumbnails ul li {
	display:inline;
	
}
#smallthumbNails a,  #subThumbnails a {
	border: none;
	

}



#smallthumbNails img {
	width:40px;
	height:40px;
	margin: 2px;
	padding: 4px;	
	opacity: 1.0;
	transition-duration:.5s;
}

#subThumbnails img {
	width:40px;
	height:40px;
	margin: 2px;
	padding: 4px;
	opacity: 1.0;
	transition-duration:.5s;
	
}

#subThumbnails.lightboxthumbs img {
	width:60px;
	height:60px;
	
}

#smallthumbNails a img, #subThumbnails  a img {
	background-color: #fff;
}

.standaloneThumb {
	width:40px;
	height:40px;
	margin-right: 2.5px;
	padding: 2px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;	
}
 






/* ===================================================================================== 
==================================BREAK POINTS==========================================
===================================================================================== */





/* ================================== 400px or wider ================================== 
=====================================================================================*/


@media all and (min-width: 400px) {
  
  #contactInfo form input.fieldText, #contactInfo form textArea.fieldText {
	  width:  95%
  }
  
  #contactInfo fieldset {
	margin: 0 0 1em 0em;
}
 
	/*#art video.video320x240 {
	  width:320px;
  }
  */
  
  h2.sectionTitle {
		font-size:1.2em;
}

  
  #bigThumbColumn {
	  width:388px;
  }
  #bigThumbColumn a {
	width:174px;  /* was 170, and margin below was 5 */
	height:174px;  
}

	
#bigThumbColumn img {
	height: 160px;
	width: 160px;
	margin: 7px;   /* was 5, and width above was 170 */
}

	/* I removed the border and added 2px on each side to the big thumbs to make the background more obvios */
	
	
}


/* =====================================================================================
================================== 450px or wider ================================== */

@media all and (min-width: 450px) {
	
	#home main {
		margin-top:-30px;
	}
	
	#home main h2 {
	font-size:1.5em;	
}

	#sectionLinks ul {
		
	
	}
	
#sectionLinks ul li
 {
	width:50%;	
	float:left;
	box-sizing: border-box;
}

	#home .rightcol {
		padding-left:.5%;
		
	}
	
	#home .leftcol {
		
		padding-right: .5%;
	}

}


/* ================================== 600px or wider ================================== =====================================================================================*/

@media all and (min-width: 600px) {


	
 #searchForm {
	  margin:0;
	  width: 300px;
	  position:absolute;
	  left:auto;
	  top: 40px;
	  right: 1em;
	  text-align:right;
  }
 
  #search {
		padding:0;
		margin:0;  
  }
  #searchField {
	   width: 200px;
  }
	
  input#searchBtn {
		color: #fff ;
 		background-color: #627d8e;

}
	/*
	#fbbutton {
	position:absolute;
	  top: 75px;
	  right: 1em;
		margin: 0;
	}	
	
*/
  /* ================= Utility @600 ================= */
  
  #nav-collapse {
	  display: none;
  }
  
  #utility ul
  {
	  display:block;	
  }
  
  #utilityNav {	
	  float:left;
  }
  
  #utilityNav li {
	  float:left;	
	  padding:0 30px 0 5px;
  }
  
  #utilityNav li.last {
	  padding:0;
  }
  
  
  #utilityNav li a {
	  line-height:32px;	
	  color:#fff;
	  font-size:.9em;
	  border:none;
	  background: none;
  }
  
  
  #utilityNav li a:hover {
	  text-decoration:underline;
  }
	  
#utilityNav li.current a {
		background: none;
	color: #fff;
	
	}  
	
  #classfilesLink {
	  position:absolute;
	  right:5px;
	  top:0;	
	  
  }
  
  #utilityNav li.last a {
	  border-bottom: none;
  }
  
  /* ================= footer @600 =================  */
  footer p {
	  text-align: center;
	  margin: 0 20px;
  }
  
  
  /* ================= Home page items @600 =================  */

  .cycle-overlay { 
 
	font-size:18px;
	  bottom: 10px;  
    left:10px;
	  letter-spacing: .5px;
	font-weight: 700;
	  padding: 10px 15px; 
}
	
/* I added the .slideDesc class below to the cycle2 JS file: line 8 */
	
.cycle-overlay .slideDesc { 
	font-size:14px;	
}



  
#sectionLinks ul li
 {
	width:50%;	 
	/*text-align:center;
	float:left;*/
}
	
  /* ================= Bio & Contact items @600 =================  */
	
 section#bio, section#contactInfo  {
	  padding:0 5px 0;
	  
  }
  
#bioLinks  {
	  padding:1em;
	  padding-top:0;	
  }
  
  /* =================  art pages @600 ================= */
  

 
  #bigThumbColumn {

	  width:588px;
	 
	  
  }
  
  #smallthumbNails {
	    clear:both;
		
  }
	
  .artDescriptionImage {
	  float: right;
	  margin: 0 0 1em 1em;
  }
  
  
}
 

 
/* ================================== 690px or wider ==================================
=====================================================================================*/
  
@media all and (min-width: 690px) {
	
	
	
  #socialNetworkLinkBox {
	  width:50%;
	  float:left;
  }
  
  #alsoOfNoteLinks {
	  float:right;
	  width: 45%;	
  }

}

/* ================================== 768px or wider ==================================
=====================================================================================*/

@media all and (min-width: 768px) {
	

   #nav-collapseMedia {
	  display: none;
  }
  

 
/* ================= Main navigation (portfolio section tabs) @768 ================= */
	
	
#home nav#portfolioSections {
	
	display:block;
}
	
	
	
  #portfolioSections ul
  {
	  display:block;	
	/*  padding: 0 1em;*/
	  	   box-sizing: border-box;
	  
  }	
  
  #portfolioSections ul li {         
	  float: left;
	  width:20%; 
	 border-left: 2px solid #fff;
	   border-right: 2px solid #fff;
	 /*  border-top: 1px solid #eeece7;*/
  }
  

  
  #portfolioSections ul ul li {
	  width:100%;
	  
  }
  
  #portfolioSections ul li a {
	  line-height: 2.5em;
	  font-size: 0.85em;
	  font-weight: bold;
	 background-color:  #eeece7;
	 /* background-color: #fff; */
	  border: none;
	  
  }
  
    #portfolioSections ul li a:hover {
  		/*border-top-color:#eeece7;#e0dcc6;  pale gold */
 		background-color: #d2cfca;/*#faf7f1;*/
		color:#2f2e2c;
	}
 #portfolioSections ul li.first {
	  border-left:none;
  }
	
  #portfolioSections ul li ul a {
	  border-right: 1px solid #fff;
  }
  
  #portfolioSections ul li a.current {
	border-top: none;/*1px solid #eeece7; #97884a;*/
	border-left:none;
	border-right:none;
	border-bottom:none;
	  background-color: #93928a;
	  color: #fff;
  }
  
  #portfolioSections ul li.first a.current
	{
	border-left: 1px solid #eeece7;
}

#portfolioSections ul li.last a.current {
	border-right: 1px solid #eeece7;  

}
   
   
/* added to put some margin around the slide show at larger size */
	/*
#introMovie {
	margin-left: 2%;
	margin-right: 2%;
}

#shadow {
	width: 96%;
	margin-left: 2%;
}
	*/
 /* #sectionLinks*/
	
#introMenu ul li {
	  width:25%;
	   margin-left:0;
	   margin-right: 0;
  }
	
 
#introMovie {
	margin-top: 10px;
}
	
  /* ================== About and contact items @768 ====================  */
  
  
  #bioLinks {
	  clear:both;
  }
  
  
  #contactForm {
	  width:50%;
	  float:left;
  }
	
	#contactSection2 {
		width:47%;
		float: right;
		border-left: 1px solid #c8c7c5;
		padding-left: 2%;
		box-sizing: border-box;
	}
   
  #artInfo{
	  max-width: 820px;
	  margin: 0 auto;
  }
  
	
#textColumn {
	
	-webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2;
	  
	-webkit-column-gap: 2em; 
    -moz-column-gap:2em; 
    column-gap: 2em;
	  
	 
	-webkit-column-rule: 1px solid #eeece7 ; 
    -moz-column-rule: 1px solid #eeece7 ; 
    column-rule: 1px solid #eeece7 ;
	
	padding-bottom: 1em;

}
  #artInfo #artDescription {
	
	-webkit-column-count: 2; 
    -moz-column-count: 2; 
    column-count: 2;
	  
	-webkit-column-gap: 2em; 
    -moz-column-gap:2em; 
    column-gap: 2em;
	  
	 
	-webkit-column-rule: 1px solid #eeece7 ; 
    -moz-column-rule: 1px solid #eeece7 ; 
    column-rule: 1px solid #eeece7 ;
	
	padding-bottom: 1em;

}
	#artInfo #artDescription.nocolumns {
	-webkit-column-count: 1; 
    -moz-column-count: 1; 
    column-count: 1;
	
	}
	
	#artInfo #artDescription.nocolumnscentered {
	-webkit-column-count: 1; 
    -moz-column-count: 1; 
    column-count: 1;
		text-align: center;
	}
	
	
}
  
  

/* ================================== 770px or wider ==================================
=====================================================================================*/

/* Established to create rollover effects for thumbnail links. Rollover not needed at smaller sizes. I put this at 770 so that iPads would not have rollover effects 

I also move switch from slide show arrows to pagers here thinking arrows better for mobile devices, pagers better for computers with mice*/


@media all and (min-width: 770px) {
	
	.cycle-prev, .cycle-next { 
    display: none; 	
     }

.cycle-pager {
	display:block;
	width: 100%;
	z-index: 510;
	position: absolute;
	bottom: -10px;
	text-align: right;
	right:20px;
}
	
.cycle-pager span { 
    font-family: arial; 
	font-size: 50px; 
	width: 16px; 
	height: 16px; 
	cursor: pointer;
	color:rgba(238,233,223,.7);
	text-shadow: 1px 1px 5px rgba(0,00,00,.7);
	 	
}
.cycle-pager span.cycle-pager-active { 
	color:rgba(255, 255, 255, 1.0);
}

.cycle-pager > * { 
	cursor: pointer; 
	
	}


	#sectionLinks ul li a:link, #sectionLinks ul li a:visited {
	
	opacity:.7;
}

#sectionLinks ul li a:link img, #sectionLinks ul li a:visited img {
	
}
#sectionLinks ul li a:hover {
	color: #fff;
	text-shadow: #000 0px 1px 2px;
	transition-duration:.5s;
	opacity:1;
	background-color: #eeece7;
	
}



#bigThumbColumn a:link, #bigThumbColumn a:visited {
	
	border: none;
	opacity: .7;
	transition-duration:.5s;
	}
	
#bigThumbColumn a:hover {
	

	opacity: 1.0;
	transition-duration:.5s;
	background-color: #eeece7;
	}

#smallthumbNails img {
	opacity: .7;
	transition-duration:.5s;

}

#subThumbnails img {	
	opacity: .7;
	transition-duration:.5s;
}

 #smallthumbNails a:hover img,  #subThumbnails a:hover img{
	 opacity: 1.0;
	 background-color: #eeece7;
	 transition-duration:.5s;
	}

.seemore a:hover {
	background-color: #d2cfca;
	color: #000;

}
.backtophoto a:hover {
	background-color: #d2cfca;
	color: #000;

}
	
#myPrevLink {	
	background-position: -999em center;
}

#myPrevLink:hover {
	background-position: left center;
	opacity: 1;
}

#myNextLink {	
	background-position: 999em center;
}

#myNextLink:hover {
	background-position: right center;
	opacity: 1;
}
	
}
/* ================================== 800px or wider ==================================
=====================================================================================*/


@media all and (min-width: 800px) {
	
	#bigThumbColumn {
		width: 778px;
	}

} 


/* ================================== 990px or wider ==================================
=====================================================================================*/


@media all and (min-width: 990px) {

  
  #socialNetworkLinkBox {
	  width:100%;
	  float:none;
  }
  
  #alsoOfNoteLinks {
	  float:none;
	  width:100%;
  }
  
  
  
  section#bio {
	  padding:0 0 0 5px;
	  margin:0;
	  width:64%;
	  float:left;

 }

	
#bioLinks {
	  clear:none;
	  margin:1.5em 0 0 0;
	  padding:0 0 0 2%;
	  width:32%;	 /* was 26% */
	  float:right;
	  border-left: 1px solid #ccc;  
	  border-top: none;
  }
  

  #bioLinks ul {
	  column-count: 1;
	  
  }
  
  
  #bioLinks .bioLinkBox ul li {
	  font-size:.85em;
	  line-height:1.5em;
  }
  

#contactForm {
		width:60%;
	}
	
  #contactSection2 {
		width:38%;
		float: right;
		border-left: 1px solid #c8c7c5;
		padding-left: 1%;
		box-sizing: border-box;
	}
  
  
  
  
  #contactText {
	  width:100%;
	  float:none;	
  }
  
  
  /* ================== Art pages @990 ================== */
  
  #bigThumbColumn {
	  margin-top: 0px;
	 width: 972px;
  }


}
/* ================================== 1032px or wider ==================================
=====================================================================================*/


@media all and (min-width: 1032px) {
	
#container {           /*  aka "wrapper"   */
	padding:0 4%;
	}
#searchForm {
	right:4%;	
	}
#fbbutton {
	
	  right: 4%;
	}	
	

}