html {
  margin: 0;
  padding: 0;
  height: 100%;
}

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%;
}

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

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

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

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

#navigation
{
        background: #333;
        # float: left;
        left: 0;
        position: fixed;
        right: 0;
        top: 81px;
        z-index: 500;
        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; }


/* -------------------------------------------------------------------------- */
/*  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;
  }
}



/* NOSCRIPT Tag Handling */
#noscript-warning {
  background: #cc0000;
  color: #ffffff;
  font-size: 80%;
  # font-weight: 600;
  position: relative;
  text-align: center;
  vertical-align: middle;
  width: 100%;
  z-index: 999;
}

.razorthin {
  background: #cc0000;
  font-size: 20%;
  font-weight: 100%;
  position: relative;
  width: 100%;
  z-index: 999;
}

/* Header Declarations */
#header {
  background: #67c7e2;
  border-bottom: 2px solid #888;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 500;
}

@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');
}


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 {
  /* 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; }

.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;
}