@charset "UTF-8";

/****************************************************************** GLOBAL DOCUMENT STYLES ******************************************************************/
HTML, body, p {
	margin: 0px;
	padding: 0px;
}

body {
	text-align: center;
	background-color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: 50px;
}

#container {
	width: 984px;
	height: 768px;
	margin: 0 auto;
	text-align: left;
	background-color: #FFF;
	background-image: url(../topo.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

a {
	text-decoration: none;
	color: #666;
	outline: none;
}

/****************************************************************** DIV CONTAINING NAVIGATION BAR & CLOUD, LOGO ******************************************************************/

/* div containing navigation bar & cloud, and logo */
#nav_logo {
	width: 984px;
	height: 180px;
}

#navigation {
	margin: 0px 0px 20px;
	height: 180px;
	width: 778px;
	float: left;
}

#logo {
	margin: 0px 0px 0px;
	width: 204px;
	float: left;
	height: 180px;
	text-align: right;
	padding: 0px;
	clear: right;
}

#logo p {
	margin-top: -2px;
}

.katerie {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1.2em;
	font-style: italic;
	color: #F00;
	letter-spacing: 0.1em;
	padding-right: 1px;
}
.gladdys {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	color: #666;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/****************************************************************** TOP CATEGORY NAVIGATION MENU ******************************************************************/
#menu {
	width: 750px;
	margin: 0px;
	padding: 0px;
	clear: right;
	float: left;
} /* dark grey bg */

#menu ul{
	text-transform: capitalize;
	list-style: none;
	font-family: Arial, Helvetica, sans-serif;
	color: #999;
}

#menu ul li{
	display: inline;
	float: left;
	margin-right: 65px;
	margin-left: 7px;
} /* Makes the link all appear in one line, rather than on top of each other */

#menu ul li a{
	float: left;
	text-decoration: none; /* removes the underline from the menu text */
	color: #666;
	font-size: 1em;
	letter-spacing: .15em;
	padding-top: 3px;
	padding-bottom: 0px;
}

#menu ul li a:visited{ /* This bit just makes sure the text color doesn't change once you've visited a link */
	text-decoration: none;
}

#menu ul li a:hover, .menu ul li .current{
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
} /* change the background color of the list item when you hover over it */

/****************************************************************** TICKING - THE DECORATIVE HORIZONTAL ELEMENT ******************************************************************/

#ticking {
	width: 675px;
	float: left;
	clear: right;
	margin: 0px;
	padding: 0px;
}

#ticking ul {
	display: inline;
	list-style: none;
	margin-left: 30px;
}

#ticking ul li {
	float: left;
	padding: 1px 10px 0px 20px;
	border-top: 1px none #CCC;
	border-bottom: 1px solid #CCC;
	border-left: 1px solid #CCC;
	color: #FFF;
	font-size: 0.7em;
	margin: 8px 0px 0px;
}

/*puts the lst vertical line on the ticking
*/

/*.end {
	border-right: 1px solid #CCC;
	display:inline;
}
*/
/****************************************************************** NAVIGATION CLOUD FOR SUBCATEGORIES (LEARN, MAKE, TEACH, & WRITE) ******************************************************************/
/*ID cloud styles the list of the subcategory divs in terms of font, horizontality of the list*/

#cloud{
	width: 770px;
	margin: 0px;
	padding: 0px;
	clear: right;
	float: left;
	position: relative;
	visibility: visible;
} /* dark grey bg */

#cloud ul li{
	list-style: none;
} /* Makes the link all appear in one line, rather than on top of each other */

#cloud ul li a{
	text-decoration: none; /* removes the underline from the menu text */
	color: #999;
	font-size: 0.75em;
	letter-spacing: 0.1em;
	font-style: italic;
}

#cloud ul li a:visited{ /* This bit just makes sure the text color doesn't change once you've visited a link */
	text-decoration: none;
	color: #CCC;
}

#cloud ul li a:hover, .menu ul li .current{
	color: #666;
	font-size: .9em;
}

#makecat {
	position: relative;
	left: 0px;
}

/*makecat is the relative div that hides and show make subcategories*/

/*start position styles for makecat*/
.seed {
	position: absolute;
	left: 0px;
	top: -10px;
}

.sustenance {
	position: absolute;
	left: 110px;
	top: 25px;
}

.depth {
	position: absolute;
	top: 25px;
	left: 25px;
}


.compost {
	position: absolute;
	left: 3px;
	top: 59px;
}

.rutabaga {
	position: absolute;
	left: 150px;
	top: -10px;
}

.trace {
	position: absolute;
	left: 240px;
	top: 25px;
}


.cranefly {
	position: absolute;
	left: 98px;
	top: 59px;
}
.time {
	position: absolute;
	left: 260px;
	top: -10px;
}

.enumeration{
	position: absolute;
	left: 330px;
	top: 25px;
}

.down {
	position: absolute;
	left: 460px;
	top: 25px;
}

.fruitmake {
	position: absolute;
	left: 340px;
	top: 59px;
}
.sanctuary {
	position: absolute;
	left: 390px;
	top: -10px;
}


.woodpecker {
	position: absolute;
	left: 210px;
	top: 59px;
}


.strollermake {
	position: absolute;
	left: 540px;
	top: 25px;
}



.forestcolab {
	position: absolute;
	left: 426px;
	top: 59px;
}

.augmentedmake {
	position: absolute;
	left: 500px;
	top: -10px;
}

.archive {
	position: absolute;
	left: 560px;
	top: 59px;
}

/*end position styles for make category*/


/*writecat is the relative div that hides and show write subcategories*/
#writecat {
	position: relative;
	left: -4000px;
}

/*start position styles for writecat*/
.seed_write {
	position: absolute;
	top: -10px;
	left: 0px;
}

.agent {
	position: absolute;
	top: 55px;
	left: 70px;
}
.fruit {
	position: absolute;
	top: 20px;
	left: 170px;
}
.stroller {
	position: absolute;
	top: 20px;
	left: 25px;
}
.augment {
	position: absolute;
	left: 210px ;
	top: -10px;
}
.remote {
	position: absolute;
	left: 350px;
	top: 20px;
}
.landscape {
	position: absolute;
	top: -10px;
	left: 400px;
}
.ditch {
	position: absolute;
	left: 270px;
	top: 55px;
}

.artist {
	position: absolute;
	left: 450px;
	top: 55px;
	width: 200px;
	white-space: nowrap;
}
/*end position styles for make writecat*/


/*teachcat is the relative div that hides and show teach subcategories*/
#teachcat {
	position: relative;
	left: -4000px;
}

/*start position styles for teach category*/
.mapping {
	position: absolute;
	left: 5px;
	top: -10px;
}
.video {
	position: absolute;
	left: 35px;
	top: 25px;
}
.thesis {
	position: absolute;
	left: 75px;
	top: 60px;
}

.food {
	position: absolute;
	left: 201px;
	top: -10px;
}

.sensors {
	position: absolute;
	left: 152px;
	top: 25px;
}

.programming {
	position: absolute;
	left: 200px;
	top: 60px;
}

.experiments {
	position: absolute;
	left: 380px;
	top: 60px;
}

.nature {
	position: absolute;
	top: 25px;
	left: 300px;
}
.care {
	position: absolute;
	top: -10px;
	left: 425px;
}
/*end position styles for teach category*/

/*learncat is the relative div that hides and show learn subcategories*/
#learncat {
	position: relative;
	left: -4000px;
}

/*start position styles for learn category*/
.artistStatement {
	position: absolute;
	left: 20px;
	top: 10px;
}
.contact {
	position: absolute;
	left: 175px;
	top: -10px;
}
.teach {
	position: absolute;
	left: 270px;
	top: 30px;
}
.vitae {
	left: 390px;
	position: absolute;
	top: -10px;
}
.bio {
	position: absolute;
	left: 470px;
	top: 10px;
}
/*end position styles for learn category*/

/****************************************************************** CONTENT REGION STYLES ******************************************************************/

/* base content div, for containing category-specific content regions; inherited from base_template */
#base_content {
    background-color: #FFF;
    height: 588px;
    float: left;
    padding: 0px;
}
#container #base_content {
}
#container #base_content {
}

/* Content on pages with only one content pane, such as pages in the LEARN and TEACH categories */
#single_pane {
	background-color: #FFF;
	width: 984px;
	margin-top: 0px;
	margin-left: 0px;
	height: 500px;
	float: left;
	margin-right: 0px;
	padding: 0px;
}

#single_pane p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 1.6em;
	text-align: left;
	letter-spacing: 0.04em;
	color: #666;
}


/****************************************************************** INDEX.HTML PAGE STYLES ******************************************************************/
#index_title p {
	font-variant: normal;
	font-size: 0.9em;
	font-weight: bold;
	color: #666;
	font-style: italic;
	text-align: right;
	margin-right: 52px;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0.25em;
}

#index_content {
	margin: 0px 45px 0px 0px;
}

#index_content p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.2em;
	line-height: 2.2em;
	text-align: justify;
	letter-spacing: 0.15em;
	color: #999;
	font-style: normal;
	display: inline;
}

.index_bold {
	color: #666;
}

.index_more {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.65em;
	text-align: left;
	letter-spacing: 0em;
	color: #999;
	font-style: normal;
}

#index_ticks {
	width: 675px;
	float: right;
	clear: right;
	margin: 25px 53px 0px 0px;
	padding: 0px;
}

#index_ticks ul {
	display: inline;
	list-style: none;
	margin-left: 30px;
}

#index_ticks ul li {
	float: left;
	padding: 1px 10px 0px 20px;
	border-top: 1px none #CCC;
	border-bottom: 1px none #CCC;
	border-left: 1px solid #CCC;
	color: #FFF;
	font-size: 0.7em;
	margin: 8px 0px 0px;
}

/*puts the lst vertical line on the ticking
*/

.end {
	border-right: 1px solid #CCC;
}

/****************************************************************** MAKE CONTENT SECTION STYLES ******************************************************************/

/* STYLES ASSOCIATED WITH DESCRIPTION OF MY ARTWORK, IN MAKE SECTION */
#make_description {
	background-color: #FFF;
	width: 334px;
	margin-top: 0px;
	margin-left: 0px;
	height: 580px;
	float: left;
	margin-right: 20px;
	padding: 0px;
	outline: none;
}

#make_description p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 1.6em;
	text-align: left;
	letter-spacing: 0.04em;
	color: #666;
	font-style: normal;
}

.title-archive {
	font-variant: small-caps;
	font-size: .8em;
	font-weight: bold;
	color: #333;
	letter-spacing: 0.15em;
	font-style: normal;
	line-height: 1.5.0em;
}
.description-archive { 
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	line-height: 1.5em;
	text-align: left;
	letter-spacing: 0.04em;
	color: #666;
	font-style: normal;
	margin-right: 40px;
}
.medium-archive {
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	font-size: .75em;
	line-height: 1.4em;
	
}

/* STYLES ASSOCIATED WITH MY ARTWORK, IN MAKE SECTION */
#make_artwork {
	background-color: #FFF;
	height: 580px;
	width: 630px;
	float: left;
	clear: right;
	margin-top: 0px;
	margin-bottom: 20px;
}

/****************************************************************** TEACH CONTENT SECTION STYLES ******************************************************************/

/* Description of student work */
#description {
	background-color: #FFF;
	width: 410px;
	margin-top: 0px;
	margin-left: 0px;
	height: 500px;
	float: left;
	margin-right: 20px;
	padding: 0px;
	outline: none;
}

#description p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 1.6em;
	text-align: left;
	letter-spacing: 0.04em;
	color: #666;
	font-style: normal;
}

.title {
	font-variant: small-caps;
	font-size: 1em;
	font-weight: bold;
	color: #333;
	letter-spacing: 0.15em;
	font-style: normal;
	line-height: 1.5.0em;
}


.studentName {
	font-style: normal;
	font-weight: bold;
	color: #666;
	letter-spacing: 0.1em;
	margin-right: 10px;
}

.medium {
	font-style: italic;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 0.1em;
	font-size: .9em;
	line-height: 1.4em;
	
}

/****************************************************************** STYLES FOR SLIDING IMAGE CAROUSEL FOR TEACH SECTION ******************************************************************/

/* the div containing the sliding carousel */
#studentwork {
  background-color: #FFF;
  position: relative;		/* relative position allows offsetLeft to be calculated */
  height: 500px;			/* div height */
  width: 554px;				/* div width */
  float: left;
  clear: right;
  margin: 0px 0px;
  overflow: hidden;			/* ensure no scroll bars; users with javascript disabled won't be able to scroll through images */
}

/* the unordered list containing the images in the sliding menu */
#studentwork_list {
  display: block;
  height: 500px;			/* list height */
  width: 10000px;			/* max width; only applies to users who have javascript disabled */
  padding: 0px 0px;			/* padding values */
  margin: 0px 0px 0px 10px;			/* set default margin to 0 */
  list-style: none;			/* ensure list is unordered */
}

/* style values for individual items in sliding menu list */
#studentwork_list li {
  display: inline-block;	/* inline-block setting allows caption to be displayed below image, and still retain horizontal scrolling */
  padding: 0px 10px;
  margin: 0px 0px 0px 0px;
}

/* style values for anchor tags in sliding menu */
#studentwork_list a {
  display: inline;			/* forces anchor elements to be displayed linearly */
  text-decoration: none;
}

/* styles for captions associated with images */
#studentwork_list span {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 1.6em;
	text-align: center;
	letter-spacing: 0.04em;
	color: #666;
	font-style: normal;
	display: block;
	margin: 3px 0px 0px 0px;
}

/* style values for text in span tag for each item, that appears on mouse hover event */
#studentwork_list a:hover span {
  display: block;
}

/* style values for images in sliding menu */
#studentwork_list img {
  border: none;					/* no border */
  display: block;				/* display as block element so image can be centered */
  margin-left: auto;			/* setting left & right margins to auto centers image */
  margin-right: auto;
}

/* style values for mouse hover events over individual images in sliding menu */
#studentwork_list a:hover img {
  filter:alpha(opacity=50);		/* make images 50% transparent on mouseover */
  opacity: 0.5;
}

/* style for div elements used to contain images & captions in scrolling image lists */
div.scrollItem {
  width: auto;				/* setting width to auto allows width of div to be determined dynamically using clientWidth property */
}

/****************************************************************** STYLES FOR SCROLLING TEXT THAT USED THE FLEXCROLL PLUGIN ******************************************************************/

/* the div element containing the scrolling text for the pages in the learn and write categories */
#scrolling_text {
	width: 964px;			/* fixed width */
	height: 500px;			/* fixed height */
	overflow: auto;
	position: relative;		/* IE overflow fix, position must be relative or absolute*/
	margin: 0em;			/* including "auto" creates a 10px margin */
	padding-right: 10px;
	outline: none;
}

/* the left pane div element containing the scrolling text for the pages in the make and teach categories */
#left_pane_scrolling_text {
	width: 410px;					/* fixed width */
	height: 2000px;					/* fixed height */
	overflow: auto;
	position: relative;				/* IE overflow fix, position must be relative or absolute*/
	margin: 0em;					/* including "auto" creates a 10px margin */
	padding-right: 10px;
	outline: none;
}

/*.scrollgeneric {
	line-height: 1px;
	font-size: 1px;
	position: absolute;
	top: 0;
	left: 0;
}

 the vertical scrollbar area 
.vscrollerbase {
	width: 5px;
	background-color: #FFF;
}

the vertical scrollbar itself
 .vscrollerbar {
 	width: 5px;
 	background-color: #E4E4E4; 
	/*background-image: url(flexcroll/dashed_line_4.png);
 }*/

/* the horizontal scrollbar area */
.hscrollerbase {
	height: 5px;
	background-color: #FFF;
}

/* the horizontal scrollbar itself */
.hscrollerbar {
	height: 5px;
	background-color: #E7E7E7;
}

.scrollerjogbox {
	width: 5px;
	height: 5px;
	top: auto; 
	left: auto;
	bottom: 0px; 
	right: 0px;
	background-color: gray;
}


/* mobile site styling */


#nav_logo { display:block; }
#nav_logo_mobile, #index_ticks { display:none; }

.col {  display:inline-block; vertical-align: text-top; }
.col img { max-width:100%; height:auto; }
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;} 
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.col-13 {width: 55%;}


@media only screen and (max-width: 767px) {
  /* For mobile phones: */
  body { margin-left:0px !important;
        padding-left: 20px;
        padding-right: 20px; }
  [class*="col-"] {
    width: 100%;
  }
  
  #base_content div, #base_content iframe { width:100% !important; max-width:100% !important; height:auto !important; }
  #base_content img, #make_artwork img { margin-top:15px; width:100% !important; max-width:100% !important; margin-left: 0px; padding-left:0px !important; }
  #index_content {
    margin: 5px 0px 0px 0px;
}

  #index_content p {
    font-size: 1.2em;
    line-height: 1.4em;
}

#single_pane p, #make_description p {
        font-size: 1.2em;
        line-height: 1.4em;
        margin-right: 0px;
}

  #single_pane, #container, #base_content { width:100% !important; height:auto !important; }
  #base_content { padding-top: 25px; }
    #nav_logo { display:none; }
    #nav_logo_mobile { display:inline-block; padding-top:15px; padding-bottom:15px; }
    
    .logo-area{ right: 20px;
        padding: 0px 0px 0px 0px;
        position: absolute; }
    
    a#logo{width:210px; height:18px; text-indent:-9999px; display:block;}
    a#logo:link, a#logo:visited{background-position:top left;}
    a#logo:hover, a#logo:active{background-position:bottom left;}
    
    .fa-bars{padding:5px 0px 0px 0px; font-size:26px !important;}
    
    
    .menu-area{float:left; width:100%;}
    a.menu-closed, a.menu-open{padding:5px; width:36px; height:36px; display:block; text-align:center; float:left;}
    
    a.menu-closed:link, a.menu-closed:visited{background:#e1e1e1; color:#666;}
    a.menu-closed:hover{background:#666; color:#fff;}
    a.menu-closed:active{background:#333; color:#fff;}
    
    a.menu-open:link, a.menu-open:visited{background:#e1e1e1; color:#333;}
    a.menu-open:hover{background:#666; color:#fff;}
    a.menu-open:active{background:#333; color:#fff;}
    
    ul.nav-menu {height:auto; width:100%; display:none; z-index:9;  font-weight:300; list-style: none; padding-left:0px; }
    li#menu-make {margin-top:10px;}
    ul.nav-menu li.menu {width:100%; background:#e3e3e3;}
    ul.nav-menu > li {float: none; width: 100%;}
    
    ul.nav-menu ul {position: relative; display:block; background: #fff; padding-bottom:10px; list-style: none;}
    
    ul.nav-menu li {cursor: pointer; width:100%;}
    ul.nav-menu a {
        display: block; 
        color: #a1a1a1; 
        font-size: 1.2em;
        line-height: 1.4em;
    	border-bottom:1px dashed #e1e1e1; padding:5px 20px;
    	text-decoration:none;
    	text-transform:uppercase;
    }
    
    ul.nav-menu a.has-sub{color:#333; border-bottom:none; display:block; padding:5px 20px;}
    
    ul.nav-menu li:hover, ul.nav-menu li:active {color:#333;}
    ul.nav-menu li:hover ul, ul.nav-menu li:active ul {display: block;}
    
    ul.nav-menu a:hover, ul.nav-menu a:focus, ul.nav-menu a:active{color:#333;}
    ul.nav-menu a.has-sub:hover, ul.nav-menu a.has-sub:focus, ul.nav-menu a.has-sub:active{background:none;}
    
    .nav-hide{display:none;}
    .nav-show{display:block;}
}