body {
        background-color: #ffffff;
        background-image: url('//www.extemporaneous.org/images/background.png');
        background-repeat: repeat;
        /* font-family: Verdana, Arial, Helvetica, Sans-Serif; */
        font-family: Verdana, Arial, "Helvetica Neue Light", "Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;
        font-weight: 300;
        font-size: 100%;
	margin: 0;
	padding: 0;
}

header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	background-color: rgb(103, 199, 226);
	border-bottom: 2px solid #888;
	margin: 0;
	padding: 10px 15px 9px 15px;
	z-index: 500;
}

#container {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 100vh;
}

#razorthin {
        background: #cc0000;
        font-size: 90%;
        font-weight: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        width: 100%;
        z-index: 999;
}

#header {
	height: 57px;
}

#navigation
{
        background: #333;
        float: left;
        left: 0;
        position: fixed;
        right: 0;
        top: 81px;
        width: 100%
}

#navigation ul
{
        margin: 0;
        padding: 0;
        font-size: 90%;
}

#navigation ul li
{
        list-style-type: none;
        display: inline;
}

#navigation li a
{
        display: block;
        float: left;
        padding: 5px 10px;
        color: #fff;
        text-decoration: none;
        border-right: 1px solid #fff;
}

#navigation li a:hover { background: #7DDDE8; }

/* Content container declarations */
#content {
  padding: 0px 10px 0px 10px;
  position: fixed;
  top: 130px;
  left: 0px;
  right: 0px;
  bottom: 36px;
  overflow: auto;
}

#content h2 {
  color: #000;
  font-size: 150%;
  margin: 0 0 .5em;
}

a         { text-decoration: none; }
a:link    { color: #05512f; }           /* unvisited link */
a:visited { color: #05512f; }           /* visited link */
a:hover   { color: #05512f; }           /* mouse over link */
a:active  { color: #05512f; }           /* selected link */

#header h1 { margin: 0; }


#liright {
  border-left: 1px solid #fff;
  border-right: 0px;
  float: right;
  z-index: 100;
}

p.pjustified            { text-align: justify; text-justify: newspaper; margin: 16px 0px 0px 0px; }
div.disclaimer          { text-align: justify; text-justify: newspaper; font-size: 70%; }
p.tw33ts                { text-align: left; text-justify: newspaper; font-size: 85%; }

footer {
	bottom: 0;
	left: 0;
	right: 0;
	height: 24px;

	background: #ccc;
	border-top: 2px solid #888;

	padding: 2px 10px;
	position: fixed;
}

#footer {
  /* 4-Div Setup */
  # position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  # width: 100%;
  height: 24px;

  background: #ccc;
  border-top: 2px solid #888;
  # clear: both;

  padding: 2px 10px;
  position: fixed;

}

.blank                  { height: 3px; }

#buffer                 { height: 5px; }

.circle { width: 50px; height: 50px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background: rgb(103, 199, 226); }

.rounded                { # border-radius:1ex; # -webkit-border-radius:1ex; # -moz-border-radius:1ex; }

.coltitle               { clear: both; color: #000; font-size: 120%; font-weight: 400; }
.coltext                { clear: both; color: #000; font-size: 35%; }

#imgfooter              { border: 0px; vertical-align: middle; }
#imgmoon                { margin: 0px; vertical-align: top; z-index: 100; }

blockquote:before       { content: open-quote; }
blockquote:after        { content: close-quote; }

.deftitle               { font-size: 135%; }

td.greyCol              { background-color: grey; }
td.lightgreyCol         { background-color: lightgrey; }

.hideMonths             { display: none; }
.showMonths             { display: inline; }

.pushright              { display: inline; margin-left: auto; margin-right: auto; }

form.zipcodeLookup      { float: none; }
form.areacodeLookup     { float: none; }
form.stateinfoLookup    { float: none; }

#calday                 { height: 75px; width: 40px;}

.sugarlabel             { float: left;  font-size: 90%; text-align: left;  z-index:  90; }
.phyedlabel             { float: right; font-size: 90%; text-align: right; z-index: 100; }

.rssdoctitle {
        font-family: Arial, Verdana;
        font-size: 100%;
        font-weight: bold;
        width: 100%;
        color: #ffffff;
        background: #67c7e2;
}

.rssitems {
        font-family: Arial, Verdana;
        font-size: 90%;
        font-weight: normal;
        width: 100%;
        # background: #ccccff;
}

.rsspubdate {
        font-family: Arial, Verdana;
        font-size: 70%;
        font-weight: normal;
        width: 100%;
        color: #7b68ee;
}

#time {
       background-color: #ffffff;
       background-image: url('//www.extemporaneous.org/images/one.png');
       background-repeat: no-repeat;
        border: 1px solid #000;
        top: 35px;
       font-size: 65%;
       position: fixed;
       right: 20px;
       z-index: 998;
}

#weather {
        background-color: #ffffff;
        background-image: url('//www.extemporaneous.org/images/one.png');
        border: 1px solid #000;
        bottom: 35px;
        font-size: 65%;
        position: fixed;
        right: 20px;
        z-index: 998;
}

#weather img {
        vertical-align: middle;
}

#weatherl {
        float: left;
        position: relative;
        height: 32px;
        width: 32px;
}

#weatherr {
        float: right;
        height: 32px;
        padding: 5px 5px 0px 0px;
        position: relative;
        vertical-align: middle;
}

@font-face {
  font-family: Arial;
  font-style: normal;
  font-weight: normal;
  # src:url(http://www.extemporaneous.org/fonts/Wild_Script.ttf) format('truetype');
  src:url('//www.extemporaneous.org/fonts/clearface.ttf') format('truetype');
}




/* -------------------------------------------------------------------------- */
/*  Screen Width:  626px+                                                     */
/* -------------------------------------------------------------------------- */
@media (min-width: 626px) {
  #navigation ul li a:after {
    content: attr(data-626);
  }

  #content h2:after {
    content: attr(data-626);
  }

  span#footerleft {
    display: inline;
    position: absolute;
    padding: 0px;
    height: 100%;
    width: auto;
    top: 3px;
  }

  span#footerright {
    display: inline;
    position: absolute;
    text-align: right;
    top: 5px;
    right: 10px;

    height: 100%;
    # line-height: 190%;
    font-size: 80%;
    vertical-align: middle;
  }

  a#feedback {
    display: none;
  }

  a#copyname:before {
    content: attr(data-626);
  }

}

/* -------------------------------------------------------------------------- */
/*  Screen Width:  735px+                                                     */
/* -------------------------------------------------------------------------- */
@media (min-width: 735px) {
        a#feedback {
                display:  inline;
        }
}

/* -------------------------------------------------------------------------- */
/*  Screen Width:  360px+                                                     */
/* -------------------------------------------------------------------------- */
@media (min-width: 360px) and (max-width: 625px) {
	/* General declarations, outside of the header, content, footer... */
	#body {
		padding 10px;
		padding-bottom: 20px;
	}

	#navigation ul li a:after {
		content: attr(data-360);
	}

	#content h2:after {
		content: attr(data-360);
	}

  .center {
    margin-left: auto;
    margin-right: auto;
  }

 .halfleft {
    display: block;
    float: left;
    width: 100%;
    position: relative;
    overflow: hidden;
  }

  .halfright {
    display: block;
    float: left;
    width: 98%;
    margin-left: auto;
    margin-right:auto;
  }

  span#footerleft {
    display: none;
  }

  span#footerright {
    display: inherit;
    position: relative;
    text-align: center;
    height: 100%;
    font-size: 60%;
    vertical-align: middle;
    top: 5px;
  }

  a#copyname:before {
    content: attr(data-360);
  }

}



/* -------------------------------------------------------------------------- */
/*  Screen Width:  347 - 359px                                                */
/* -------------------------------------------------------------------------- */
@media (min-width: 347px) and (max-width: 359px) {
  /* General declarations, outside of the header, content, footer... */
  body {
    font-size: 90%;
  }

  /* Container declarations */
  #container {
    /* 4-Div Setup */
    min-height: 100%;
    position: relative;
  }

  /* Header declarations */
  #header {
    padding: 10px 15px 5px 15px;
  }

  #content h2 {
    color: #000;
    font-size: 150%;
    margin: 0 0 .5em;
  }

  #content h2:after {
    content: attr(data-360);
  }

  #body {
    padding 10px;
    padding-bottom: 20px;
  }

  #navigation ul li a:after {
    content: attr(data-360);
  } 

  .center {
    margin-left: auto;
    margin-right: auto;
  }

 .halfleft {
    display: block;
    float: left;
    width: 100%;
  } 

  .halfright {
    display: block;
    float: left;
    width: 98%;
    margin-left: auto;
    margin-right:auto;
  }

  span#footerleft {
    display: none;
  }

  span#footerright {
    display: inherit;
    position: relative;
    text-align: center;
    height: 100%;
    font-size: 60%;
    vertical-align: middle;
    top: 5px;
  }

  a#copyname:before {
    content: attr(data-320);
  }

} 


/* -------------------------------------------------------------------------- */
/*  Screen Width:  0 - 346px                                                  */
/* -------------------------------------------------------------------------- */
@media (min-width: 0px) and (max-width: 346px) {
  /* General declarations, outside of the header, content, footer... */
  body {
    font-size: 90%;
    # width: auto !important;
    # width: 239px;
    # min-width: 239px;
  }

  /* Container declarations */
  #container {
    /* 4-Div Setup */
    min-height: 100%;
    position: relative;
  }

  /* Header declarations */
  #header {
    padding: 10px 15px 5px 5px;
  }

  /* Do not display head on right if too narrow */
  #animhead {
      display: none;
  }

  /* Display menu with shortened words... */
  #navigation ul li a:after {
    content: attr(data-320);
  }

  #content h2:after {
    content: attr(data-320);
  }

  span#footerleft {
    display: none;
  }

  span#footerright {
    display: inherit;
    position: relative;
    text-align: center;
    height: 100%;
    font-size: 60%;
    vertical-align: middle;
    top: 5px;
  }

  a#copyname:before {
    content: attr(data-320);
  }

}


/* -------------------------------------------------------------------------- */
/*  Screen Width:  0 - 290px                                                  */
/* -------------------------------------------------------------------------- */
@media (min-width: 0px) and (max-width: 290px) {
  img#extemp {
    height: 50px;
    /* top, right, bottom, left */
    padding: 4px 4px 5px 4px;
  }

  a#feedback {
    display: none;
  }
}

/* -------------------------------------------------------------------------- */
/*  Screen Width:  0 - 220px                                                  */
/* -------------------------------------------------------------------------- */
@media (min-width: 0px) and (max-width: 220px) {
  img#extemp {
    height: 50px;
    padding: 4px 4px 5px 4px;
  }

  #content h2:after {
    content: attr(data-220);
  }

  a#privacy {
    display: none;
  }
}