@charset "UTF-8";
/* CSS Document */

body {
background-image: url('images/background.png');
font-family: helvetica;
}

#page {  /*page size, adjust to adjust entire sites page width*/
width: 1000px;
margin-left: auto;
margin-right: auto;
}

#logolt {   /*sets the JohnKo logo floating in the upper left hand corner of the page*/
float: left;
}

#logort {   /*sets the JohnKo logo floating in the upper right hand corner of the page*/
float: right;
}

#heading {  /*sets height and width of heading as well as font and background color*/
margin-left: auto;   /*centers on page*/
margin-right: auto;
padding-top: 5px;
padding-bottom: 5px;
width: 400px;
background-color: #4c4c4c;
font-family: helvetica;
line-height: 40%; /*controls how much space is between each line*/
text-align: center;
}

#jcr {   /*first line of text in heading*/
color: #ffffff;
font-variant: small-caps;
font-size: 40px;
}

#jcrtwo {   /*second line of text in heading*/
color: #b2b2b2;
text-transform: uppercase;
}

#jcrthree {   /*third line of text in heading*/
color: #000000;
text-transform: uppercase;
}

#mainNav {   /*gives main-nav a small padding on top*/
margin-top: 20px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
padding-bottom: 30px; /*creates seperations between main-nav and content divs*/
list-style: none;
}

#mainNav a {   /*default color and style of main-nav buttons*/
color: #000000;
padding: 3px;
display: block;
background-color:#bbbbbb; 
text-align: center;
height: 20px;
width:180px;
-moz-border-radius: 25px 10px / 10px 25px; /*changes border style of main-nav buttons*/
border-radius: 25px 5px / 5px 25px;
}

#mainNav a:hover {   /*sets hover coloring for main-nav buttons*/
background-color: #2b2b2b;
color: #bbbbbb;
}

#mainNav li {   /*sets the width of each main-nav button (if changed, change total width as well)*/
float: left;
width: 200px;
}

#home #homelink,
#press #presslink,
#about #aboutlink {   /*sets the main-nav button color scheme for current page*/
background-color: #2b2b2b;
color: #bbbbbb;
}

#home, #press, #about, #nobody {   /*sets the total width main-nav buttons and centers*/
width: 600px;
margin-left: auto;
margin-right: auto;
}

#backlink { /*sets the spacing for the link back between the header and art-image area*/
width: 600px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 15px;
}

a.backlinks, a:hover.backlinks { /*sets the text layout for the back button on art-image pages*/
text-decoration: none;
color: #ffffff;
}

a.email { /*sets the link style for the contact page*/
text-decoration: underline;
color: #ffffff;
}

a:hover.email {  /*makes email text black when you scroll over*/
text-decoration: underline;
color: #000000;
}

.fiveoh { /*main content area (centers under main-nav buttons) - images/text/etc*/
width: 500px;
margin-left: auto;
margin-right: auto;
}

.threetwooh { /*main content area (centers under main-nav buttons) - images/text/etc*/
width: 320px;
margin-left: auto;
margin-right: auto;
}

.fourtwooh { /*press page sizing*/
width: 420px;
margin-left: auto;
margin-right: auto;
}

.fourseventwo {  /*sets spacing for four-by images on art-image page*/
width: 472px;
margin-left: auto;
margin-right: auto;
}

.threefoureight {  /*sets spacing for three-by images on art-image page*/
width: 348px;
margin-left: auto;
margin-right: auto;
}

.threesixoh {  /*sets spacing for three-by pdfs on art-image page*/
width: 360px;
margin-left: auto;
margin-right: auto;
}

.twotwofour {  /*sets spacing for two-by images on art-image page*/
width: 224px;
margin-left: auto;
margin-right: auto;
}

.twofouroh {  /*sets alt spacing for two-by images on art-image page*/
width: 240px;
margin-left: auto;
margin-right: auto;
}

.oneonefive {  /*sets spacing for one-by images on art-image page*/
width: 115px;
margin-left: auto;
margin-right: auto;
}

img.lspace {  /*spacing for far left side image on art-image pages*/
padding: 0px;
margin-left: 0px;
margin-right: 9px;
margin-bottom: 10px;
}

img.space {  /*spacing for middle images on art-image pages*/
padding: 0px;
margin-left: 9px;
margin-right: 9px;
margin-bottom: 10px;
}

img.rspace {  /*spacing for far right side image on art-image pages*/
padding: 0px;
margin-left: 9px;
margin-right: 0px;
margin-bottom: 10px;
}

img { /*sets borders for image links, so they don't show up*/
border: none;
}

.tinfo {   /*sets up image/text buttons in content area*/
padding: 0px;
margin-top: 0px;
margin-left: 5px;
margin-right: 5px;
margin-bottom: 30px; /*creates seperations between work and next line of images*/
list-style: none;
float: left;
}

.tinfo a {   /*default color and style of image/text buttons*/
padding: 0px;
color: #ffffff;
display: block;
background-color:#4c4c4c; 
text-align: center;
font-size: small;
text-decoration: none;
}

.tinfo a:hover {   /*sets hover coloring for image/text buttons*/
background-color: #2b2b2b;
color: #bbbbbb;
}

.ainfo {   /*sets up image/text buttons on art pages*/
padding: 0px;
margin-top: 0px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px; /*creates seperations between work and next line of images*/
list-style: none;
float: left;
}

.ainfo a {   /*default color and style of image/text buttons*/
padding: 0px;
color: #ffffff;
display: block;
background-color:#4c4c4c; 
text-align: center;
font-size: small;
text-decoration: none;
}

.ainfo a:hover {   /*sets hover coloring for image/text buttons*/
background-color: #2b2b2b;
color: #bbbbbb;
}

.clear {  /*clears formatting - forces content to next line*/
clear: both;
}

#worktext { /*defines the area for the text below art-images*/
margin-top: 10px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
width: 440px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 1px;
padding-top: 1px;
background-color:rgba(43,43,43,0.4);
-moz-border-radius: 15px;
border-radius: 15px;
}

.fiveohoh { /*main content area (centers under main-nav buttons) - images/text/etc*/
width: 500px;
margin-left: auto;
margin-right: auto;
background-color:rgba(43,43,43,0.4);
padding-top: 1px;
padding-bottom: 1px;
padding-left: 10px;
padding-right: 10px;
-moz-border-radius: 15px;
border-radius: 15px;
}

.hwhite { /*heading color for about page*/
color: #ffffff;
}

.pwhite { /*text color for about page*/
font-size: small;
list-style: none;
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
color: #ffffff;
}

.nolist {
list-style: none;
list-style-type: none;
}

#arttext { /*sets the size for text in the worktext area*/
font-family: helvetica;
font-size: smaller;
color: #ffffff;
}

#arthead { /*sets the size for the heading in the worktext area*/
font-family: helvetica;
font-size: xx-large;
text-align: center;
font-weight: lighter;
line-height: 0%;
color: #ffffff;
}

#artheadtwo { /*sets the size for the sub-heading in the worktext area (where needed)*/
font-family: helvetica;
font-size: xx-large;
text-align: center;
font-weight: lighter;
line-height: 0%;
margin-top: 32px;
color: #ffffff;
}

#footer {   /*contains everything in the footer of every page*/
width: 600px;  /*sets the width of the grey box containing footer*/
margin-top: 10px;  /*provides a little extra space between work and footer*/
margin-left: auto;
margin-right: auto;
font-size: smaller;
text-align: center;
background-color: #b2b2b2;
}