/*
Theme Name: graphility
Theme URI: http://graphility.com/
Description: Dec 2010 rebranding.
Author: Hector F. Hurtado aka hiddenson
Author URI: http://graphility.com/about/hectorhurtado
Version: 2.0
Tags: html5, css3, grid, skeleton, buddypress
*/


/* GRAPHILITY CSS RESET */

*{margin:0; outline:0; border:0; padding:0;
	font:62.5%/1 monospace, serif; *font:11px/1 monospace, sans-serif; 
  font-weight:400; font-style:normal; vertical-align:baseline;}
body *{font-size:inherit;}
em,strong{font-family:inherit; color:inherit;}
em{font-style:italic;}
strong{font-weight:600;}
ol,ul,blockquote,pre,tt{margin:0 2em 1em;}
pre,tt{font-family:monospace, serif;}
q:before,q:after{content:"";}
abbr,acronym{cursor:help; font-variant: small-caps;}
hr{clear:both; height:0; 
  margin:10px 0 30px; border:solid #ddd; border-width:1px 0 0;}
table{border-spacing:0; empty-cells:show; border-collapse:collapse;}
thead{border-bottom:1px solid #000;}
th{font-weight:600;}
td{padding:1em; vertical-align:top;}
a{color:inherit; text-decoration:none;}
form *{vertical-align:middle;}
input[type="text"],textarea,input[type="submit"]{border:1px solid #000;}

header,section,article,aside,footer,nav{display:block;} /* html5 fix */

/* alignments: graphility + Wordpress style */
.alignLeft,img.alignleft,a img.alignleft{float:left;}
.alignCenter,img.aligncenter,a img.aligncenter{display:block; margin:0 auto;}
.alignRight,img.alignright,a img.alignright{float:right;}


/* TYPOGRAPHY */
*{font:15px Lucida Sans Unicode, Lucida Sans, Helvetica, Arial, sans-serif;
  color:#303030;
  /* fix size adjustment for Safari on iPhone */
	 -webkit-text-size-adjust: 100%;}
p,ol,ul,li{margin:0 0 20px; line-height:20px;}
blockquote,pre,tt{margin:0 2em 24px;}
blockquote *{color:#999;}
q:before,q:after{content:'"';}
.meta-link,nav .description{
  font:15px Lucida Sans Unicode, Lucida Sans, Helvetica Neue, Arial, sans-serif;
  letter-spacing:-0.08em; color:#990b0b;}
.description{margin:-5px 0 0;}
aside *{color:#999;}
aside p,#main footer p{
  font:15px Lucida Sans Unicode, Lucida Sans, Helvetica Neue, Arial, sans-serif;
  line-height:20px; letter-spacing:-0.08em;}
aside p{margin:20px 0 0;}
#main footer p{margin:-6px 0 19px; }
.date{font-weight:600; margin:0 0 20px;}
.exLibris pre{margin:0; line-height:20px;}
article{letter-spacing:-0.02em; word-spacing:0.02em;}
.callToAction *{letter-spacing:-0.05em; color:#fff;}
.callToAction>p:last-of-type{
	/* Mar 2, 2012:
     fixing Wordpress + (IE OR Chrome) adding extra margin-bottom. */
	margin:0; padding:0;}

@font-face{font-family:leagueGothic;
	src:url('design/leagueGothic.eot?') format('eot'),
		url('design/leagueGothic.woff') format('woff'),
		url('design/leagueGothic.ttf') format('truetype'),
		url('design/leagueGothic.svg#svgFontName') format('svg');
	font-weight:normal; font-style:normal;}
.section,.section a,footer header{
  font:32px leagueGothic, Impact, Arial Narrow, sans-serif; color:#000;}

h1,h2,h3,h4,h5,h6{
  font-family:Palatino Linotype, Palatino, Times New Roman, Times, serif;
  font-weight:600; letter-spacing:-.04em; color:#000;}
h1{font-size:43px; margin:4px 0 1px; line-height:49px;}
h2{font-size:23px; margin:0 0 8px;}
h3{font-size:19px; margin:20px 0 20px;}
h4{font-size:16px; word-spacing:.18em;}
h5{font-size:14px;}
h6{font-size:13px;}

.ampersand{
  font-family:Baskerville, 
              Palatino Linotype, Palatino, 
              Times New Roman, Times, 
              serif !important;
  font-style:italic !important; font-weight:inherit !important;
  color:#990b0b !important;}

/* hyperlinks and selection */
a,abbr,acronym{border-bottom:1px dotted #990b0b; color:#990b0b;}
a:visited{color:#7e4300;}
a:hover,a:active,a:hover .section,a:hover .description{
  background:#e9d666; color:#7e4300;}
.streamNavigation a{border:none;} /* exception: no underline */
a.meta-link,#logo *,a.icon,.streamNavigation .section a{
  /* exception: no underline, no color change */
  border:none; background:inherit; color:inherit;}
a.meta-link{color:#adadad;}
.baseline a{border:none; font:inherit; color:#990b0b !important;}
::-moz-selection {background:#e9d666; color:#7e4300;}
::selection {background:#e9d666; color:#7e4300;}

/* Wordpress classes generated by the_meta() for custom field styling */
#postContent ul.post-meta{
  list-style:none; width:472px;
  margin:-41px 18px 23px 0; padding:3px 18px 14px;}
.post-meta{border:1px solid #ddd; background:#fff;}
.post-meta-key{font-weight:600;}


/* STYLE */
body{background:#ededed;;}
tr:nth-child(even){border:1px solid #e4e4e4; background:#e7e7e7;
		filter:alpha(opacity=85); /* IE5 to 7 */
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; /* IE8 */
	opacity:.85;}

#main{width:960px; margin:0 auto;}

.masthead{position:relative; margin:30px 10px 15px;}
.meta-nav{position:absolute; top:-26px; right:0;}
#logo{position:absolute; top:-23px; left:10px;}
.masthead nav{margin:0 0 -3px 290px;}
.masthead nav ul li{display:inline-block; margin:0; padding:0 38px 0 0;}

.cloudIntro{height:412px;} /* only used as a section delimiter in tag.php */
article{position:relative; padding:0 9px 14px;}

/* images, banners, call-to-action, baseline */
figure{position:relative;}
figure img{display:inline-block;}
figure img,article img{
	border:20px solid #fff; background:#fff;
	box-shadow:0 4px 4px #bbb;}
.width100{float:left; display:inline-block; margin:0;}
.width255{width:255px; margin:0 15px 15px;}
.width540{width:540px; margin:-5px 0 15px -20px;}
.width900{width:900px; margin:0 0 31px 10px;}
.callToAction{
  display:inline-block;
  position:absolute; bottom:70px; left:301px;
	width:542px;
  border:1px solid #fff; background:#990b0b; padding:7px 18px 10px;
		filter:alpha(opacity=55); /* IE5 to 7 */
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=55)"; /* IE8 */
	opacity:.55;}
.callToAction:hover{background:#e9d666;
		filter:alpha(opacity=90); /* IE5 to 7 */
		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* IE8 */
	opacity:.9;}
.callToAction:hover *{color:#7e4300;}
img.icon{margin:0 2px;border:none; background:transparent;
	box-shadow:0 0 0 transparent;}
img.wp-smiley{border:none; background:transparent;
	box-shadow:0 0 0 transparent;}
img.scale-with-grid{max-width:100%; height:auto;}

.baseline{margin:-27px 0 35px;}

.footer{position:relative; margin:-2px 0 0;}
.copyright{
  position:absolute; top:496px; width:100%; height:39px;
  text-align:center;}

/* left side */
.articleMetadata,aside,.exLibris{
  position:absolute; left:20px; width:280px;
  text-align:right;}
.articleMetadata{top:2px;}
.content aside{float:left; margin:0;}
.exLibris{top:54px; height:338px;}
.exLibris .section{margin:0 0 23px;}

/* right side */
article header{width:540px; margin:-6px 0 0 330px;}
article header h1{text-align:center;}
.author{text-align:right; margin:3px 0 33px;}
.content{padding:5px 80px 29px 331px;}

.streamNavigation{padding:0 63px 7px 343px;}
section nav ul{padding:0 0 22px;}
section nav ul li{display:inline-block;}
.alignCenterNavigation{margin:0 0 0 146px;}

#contact{
  position:absolute; z-index:1; top:55px; left:320px;
  width:580px; height:380px;
	box-shadow: 0 -7px 4px rgba(72,72,72,.25);
  background:#f5f5f5 url('design/contactGradient.png');
  padding:0 0 0 20px;}


/* SKELETON LEGACY */

/* #Buttons ========== */
a.button,button,input[type="submit"],input[type="reset"],input[type="button"]{
	background:#eee; /* Old browsers */
	background:-moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
	background:-ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
	background:linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
	margin-bottom:20px; border:1px solid #aaa; border-top:1px solid #ccc; border-left:1px solid #ccc;
	border-radius:3px;
	padding:4px 12px;
	color:#444;
	display:inline-block;
	font-weight:600;
	text-decoration:none; text-shadow:0 1px rgba(255, 255, 255, .75);
	cursor:pointer;
	line-height:21px;}
a.button:active,button:active,input[type="submit"]:active,input[type="reset"]:active,input[type="button"]:active{
	border:1px solid #666;
	background:#ccc; /* Old browsers */
	background:-moz-linear-gradient(top, rgba(255,255,255,.35) 0%, rgba(10,10,10,.4) 100%); /* FF3.6+ */
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.35)), color-stop(100%,rgba(10,10,10,.4))); /* Chrome,Safari4+ */
	background:-webkit-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Chrome10+,Safari5.1+ */
	background:-o-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* Opera11.10+ */
	background:-ms-linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* IE10+ */
	background:linear-gradient(top, rgba(255,255,255,.35) 0%,rgba(10,10,10,.4) 100%); /* W3C */ }

.button.full-width,button.full-width,input[type="submit"].full-width,input[type="reset"].full-width,input[type="button"].full-width{
	width:100%;
	padding-left:0 !important; padding-right:0 !important;
	text-align:center;}

/* #Forms ============ */
form{margin-bottom:20px;}
fieldset{margin-bottom:20px;}
input[type="text"],input[type="password"],input[type="email"],input[type="file"],textarea,select{
	outline:none;
	margin:3px 0 22px;
	border:1px solid #ccc !important;
	border-radius:2px;
	color:#777;
	width:218px; max-width:100%; height:19px;
	background:#fff;}
select{padding:0;}
input[type="text"]:focus,input[type="password"]:focus,input[type="email"]:focus,textarea:focus{
	border:1px solid #e9d666;
	color:#444;
	box-shadow:0 0 6px rgba(233,214,102,.8);}
textarea{min-height:67px; margin:3px 0 24px;}
label,legend{font-weight:bold; font-size:13px;}
select{width:220px;}
input[type="checkbox"]{display:inline;}
label span,legend span{font-weight:normal; font-size:13px; color:#444;}


/* PLUGINS & WIDGETS */

/* contact form */
.formIntro{width:140px; display:inline-block; padding:24px 0 0;}
.wpcf7{position:absolute; top:61px; right:0; width:380px;}

input[type="text"],input[type="email"],textarea,input[type="file"],
input[type="submit"]{width:340px; margin:0 0 16px;}

textarea{margin:0 0 10px;}
input[type="file"]{height:22px; margin:0 0 14px;}
input[type="checkbox"]{height:22px; margin:0 0 7px;}
input[type="submit"]{
  position:absolute; right:40px; height:50px;
  margin:8px 0 0; padding:0 15px;}

/* google plus one button */
#bottomcontainerBox{margin:33px 0 75px;}
.buttons{width:536px;}
.buttons:after{content:'Vouch for this article on Google!'; font-weight:600; vertical-align:super;}

/* simple tags */
.st-tag-list{margin:0 0 23px;}
.st-tag-list a{
  border:1px solid #aaa; border-top:1px solid #ccc; border-left:1px solid #ccc;
  border-radius:8px;
	background:#eee;
		background:-moz-linear-gradient(top, rgba(255,255,255,.2) 0%, 
               rgba(0,0,0,.2) 100%); /* FF3.6+ */
		background:-webkit-gradient(linear, left top, left bottom, 
               color-stop(0%,rgba(255,255,255,.2)), 
               color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
		background:-webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,
               rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
		background:-o-linear-gradient(top, rgba(255,255,255,.2) 0%,
               rgba(0,0,0,.2) 100%); /* Opera11.10+ */
		background:-ms-linear-gradient(top, rgba(255,255,255,.2) 0%,
               rgba(0,0,0,.2) 100%); /* IE10+ */
		background:linear-gradient(top, rgba(255,255,255,.2) 0%,
               rgba(0,0,0,.2) 100%); /* W3C */
	padding:3px 5px;
	font-size:12px; font-weight:600; color:#222; 
  text-shadow:0 1px rgba(255, 255, 255, .4);}
.st-tag-cloud a{border:none; padding:0 30px 0 0;}

.footerContent .textwidget{
  /* resets padding for text widget */
  margin:0; padding:0 0 14px 0;}
.footerContent ul.xoxo, 
.footerContent ul.blogroll, 
.footerContent ul.xoxo li, 
.footerContent ul.blogroll li{
  /* resets margin & padding for links widget */
  margin:0; padding:0;}

#sidebar #al_loading,#sidebar #al_login,#sidebar #al_register,
#sidebar #al_lostPassword{
  /* login window */
  margin:-7px 0 0; height:205px;}


/* MEDIA QUERIES */

@media only screen and (max-width: 479px){/* mobile device portrait */}
@media only screen and (max-width: 959px){/* Anything smaller than standard 960 */}


/* GRID & RHYTHM */
.layout{background:url('design/verticalRhythm.png'), 
                   url('design/grid.png') 
                   White !important;}