/*
Theme Name: Foundation Design by DN
Theme URI: supernormal.us
Author: Dominic Nguyen
Author URI: http://dominicnguyen.net
Description: A foundation theme. A synthesis of many methods. 
Features Built-in: Post Expiry, Custom Fields Panels, Slideshow w/Navigation, jQuery effects (in moderation), Javascript , Automatic Post Thumbnails, full screen css based image viewing
Version: 1
License: Personal
*/
/************************* GLOBAL STYLES ***************************/
body {color:#333;background: #fff; margin: 0 auto; }
h1,h2,h3,h4,h5,h6 {color:#222;}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color:#777;}
h3.title {margin-bottom:.25em; line-height:1.1em;}
h4.title {margin-bottom:.25em; line-height:1.2em;}
a {color:#707070;text-decoration:none;outline: none;}
a:hover, a:focus {color:#111;}
p {color:#444;}
h6.top {color:#ccc;}
.login {float:left;}
.sub {border-bottom:1px solid #777;}
h2.sub {padding:.4em 0;}
h3.sub {padding:.4em 0;}
.shadow {background:url(images/shadow.png) no-repeat bottom right;padding: 0 8px 9px 0;}
button{cursor:pointer;}
.title {font-family: Gill Sans, Lucida, Verdana, Sans-Serif ;}

/* Navigation * /

/*** Nav ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {margin:0; padding:0;list-style:none;z-index:5000;}
.sf-menu {line-height:	1.0;}
.sf-menu ul {position:absolute;top:-999em;width:	10em; /* left offset of submenus need to match (see below) */}
.sf-menu ul li {width:	100%;}
.sf-menu li:hover {	visibility:	inherit; /* fixes IE7 'sticky bug' */}
.sf-menu li {float:	left;position:relative;}
.sf-menu a {display:block;position:	relative;}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {left:0;top:2.5em; /* match top ul list item height */z-index:99;}
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {top:-999em;}
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {left:10em; /* match ul width */top:0;}
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {top:-999em;}
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {left:10em; /* match ul width */top:0;}

/*** Nav Foundation Skin ***/
.sf-menu {background:#000; opacity:.8;filter:alpha(opacity=80);float:left; margin:15px 10px 0 50px;padding:0px 0 0 0 ;cursor:pointer;font-family:Gill Sans, Lucida, Verdana, Sans-Serif ;z-index:5000; -moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;border: 1px solid #eee;}
.sf-menu a { padding: .75em 1em;text-decoration:none;}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/color:#fefefe;}
.sf-menu li {background:transparent;opacity:1;filter:alpha(opacity=100);}
.sf-menu li li {background:	#000;opacity:.7;filter:alpha(opacity=70);}
.sf-menu li li li {background:	#333;}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active, .sf-menu li.active {background:#222;color:#fff; -moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}

/*** Nav arrows **/
.sf-menu a.sf-with-ul {padding-right: 	2.25em;	min-width:1px; /* trigger IE7 hasLayout so spans position accurately */}
.sf-sub-indicator {position:absolute;display:block;right:.75em;top:1.05em; /* IE6 only */width:10px;height:	10px;text-indent: -999em;overflow:hidden;background:url(images/arrows-ffffff.png) no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */top:.8em;background-position: 0 -100px; /* use translucent arrow for modern browsers*/}

/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {background-position: -10px -100px; /* arrow hovers for modern browsers*/}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {background-position: -10px 0; /* arrow hovers for modern browsers*/}

/*** shadows for all but IE6 ***/
.sf-shadow ul {background:	url(images/shadow.png) no-repeat bottom right;padding: 0 8px 9px 0;-moz-border-radius-bottomleft: 17px;	-moz-border-radius-topright: 17px;-webkit-border-top-right-radius: 17px;	-webkit-border-bottom-left-radius: 17px;}
.sf-shadow ul.sf-shadow-off {background: transparent;}

/* Header */
#header {position:relative; z-index: 3000;}
#header h4 { margin: 0; padding:10px 0 0; line-height:2em }
#header h4 {font-family: Gill Sans, Lucida, Verdana, Sans-Serif ; font-weight: bold; float: left}
#header h4 a { color: #fff; text-decoration: none; }
#header h4 a:hover { color: #77ffaa; }
#header span.description { color: #ccc; font-size: .7em; padding: .35em 3em;}
#header .logo{background:url(images/logo_snsmallrest.png) no-repeat scroll 0 0;height:100px;width:200px;margin:10px 0 0 0;}
#header .logo:hover{background:url(images/logo_snsmallactive.png) no-repeat scroll 0 0;}
#header-shadow{background:	url(images/shadowhorizontal.png) repeat bottom ;padding: 0 0 0 0; margin-bottom:0em; height:10px; width:100%;}
.double-border {background: url(images/double-border.png) repeat-x bottom; height:8px; width:100%;clear:both;float:none;border:none;;margin:1em 0}

/* Intro Message */
.intromessage {padding:2em;margin-bottom:3em;background:#eee;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.intromessage p, .welcomebox h2 {color:#000}

/* Home */
.home {background-color:;}
ul.home {margin:1em 0 0 0;padding:1em 0 0 0 ; border-top: 1px dotted #222; text-align: left;}
#splash {height: 660px; width: 100%; background: url(images/supernormalcanflanks.jpg) repeat-x; position: absolute; top: 0; overflow: hidden; padding: 0;z-index: 1; text-align: left;}
#splash img {width:1000px; z-index: 3; padding: 0; display: block; margin: 0 auto;}
#splashhover {width:300px; height:350px;margin: 0 auto; display:block; z-index:2000;text-decoration: none;z-index: 2000; position: relative;}
#splashhover:hover {background: url(images/supernormalexploresticker.png) no-repeat top right ; cursor: pointer;}
.lower {position:absolute; margin: 70px 0 0 0; width:100%; z-index: 3;}
.homebox {background:#fff;opacity:.8;filter:alpha(opacity=80); border: 1px solid #eee; padding:.7em;min-height: 220px;height:auto !important; height:220px;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;text-align: left;}
.postimagehome {width:280px; height:146px; overflow:hidden;display:block;margin:1em 0 0 0;padding:0em 0 0 0;}
.postimagehome img{width:280px; height:auto; border:1px solid #fff;}
.postimagehome a:hover img{color:#fff;opacity:.8;filter:alpha(opacity=80); }
h2.button {background:#eee;padding:10px 20px 10px 10px;margin:1.5em 0 0 0;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;border:1px solid #eee;}
h2.button:hover {background:#77ffaa;color:#000;}
h2.button a:hover {color:#000;}

/* Posts */
#archivetitle{margin-bottom: 1em; text-align: left;}
#archivetitle h2{margin-bottom: 0em;}
#content {min-height:400px;padding-top:4em;}
.content h2 {font-family: Gill Sans, Lucida, Verdana, Sans-Serif ;}
.entry {margin:1em 0 0 0;font-size:10px; text-align:left;}
.entry p{margin:0 0 0 0;}
.newbadge{ position:absolute;margin-top:-30px;margin-left:50px; z-index:99;}
.post {display:block;clear:both; border-bottom:1px dotted #707070;padding:4em 0 6em 0;}
.post_1{border-bottom:2px ridge #707070;padding:2em 0 4em 0;}
.post h4, .post h6 {font-family: Georgia, serif;}
.postimage img{width:400px;height:auto;background:url(images/shadow.png) no-repeat bottom right;padding: 0 8px 9px 0;}
.postimage a:hover img{color:#fff;opacity:.5;filter:alpha(opacity=50); }
.postworkmenu{display: inline; margin:1.1em 0 0 0;}
.postworkmenu li{float:left;margin-right: 1em;}
.postwork {margin:0em 0;width: 220px;}
.postimagework {width:220px; height:146px; overflow:hidden;background: transparent;}
.postimagework img{width:220px; height:auto; }
.postimagework a:hover img{ }
.postworkmetadata {background:#000; position: absolute;height: 146px;width: 220px; margin-top: -146px; opacity:0;filter:alpha(opacity=0); cursor:pointer;  }
.postworkmetadata:hover{opacity:.7;filter:alpha(opacity=70);}
.postworkmetadata h4{color:#fff;}
.postworkmetadata a{color:#fff;font-size:1.2em;margin-bottom:.25em; line-height:1.2em;}
.postworkmetadata a:hover{color:#77ffaa;}
.postworknegativespace{padding: 2em; color: #fff;}
.read-on {color:#707070;background:transparent url(images/readon_black.gif) no-repeat scroll 100% 60%; display:block;padding: 2px 20px 0 0;margin:3em 0 0 0; text-align:right;text-decoration:none;}
.read-on a:hover{color:#ffff00;}
.underlined {border-bottom:1px solid #eee;}
h6.underlined {margin:0 0 1em;}

/*Single Page Specific*/
.entry_single { font-size:10px; position: absolute;z-index: 3000;bottom: 0; width: 300px;padding: 1em;overflow: auto; }
.entry_single:hover{background: #000; opacity:.7;filter:alpha(opacity=70);}
.entry_single h3{color: #77ffaa; margin: 0em 0 0 0;}
.entry_single p{color: #fff; margin: .5em 0 0 0;}
.entry_single a{color: #777;}
.entry_singloe dl, .entry_single dt, .entry_single dd{color: #aaa;}
.entry_single a:hover{color: yellow;}
.entry_single .active {color: #77ffaa;}
.entry_single.opaque{opacity:.7;filter:alpha(opacity=70);background: #000;}
.singleclickdown{cursor: pointer;}
.singlefade{opacity:.1;filter:alpha(opacity=10); margin: 0;}
.singlefade:hover{opacity:1;filter:alpha(opacity=100);}

.nav-image-left, .nav-image-up, .nav-image-right {text-align:center;float:left;width:25px;margin:0 10px 0 2px;}
.nav-image-left a, .nav-image-up a, .nav-image-right a {background:#eee;padding:2px 48% 2px 48%;text-decoration:none;color:#000;}
.nav-image-left a:hover, .nav-image-up a:hover, .nav-image-right a:hover {background:#000;color:#fff;}

/* For Single Page Navigation*/
.nav {width:10%; height:30%;top:100px;padding:20% 25px 100px 25px;position: fixed;z-index: 2000;opacity:0;filter:alpha(opacity=0);}
.nav:hover {color:#111;opacity:1;}
.navarrow{font-size: 10em; color: #77ffaa;}
.singlenav {font-size:3em;margin-top: -2em;}

/* For Multiple Page Navigation*/
.navigation {margin:2em 0 ; position:relative;}
.navigation .button {text-align:center; padding:10px 0 ;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
.navigation h2{color:#999;}
.navigation .button:hover {background:#eee;}
.dark .navigation:hover{background:#000;}
.wp-pagenavi {text-align:center;padding:25px 0}
.wp-pagenavi a, .wp-pagenavi a:link {padding: 2px 4px 2px 4px; margin: 2px;text-decoration: none;color: #777;	background-color: #FFFFFF;	}
.wp-pagenavi a:visited {padding: 2px 4px 2px 4px; margin: 2px;text-decoration: none;color: #0066cc;	background-color: #FFFFFF;	}
.wp-pagenavi a:hover {	color: #000000;background-color: #eee;}
.wp-pagenavi a:active {padding: 2px 4px 2px 4px; margin: 2px;text-decoration: none;color: #0066cc;background-color: #FFFFFF;	}
.wp-pagenavi span.pages {padding: 2px 4px 2px 4px; margin: 2px 2px 2px 2px;color: #000000;background-color: #FFFFFF;}
.wp-pagenavi span.current {padding: 2px 4px 2px 4px; margin: 2px;font-weight: bold;color: #111;background-color: #eee;}
.wp-pagenavi span.extend {padding: 2px 4px 2px 4px; margin: 2px;color: #000000;background-color: #FFFFFF;}

/* Portfolio Panel and hCARD */
.information {background:transparent; margin: 1em 0;}
.information img{width:220px;height:auto; margin:2em 0;}
.information dl dt{float: left; display: inline;}


/* Footer */
#footerwrap{ }
#footer1 {color:#222; padding:1em 0 0px 0 ;height:23px;}
#footer {color:#222; position:relative; padding:0em 0 0px 0 ;height:20px;bottom: 0;}
#footer a{color:#222;}
#footer a:hover{color:#77ffaa;}

/* Footer Widgets */
#footer .widget {margin:0 0 4em 0}
#footer ul{list-style:none;margin:0 0 1.6em 0;font-size:1em;}
#footer ul li{border-bottom:1px dotted #555; color:#999;}
#footer ul li a,ul.txt li{text-align:right;line-height:1.2em;display:inline;padding:3px 4px 3px 4px;}
#footer ul li a:hover,ul.txt li:hover{color:#fff;background-position:1px 0.8em;background: #000}
#footer ul li.active a{cursor:default;color:white;}
#footer ul ul{margin:0;list-style:none;}

/* Floats & Images */
.right { position:absolute;right:0; }
.left { position:absolute;left:0; }
.middle {margin: 0 auto;float:left;}
.clear { clear: both; }
img.centered{display: block;margin-left: auto;margin-right: auto;max-width:950px}
img.alignright{padding: 4px;margin: 3px 0 2px 10px;display: inline;max-width:950px}
img.alignleft{padding: 4px;margin: 3px 10px 2px 0;display: inline;max-width:950px}
img.alignnone{padding:0 4px 4px 0; margin: 3px 10px 2px 0;display: block;max-width:950px}
.alignleft{float: left;}
.alignright{float: right;}
.aligncenter,div.aligncenter {display: block;margin-left: auto;margin-right: auto;}
.wp-caption {padding-top:0;margin:0}
.wp-caption img {margin: 0;padding: 0;border: 0 none;}
.wp-caption p.wp-caption-text {font-size: 11px;line-height: 17px;;text-align:center;padding: .5em 0;margin: 0;background:#000;max-width:950px}
.home .wp-caption p.wp-caption-text {font-size: 11px;line-height: 17px;;text-align:center;padding: .5em 0;margin: 0;background:#000;max-width:590px}
.thumbnail, .attachment-thumbnail {max-width:150px;margin:0 1.5em 1.5em 0;float:left;}
.attachment-medium {max-width:960px;overflow:hidden;display: inline}
.attachment-large {max-width:960px;overflow:hidden;display: inline}
.content .size-medium, content size-large {margin: 0 1.5em 1.5em 0}
.home .size-medium, .home .size-large {max-width:590px; height:auto; overflow:hidden;margin:0 .5em .5em 0;}
dl.-item .-caption {clear:both;float:none;width:150px;}
dl.-item {width:170px;padding:10px}
.-icon .attachment-thumbnail{padding:0;margin:0}


/* Etc & Page-post-category templates : about, */
.color {color:#777;}
.color:hover{color: #77ffaa;}
.dropdown {background:#eee; opacity:.9;filter:alpha(opacity=90);z-index:4000;padding:1em;overflow:hidden;}
.clickdownarrow {cursor:pointer;margin-top:-5px;opacity:.2;filter:alpha(opacity=20);display:block; /* IE6 only */width:10px;height:10px;text-indent: -999em;overflow:hidden;background:url(images/arrows-000000.png) no-repeat 0px -100px; }
.clickdownarrow:hover{opacity:1;filter:alpha(opacity=100);}
.pagemargin {margin:4em 0 7em 0;}
#aboutcontents{background:#fff; border: 1px solid #eee; padding:.7em;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;}
#filters {clear: both;height: 2em;margin-bottom: 1em;}
#filters li {float: left;margin-right: 2em;}
.subscribe {padding: 0 0 0 19px;background: url("images/rss.png") no-repeat 0 50%; margin: 0 0 0 .5em;}
span.yellow {color:#ffff00;}
.advertisement .box {background:#e5ecf9;}

/*Galleria Specific CSS */
.galleria_container.loader {background: url(images/ajax-loader.gif) no-repeat 50%  25%}/* 50% 25% so that it satisfies the CSS technique used to full screen- no whitespace interface*/
.galleria{float:right;list-style:none;position:absolute;margin:0px 0 0 0;z-index:2000;right:0px;bottom: 0px;}
.galleria_container { width:100%; height: 100%; overflow: hidden; height: 200%; left:-50%; position: absolute; top:-0%; width: 200%;}
.galleria_wrapper { text-align: center; vertical-align: middle; height: 100%; width: 100%;}
.galleria_container img{margin:0 auto; min-height: 50%; min-width: 50%}
.galleria_container .loading{background: url(images/ajax_loader.gif) no-repeat center}
span.caption {font-size:.7em; margin:0 0 0 1em;}
.galleria li{display:block;width:30px;height:30px;overflow:hidden;margin:0 10px 10px 0;float:left;border:1px #ccc solid;}
.galleria li a{display:none}
.galleria li div{position:absolute;display:none;top:0;left:180px}
.galleria li div img{cursor:pointer;}
.galleria li.active div img,.galleria li.active div{display:block}
.galleria li img.thumb{cursor:pointer;top:auto;left:auto;display:block;width:auto;height:auto;}
.galleria li .caption{display:block;padding-top:.5em}
* html .galleria li div span{width:400px} /* MSIE bug */

/* Foundation Contact Form*/
#contact_form{ margin: 40px 0px; display: inline; "Lucida Grande","Lucida Sans","Lucida Sans Unicode", Arial, sans-serif}
#contact_form fieldset{-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; }
#contact_form legend{ font-size: 2em;font-weight: normal; margin: 0 0 .75em 0; font-family: Gill Sans, Lucida, Verdana, Sans-Serif ;}
input{ width: 100 px; background: transparent; display: block; margin: 0 0 10px 0; color: #777; display: inline; border: none; background: #eee;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; padding: .5em;}
textarea { height: 149px; -moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; background: #eee;}
.submit_form{margin: 1.5em ; width: 92px; cursor: pointer; text-align:center; padding:1em;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; background: #eee; border: 1px solid #eee; }
.submit_form:hover{background: #77ffaa; border: 1px solid #eee;}
#loader{ margin: 10px 0; }
#response{background:#777; color: #fff; margin: 1em; padding:.7em;-moz-border-radius: 5px;-khtml-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; }

/* Search */
#search {margin:0 0 0 0px; padding:0;}
#search #s {background: #444 url('images/search.png') 0px center no-repeat;color: #fff;margin:0;padding: 4px 0 4px 20px;width: 100px;border:1px solid #333;opacity:.7;filter:alpha(opacity=70);}
#search input {border:0; font-size: 1em;}
#search #s:hover {color: #000000;background: #fff url('images/search.png') 0px center no-repeat;opacity:1;filter:alpha(opacity=100);}
.searchexcerpt {margin: 1em; }
.searchexcerpt img{margin: 0 1.5em 1.5em 0;height:70px;width:70px; }
#searchresults {position:relative;}
#searchresults li{border-bottom:1px dotted #999;padding:.3em 0 .5em 0;display:block;}