/*
###############################################################################

   Styles for Virginia Code Site
   Fall 2010
   
   Devs: 
   * all lowercase attributes
   * please alphabetize each attribute within an element call

###############################################################################
*/


/*
###############################################################################
# BASE STYLES                 #
###############################################################################
*/

/* www.aestheticallyloyal.com/public/optimize-legibility/ */ 
* {
  text-rendering: optimizelegibility; /* There have been reported problems with this, see the link above for some of the reported bugs */
}

/* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */ 
body, 
select, 
input, 
textarea {
  color: #444;
}

/* Variation on Yahoo's YUI CSS Base file - just including it here to reduce external file calls*/
body { 
  font: 13px sans-serif; 
  *font-size: small; 
  *font: x-small; 
  line-height: 1.22; 
}

table { 
  font-size: inherit;
  font: 100%; 
}

select, 
input, 
textarea { 
  font: 99% sans-serif; 
}

/* normalize monospace sizing 
 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
 */
pre, 
code, 
kbd, 
samp {
  font-family: monospace, sans-serif;
}

/*
###############################################################################
Standard Elements */

p {
  hyphenate: auto; /* http://webtypography.net/Rhythm_and_Proportion/Etiquette_of_Hyphenation_and_Pagination/2.4.3/ */
  hyphenate-lines: 3;
  margin-bottom: 5px;
  orphans:4;
  widows:4;
}

small { font-size:85%; }
strong, th { font-weight: bold; }

td, td img { vertical-align:top; } 

sub { vertical-align: sub; font-size: smaller; }
sup { vertical-align: super; font-size: smaller; }

pre { 
  padding: 15px; 
  
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; /* CSS2 */
  white-space: pre-wrap; /* CSS 2.1 */
  white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */
  word-wrap: break-word; /* IE */
}

/* align checkboxes, radios, text inputs with their label
   by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* hand cursor on clickable input elements */
label, input[type=button], input[type=submit], button { cursor: pointer; }


/* These selection declarations have to be separate.
   No text-shadow: twitter.com/miketaylr/status/12228805301 */
::-moz-selection{ text-shadow: none; }
::selection {
	text-shadow: none;
	background-color: #bdf; } 

/*  j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #ff5E99; } 


/* make buttons play nice in IE:  
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {
  width: auto; 
  overflow: visible;
}
 
/* bicubic resizing for non-native sized IMG: 
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }

/*
###############################################################################
Non-semantic helper classes */

/* for image replacement */
.ir { display:block; text-indent:-999em; overflow:hidden; background-repeat: no-repeat; }

/* Hide for both screenreaders and browsers
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display:none; visibility:hidden; } 

/* Hide only visually, but have it available for screenreaders 
   www.webaim.org/techniques/css/invisiblecontent/ 
   Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
.visuallyhidden { position:absolute !important;  
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px); }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* >> The Magnificent CLEARFIX << */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; } /* Hides from IE-mac \*/
.clearfix { display: block; }


/* 
###############################################################################
END RESET/STANDARIZED STUFF, START INTERNAL STYLES */


html {
}

body {
  background-color: #fff;
  font-family: "Hoefler Text", Baskerville, Garamond, "Palatino Linotype", Georgia, "Times New Roman", serif;
  margin: 0;
  min-width: 300px;
  padding: 2.0em;
}

abbr {
  /* Small caps looks awesome in a nice sans serif
  http://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.6/ */
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}


/* 
###############################################################################
HEADLINES */

h1, h2, h3, h4, h5, h6 {
  font-family: "HelveticaNeue", Helvetica, Verdana, Arial, sans-serif; /* Windows systems rarely have helvetica installed */
  font-weight: normal;
  page-break-inside: never;
}



/*
###############################################################################
Links */

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover,
a:active {
  outline: none;
}

a, 
a:link {
  color: blue;
}

a:hover, 
a:active {
  color: gray;
}

a:visited{
  color: purple;
}

/* Link overrides */

header a, 
header a:link, 
header a:hover, 
header a:active, 
header a:visited {
  padding: 5px;
  text-decoration: none;
}

footer a, 
footer a:link, 
footer a:hover, 
footer a:active, 
footer a:visited {
  color: #fff;
}


/*
###############################################################################
# PAGE STRUCTURE
###############################################################################
*/

section#page {
  min-width: 780px; /* keeps the page from collapsing entirely when sized down horizontally */
  margin: 15px; /* Insets page 15 px from sides and header/footer, making total min width 810px */
  overflow: hidden;
}


/* -- Columns -----------------------------------------------------------------*/

aside {
  float: right;
  overflow: hidden;
  width: 25%;
  margin-left: 10%;
}

/* 
###############################################################################
# HEADER
###############################################################################
*/

header {}

header h1 {
  color: #000;
  font-family: "Hoefler Text", Baskerville, Garamond, "Palatino Linotype", Georgia, "Times New Roman", serif;
  font-size: 3.0em;
  font-style: italic;
  font-weight: normal;
}

header nav#main_navigation {}

header nav#main_navigation ul {
  list-style: none;
}

header nav#main_navigation ul li {
  list-style-type: none;
  display: inline-block;
  font-family: "HelveticaNeue", Helvetica, Verdana, Arial, sans-serif; /* Windows systems rarely have helvetica installed */
  font-size: 1.3em;
  font-weight: bold;
  margin: 0 0.5em 0 0;
  text-transform: uppercase;
}

header nav#main_navigation ul li a {
  padding: 0.5em; /* You want the padding on the anchor, so the whole thing is clickable */
  text-decoration: none;
}

header nav#main_navigation ul li.utility {
  float: right;
  font-size: 0.9em;
  font-weight: normal;
  text-transform: none;
}


/* 
###############################################################################
# MAIN CONTENT
###############################################################################
*/

section p, section ul {
	font-size: 1.2em;
}
	section ul ul {
		font-size: 1em;
	}

section#page section + section {
	margin-top: 3em;
}

section#page h1 {
  font-size: 2.0em;
  line-height: 2.2em;
}

section#page h2 {
  font-size: 1.75em;
  line-height: 1em;
  margin-top: 1em;
}

section#page h3 {
  font-size: 1.4em;
  line-height: 1.8em;
}

aside {
  background-color: #f4eee5;
  border: 1px solid #dccbaf;
  font-family: Cambria, Georgia, serif;
  font-size: .9em;
  padding: 0 1em 1em 1em;
  margin-bottom: 1em;
}

aside section h1 {
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.4em;
  text-transform: uppercase;
  margin: 1em 0 0.25em 0;
}

ul {
	list-style-type: disc;
	list-style-position: outside;
	padding-left: 1em;
	margin-bottom: 1em;
}

/* 
###############################################################################
# FOOTER
###############################################################################
*/

footer {
  background-color: #243a51;
  clear: both;
  color: #fff;
  margin: -2em;
  padding: 2em;
}

/* 
###############################################################################
# RESPONSIVE TYPESETTING
###############################################################################
*/

@media screen and (max-width: 800px) {
  /* Kills columns */
  .left,
  .right,
  section.col1,
  section.col2 {float: none; width: 100%; margin-bottom: 5px;}
  section#page {min-width: 310px;}
}

@media screen and (max-width: 500px) {
  /* Kicks the size down on smaller windows e.g. iPhone */
  body { font-size: 70%; } 
}


###############################################################################
# CSS FOR THE TWITTER JQUERY PLUGIN
###############################################################################
.tweet, .query {
	font-family: Georgia, serif;
	font-size: 120%;
	color: #085258;
}

.tweet .tweet_list, .query .tweet_list {
	-webkit-border-radius: .5em;
	list-style-type: none;
	margin: 0;
	padding: 0;
	background-color: #ddd;
	border: 1px solid #ccc;
}

.tweet .tweet_list .awesome, .tweet .tweet_list .epic, .query .tweet_list .awesome,
.query .tweet_list .epic {
	text-transform: uppercase;
}

.tweet .tweet_list li, .query .tweet_list li {
	overflow-y: auto;
	overflow-x: hidden;
	padding: .5em;
}

.tweet .tweet_list li a, .query .tweet_list li a {
	color: #0C717A;
}
.tweet .tweet_list .tweet_even, .query .tweet_list .tweet_even {
	background-color: #eee;
}

.tweet .tweet_list .tweet_avatar, .query .tweet_list .tweet_avatar {
	padding-right: .5em;
	float: left;
}

.tweet .tweet_list .tweet_avatar img, .query .tweet_list .tweet_avatar img { vertical-align: middle; }