/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	overflow-y:scroll;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Default Styles 
--------------------------------------------------------------------*/

body {
	background: url('img/denim.png');
	font-family: 'Droid Sans', sans-serif;;
}

.clearfix {
	clear: both;
}

.wrap {
	width: 940px;
	margin: 1em auto;
}

.topnav {
  overflow: hidden;
  background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc));
	background-image: linear-gradient(#fff, #ccc);
	border-radius: 6px;
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.4);
	position: relative;
	margin-top:20px;
	margin-left:15%;
	margin-right:15%
}

.topnav a {
  float: right;
  display: block;
 color: #444;
	display: block;
	font-size: 14px;
	line-height: 20px;
	padding: 6px 12px;
	vertical-align: middle;
	text-decoration: none;
	margin-top: 5px;
}

.topnav a:hover {
  background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
	background-image: linear-gradient(#ededed, #fff);
	border-radius: 12px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
	color: #222;
}

.topnav a.active {
 
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@font-face {
  font-family: 'IconicStroke';
    src: url("fonts/iconic/iconic_stroke.eot");
    src: local('IconicStroke'),
       url("fonts/iconic/iconic_stroke.svg#iconic") format('svg'),
	   url("fonts/iconic/iconic_stroke.otf") format('opentype');
}

.iconic {
	color:inherit;
	font-family: "IconicStroke";
	font-size: 38px;
	line-height: 20px;
	vertical-align: middle;
}

a.iconic:hover {
	color:inherit;
}




.iconic.home:before { content: '!'; }
.iconic.at:before { content: "@"; }
.iconic.quote:before { content: '"'; }
.iconic.quote-alt:before { content: "'"; }
.iconic.arrow-up:before { content: "3"; }
.iconic.arrow-right:before { content: "4"; }
.iconic.arrow-bottom:before { content: "5"; }
.iconic.arrow-left:before { content: "6"; }
.iconic.arrow-up-alt:before { content: "#"; }
.iconic.arrow-right-alt:before { content: "$"; }
.iconic.arrow-bottom-alt:before { content: "%"; }
.iconic.arrow-left-alt:before { content: "^"; }
.iconic.move:before { content: "9"; }
.iconic.move-vertical:before { content: "8"; }
.iconic.move-horizontal:before { content: "7"; }
.iconic.move-alt:before { content: "("; }
.iconic.move-vertical-alt:before { content: "*"; }
.iconic.move-horizontal-alt:before { content: "&"; }
.iconic.cursor:before { content: ")"; }
.iconic.plus:before { content: "+"; }
.iconic.plus-alt:before { content: "="; }
.iconic.minus:before { content: "-"; }
.iconic.minus-alt:before { content: "_"; }
.iconic.new-window:before { content: "1"; }
.iconic.dial:before { content: "2"; }
.iconic.lightbulb:before { content: "0"; }
.iconic.link:before { content: "/"; }
.iconic.image:before { content: "?"; }
.iconic.article:before { content: ">"; }
.iconic.read-more:before { content: "."; }
.iconic.headphones:before { content: ","; }
.iconic.equalizer:before { content: "<"; }
.iconic.fullscreen:before { content: ":"; }
.iconic.exit-fullscreen:before { content: ";"; }
.iconic.spin:before { content: "["; }
.iconic.spin-alt:before { content: "{"; }
.iconic.moon:before { content: "]"; }
.iconic.sun:before { content: "}"; }
.iconic.map-pin:before { content: "\\"; }
.iconic.pin:before { content: "|"; }
.iconic.eyedropper:before { content: "~"; }
.iconic.denied:before { content: "`"; }
.iconic.calendar:before { content: "a"; }
.iconic.calendar-alt:before { content: "A"; }
.iconic.bolt:before { content: "b"; }
.iconic.clock:before { content: "c"; }
.iconic.document:before { content: "d"; }
.iconic.book:before { content: "e"; }
.iconic.book-alt:before { content: "E"; }
.iconic.magnifying-glass:before { content: "f"; }
.iconic.tag:before { content: "g"; }
.iconic.heart:before { content: "h"; }
.iconic.info:before { content: "i"; }
.iconic.chat:before { content: "j"; }
.iconic.chat-alt:before { content: "J"; }
.iconic.key:before { content: "k"; }
.iconic.unlocked:before { content: "l"; }
.iconic.locked:before { content: "L"; }
.iconic.mail:before { content: "m"; }
.iconic.mail-alt:before { content: "M"; }
.iconic.phone:before { content: "n"; }
.iconic.box:before { content: "o"; }
.iconic.pencil:before { content: "p"; }
.iconic.pencil-alt:before { content: "P"; }
.iconic.comment:before { content: "q"; }
.iconic.comment-alt:before { content: "Q"; }
.iconic.rss:before { content: "r"; }
.iconic.star:before { content: "s"; }
.iconic.trash:before { content: "t"; }
.iconic.user:before { content: "u"; }
.iconic.volume:before { content: "v"; }
.iconic.mute:before { content: "V"; }
.iconic.cog:before { content: "w"; }
.iconic.cog-alt:before { content: "W"; }
.iconic.x:before { content: "x"; }
.iconic.x-alt:before { content: "X"; }
.iconic.check:before { content: "y"; }
.iconic.check-alt:before { content: "Y"; }
.iconic.beaker:before { content: "z"; }
.iconic.beaker-alt:before { content: "Z"; }