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

body{background-color:#999;
	background-image:url(ivy.jpg);
	margin: 0px;
}

#wrapper{ /* Central background */
/* position:fixed !important; */
margin:0 auto;
position:absolute;
top:0;
right:0;
left:0;
width:750px;
height:auto;
padding-bottom: 100px;
background-color:#FFF;
font-family:"Helvetica, Arial", sans-serif;
font-size:15px;
text-align:center;
overflow: hidden;
}

#smaller {font-size: 20px; padding-top:22px; padding-bottom:10px; padding-left:3px;}

#name {font-size:47px;padding-bottom:10px;}
#name a {text-decoration: inherit; color: inherit;}
#name a:hover{color:#F25;text-decoration:none;}

#digitalImages a {text-decoration: bold; color: inherit;}
#digitalImages a:hover{color:#F25;text-decoration:none;}

#printImages a {text-decoration: bold; color: inherit;}
#printImages a:hover{color:#F25;text-decoration:none;}

/* INTRODUCTION */
#condo1 {padding-top: 75px;}
#condo {padding-top: 75px; display: none;}
#gallery {padding-top: 75px; display:none;}
#zinedream {padding-top:75px; display:none;}
#aragon {display:inline;}

/* DIGITAL STUFF */
#firstImage { padding-top: 75px; }
#normalImage{ padding-top: 100px; }
#gradient {padding-top: 100px;}
#faucet{ padding-top: 100px; padding-left: 0px; }
#spadina{ padding-top: 100px; padding-left: 0px; }
#self{ padding-top: 100px; padding-left: 0px; }
#sunset{ padding-top: 100px; padding-left: 0px; }
#freak{ padding-top: 100px; padding-left: 0px; }
#skyline{ padding-top: 100px; padding-left: 0px; }

/* PRINT STUFF */
#fgf {padding-top: 75px; width: 50%;}
#greenpac {padding-top: 100px;}
#showmap {padding-top:100px;}
#guide {padding-top: 100px;}
#frame {padding-top: 100px;}
#maps{ padding-top: 100px; font-size: 0px; white-space: nowrap;}
#maps img { margin: 0 auto; padding-left: 4px; padding-right: 4px;}
.vertical { padding-left: 17.5px; padding-right: 17.5px;}
#deepmadderFlat {padding-top: 100px;}
#deepmadder{ padding-top: 100px; }
#tired {padding-top:100px;}
#ajd {padding-top:100px;}

/* MANUAL STUFF */
#ukulele{ padding-top: 75px; }
#painting{ padding-top: 100px; }
#old{ padding-top: 100px; }
#bottle{ padding-top: 100px; }

#sections {
	text-align:justify;
    width:392px;
    margin:0 auto;
    padding-top:8px;
    padding-bottom:5px;
    line-height:90%;
}

#sections:after {
	content: "";
	display: inline-block;
	width: 100%;
}

/* Section titles position relative to each other */
#sections a {font-size: 20px;color:#FFF;text-decoration:none;} /* Section titles appearance */
#sections a:hover{color:#F25;text-decoration:none;} /* Appearance of typography while mouse over*/

.superscript {
font-size: 70%;
position: relative;
bottom: 0.4em;
right: 0.06em;
text-decoration: underline;
}

#myNavBar{ /* Black chunk */
font-family:"Helvetica, Arial", sans-serif;
color:#FFF;
display:block;
background-color:#000;
width:750px;
}

#LinkSpot1{position:absolute;top:0px;}

#mapsFlat { padding-top: 75px; }
#bottle { padding-top: 100px; }

#introduction{
	position:auto;
	text-align:justify;
	width:550px;
	margin:0 auto;
}

#introduction a {text-decoration: inherit; color: #F25;}
#introduction a:hover{color:#000000;text-decoration:none;}

#title{
    font-size: 15px; text-align:center;;
}

img {max-width: 100%;}

@media screen and (min-width: 769px){ /* Just for the maps image toggle */
	#mapsFlat {display: none;}
	#deepmadderFlat {display: none;}
}

@media screen and (max-width: 768px){ /* first step (tablets) */

	#wrapper {width:550px;}
	#myNavBar {color: #FFF;	background-color: #000;	width:100%}
	#sections a{color: #FFF;}
	#sections {padding-bottom: 7px;}
	#condo1 {display:none !important;}
	#gallery {display:none !important;}
	#zinedream {display:none !important;}
	#caption1 {display:block !important; }
	#caption2 {display:none !important;}
	#condo {display: block; padding-top: 50px; width: 78.571429%; margin: 0 auto;}
	
	/* DIGITAL STUFF */
	#firstImage {padding-top: 50px;}
	#normalImage {padding-top: 75px;}
	#gradient {padding-top: 75px;}
	#faucet {padding-top: 75px;}
	#spadina {padding-top: 75px;}
	#self {padding-top: 75px;}
	#sunset {padding-top: 75px;}
	#freak {padding-top: 75px;}
	#skyline {padding-top: 75px;}

	/* PRINT STUFF */
	#greenpac {padding-top: 75px;}
	#showmap {padding-top:75px;}
	#guide {padding-top: 75px;}
	#frame {padding-top: 75px;}
	#maps {display: none;}
	#deepmadder {display: none;}
	#tired {padding-top:75px;}
	#ajd {padding-top:75px;}

	/* MANUAL STUFF */
	#ukulele{ padding-top: 50px; }
	#painting{ padding-top: 75px; }
	#old{ padding-top: 75px; }
	#bottle{ padding-top: 75px; }

	#introduction{padding-left:0px; width: 78.571429%; margin: 0 auto;}

	#name {font-size:37px;}
	#digitalImages {width: 78.571429%; margin: 0 auto;}
	#printImages {width: 78.571429%; margin: 0 auto;}
	#manualImages {width: 78.571429%; margin: 0 auto;}
}

@media screen and (max-width: 650px){ /* second step */

	body {background-color: #FFF; background-image: none; margin: 0px;}
	
	#wrapper { width:100%; font-size:15px; background-color: none;}
	#myNavBar {color: #FFF;	background-color: none;	width:100%; margin: 0 auto;}
	#sections a {color: #FFF;}
	#name {font-size: 42px;}
	#title {padding-top:10px;}
	#condo {width: 78.571429%; margin: 0 auto;}
	#space {display:none;}
	#introduction {padding-left:0px; width:78.571429%; margin: 0 auto;}
}

@media screen and (max-width: 625px){ /* third step */

	#smaller {font-size: 18.5px;}
	#name {font-size: 41px;}
	#sections a {font-size: 18.5px;}
	#sections {width: 350px; padding-bottom: 6px;}

	#normalImage {width:100%; margin: 0 auto;}
}

@media screen and (max-width: 600px){ /* fourth step */

	#smaller {font-size: 17px;}
	#name {font-size: 37px;}
	#sections a {font-size: 17px;}
	#sections {width: 332px;}
	#maps img {height: 75px;}
}

@media screen and (max-width: 530px){ /* fifth step */

	#smaller {font-size: 15.5px;}
	#name {font-size: 35px;}
	#sections a {font-size: 15.5px;}
	#sections {width: 303px; padding-top: 3px; padding-bottom: 4px;}
	#condo {padding-top: 50px;}
	#mapsFlat {padding-top: 50px;}
	#bottle {padding-top: 50px;}
	#aragon {display:none;}
}

@media screen and (max-width: 490px){ /* sixth step */

	#smaller {font-size: 14px;}
	#name {font-size: 28px;}
	#sections a {font-size: 14px;}
	#sections {width: 275px;}
	#condo {width: 90%;}
	#introduction {text-align: left; width: 90%;}
	#maps img {height: 60px;}
}

@media screen and (max-width: 350px){ /* seventh step */

	#wrapper {font-size: 12px;}
	#smaller {font-size: 12.5px;}
	#name {font-size: 25px;}
	#sections a {font-size: 12.5px;}
	#sections {width: 242px;}
	#condo {padding-top: 20px; width: 90%;}
	#gradient {padding-top: 35px;}
	#mapsFlat {padding-top: 35px;}
	#bottle {padding-top: 35px;}
	#introduction {width: 90%;}

		/* DIGITAL STUFF */
	#firstImage {padding-top: 30px;}
	#normalImage {padding-top: 40px;}
	#gradient {padding-top: 40px;}
	#faucet {padding-top: 40px;}
	#spadina {padding-top: 40px;}
	#self {padding-top: 40px;}
	#sunset {padding-top: 40px;}
	#freak {padding-top: 40px;}
	#skyline {padding-top: 40px;}

		/* PRINT STUFF */
	#greenpac {padding-top: 40px;}
	#showmap {padding-top:40px;}
	#guide {padding-top: 40px;}
	#frame {padding-top: 40px;}
	#deepmadderFlat {padding-top: 40px;}
	#tired {padding-top:40px;}
	#ajd {padding-top:40px;}

	/* MANUAL STUFF */
	#ukulele{ padding-top: 30px; }
	#painting{ padding-top: 40px; }
	#old{ padding-top: 40px; }
	#bottle{ padding-top: 40px; }

}

@media screen and (max-width: 320px){ /* eighth step */

	#smaller {font-size: 12.5px;}
	#sections {width: 250px;}
	#name {font-size: 23px;}
	#sections a {font-size: 12.5px;}

}