/**** 
Core Elements, across @media specs 
****/

#listing { background: #fff7e3; }

#oneliner,
#jointoneliner,
#dayoneliner {
    color: #ffffff;
    font-family: 'Cantora One', 'Lucida Grande', Verdana, sans-serif;
    font-style: normal;
    font-weight: bold;
    text-align: left; }

#stuff { font-size: 90%; }
#stuff p,
#stuff dd,
#stuff dt { 
    margin: 2% 0 2% 0;
    line-height: 130%; }

#stuff blockquote {
    display: block;
    margin: 2% 4% 2% 8%; }

#footer { font-family: Optima, 'Lucida Grande', Helvetica, sans-serif; }

img.twt { padding: 0; }

address { 
    font-style: normal;
    font-size: inherit;
    text-align: right; }



/* Links */
a {
    color: #076c86;
    text-decoration: none;
    font-family: 'Lucida Grande', Helvetica, sans-serif; }

a:hover { color: #5e301f; }

#listing ul li a { 
    color: #5e301f; 
    text-decoration: none; }

#listing ul li a:hover { color: #ea753c; }

/* Lists */
ul,
ol,
dl { margin-left: 0; margin-right: 0; }
ol { list-style-type: decimal; }
ul { list-style-type: circle; }

#listing ul { list-style: none; }

#listing ul li {
    padding: 2%;
    margin: 0; }

#stuff ul li { margin-left: 6%; }


/* Headers */
h1,
h2,
h3,
h4 {
    font-family: 'Helvetica Neue', Oswald, sans-serif; 
    font-weight: 500;
    line-height: 110%;
    background: none;
    color: #5e301f; }

#banner h1 {
    color: #ffffff;
    font-weight: 600; }

#stuff h1 { 
    font-size: 140%;
    margin-top: 3%;
    margin-bottom: 1%; }

#stuff h2 {
    color: #efb146;
    color: #885537;
    font-size: 124%;
    margin-top: 3%;
    margin-bottom: 1%; }

#stuff h3 { 
    color: #4b2e20;
    font-size: 110%;
    margin-bottom: 1%; }

#stuff h4 { 
    color: #343541;
    font-size: 100%;
    font-weight: 500;
    margin-bottom: 1px; }


/** Miscellaneous **/
cite { display: block;
       color: #aa6d3a;
       font-style: normal; }
time { color: #be5f39; }
strong { color: #b63a2a; }
pre, tt { font-family: monospace; }
.highlight { background: background-color: #b0e0e6; }
.Hot { color: #b92d29; }
.tbd { font-family: "Comic Sans MS"; color: red; }
.chairs { font-size: 80%; }


/****************************** 
  Media Handling: Small screens  
*******************************/
@media only screen and (max-device-width: 480px) {

    * { float: none; }

    html,
    body { 
	overflow: auto;
	font-family: Optima, 'Droid Sans', sans-serif;
	-webkit-text-size-adjust: none;
	background: #ffffff; 
	margin: 0; 
	padding: 0; }

    #container { width: auto; margin: 0; padding: 0; }

    #container * { margin: 0; padding: 0; }

    #banner { 
	height: 6em;
	z-index: 4; }

    #banner h1 { font-size: 140%; text-align: center; padding-top: 1em; }

    #listing { 
	font-size: 88%;
	text-align: center; }

    #listing ul li {
	padding: 1% 0 1% 0;
	margin: 0;
	border-bottom: 1px solid #abb5c4; }

    .bioPhoto { display: none; }

    #stuff { 
	width: 96%;
	background: #ffffff;
	color: #261b12;
	padding: 2%; }

    #oneliner {
	margin: 0px;
	padding: 4px;
	background-color: #006993;
	text-align: center;
	font-weight: 500; 
	font-size: 1.1em; }

    #jointoneliner {
	margin: 0px;
	padding: 4px;
	background-color: #333c5b;
	text-align: center;
	font-weight: 500; 
	font-size: 1.1em; }

    #dayoneliner {
	margin: 0px;
	padding: 4px;
	background-color: #d2780d;
	text-align: center;
	font-weight: 500; 
	font-size: 1.1em; }

    #footer {
	margin: 0;
	padding: 0 2% 0 2%;
	font-weight: 400;
	font-size: 60%; }

    .toggle { text-align: right; }

} /* end mobile-sized media */



/***************************
  Media Handling: Big Screen
****************************/
@media only screen and (min-width: 600px) {
    html,
    body { 
	overflow: auto;
	background: #ffffff; 
	font-family: Optima, 'Droid Sans', "Trebuchet MS", sans-serif;
	font-size: 104%; }

    #container { width: 100%; }

    #banner { 
	position: absolute;
	overflow: hidden;
	top: 0; left: 0; 
	height: 200px;
	width: 100%;
	z-index: 4; }

    #banner h1 { font-size: 206%; margin-left: 220px; margin-top: 60px; }

    #oneliner {
	z-index: 4;
	position: absolute;
	top: 199px; left: 0px;
	width: 100%;
	background-color: #121e26;
	text-indent: 220px;
	font-size: 1.4em; }

    #jointoneliner {
	z-index: 4;
	position: absolute;
	top: 199px; left: 0px;
	width: 100%;
	background-color: #333c5b;
	text-indent: 220px;
	font-size: 1.4em; }

    #dayoneliner {
	z-index: 4;
	position: absolute;
	top: 199px; left: 0px;
	width: 100%;
	background-color: #d2780d;
	text-indent: 220px;
	font-size: 1.4em; }

   #oneliner h1,
   #jointoneliner h1, 
   #dayoneliner h1 { margin-left: 240px; }

    #listing  { 
	position: absolute;
	overflow: visible;
	top: 250px; left: 8px; 
	max-width: 180px; 
	z-index: 5;
	text-align: right;
	padding: 1%; 
	font-size: 80%; } 

    .bioPhoto { 
        float: right; 
        width: 30%;
        padding: 10px; }

    #stuff { 
	color: #261b12;
	position: absolute; 
	overflow: hidden; 
	top: 250px; left: 240px; 
	max-width: 540px;
	background: #ffffff;
	padding: 10px; }

    #footer {
	position: relative;
	margin: 0;
	padding: 2%;
	font-weight: 400;
	font-size: 76%; }

    hr { text-align: center; height: 0px; background-color: #a4a4a4; color: #001555; }
    #stuff hr {margin-top: .63in }
    #stuff hr.last { margin-top: 1in; }
    #listing hr { margin: 2px; }
    .toggle { font-size: 70%; text-align: right; }
}   /* end big screen media */