/* 
Title : 	Girl Alert GLOBAL style sheet
Author : 	David Hund, Valued Standards (c) 2009
URL : 		http://www.girlalert.org
Modified : 	${TM_DATE} - SVN: $Revision$

			- http://developer.yahoo.com/yui/compressor/
			- http://www.cleancss.com/
........................................................... */

/* INDEX:
	=RESET, FIXES, ETC
	=BROAD GENERICS (BODY ETC)
	=BASE TYPOGRAPHY
	=HYPERLINKS
	=GENERIC CLASSES
	=VCARD
	=HEADERS
	=LOGO
	=IMAGES
	=LISTS
	=BASE STRUCTURE (DIV FRAME)
	=TABLES
	=FORMS
........................................................... */

/* COLORS USED:
	- White		FFF
	- Black		171623
	- Grey		999
	- Pink		FC54A0
........................................................... */

@font-face {  
	font-family: 'Quicksand Book Embedded';
	/* src: url('Quicksand_Book.eot'); */ /* IE: disabled, seems not to work. Use Cufon :-( */  
	src: local("fooQuicksandBook-Regular"), local("fooQuicksand Book Regular"), url('Quicksand_Book.otf') format("opentype");
}  
@font-face {  
	font-family: "Quicksand Dash Embedded";
	/* src: url('Quicksand_Dash.eot'); */ /* IE: disabled, seems not to work. Use Cufon :-( */  
	src: local("fooQuicksandDash-Regular"), local("fooQuicksand Dash Regular"), url('Quicksand_Dash.otf') format("opentype");
}  

/* =RESET [start from scratch]
	http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
	- Removed some obsolte elements (html5)
	- See http://www.w3.org/TR/html5-diff/#absent-elements
	........................................................... */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strike, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; _font-size: 100.01%; vertical-align: baseline; background: transparent;}
section, article, aside, header, footer, nav, dialog, figure {display: block; font-size: 1em;}
body {line-height: 1;}
ol, ul {list-style: none;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}


/* =GENERIC FIXES [fixes clearing issues with floats]
	SIMPLER CLEARING? http://www.quirksmode.org/css/clearing.html
............................................................... */
/* 	We ASSUME some auto-fixes such as the #nav UL and other horizontal lists */
.section, .article, .nav ul, #footer ul, .clearfix {
	overflow: auto; /* Good browsers */
	/* overflow: hidden; *//* If you need IE/MAC or when there's scrollbars due to extra padding/marging/borders etc: */
	/* width: 100%; */ /* IE 6+ -> hasLayout, Opera fix too? */
	zoom: 1;/* IE: Avoid width issues? */
}


/* =GENERICS [Generic type, .classes, etc]
............................................................... */

body{
	background: #FFF;
	color: #111;
	font-size: 62.5%;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}


/* =BASE TYPOGRAPHY
............................................................... */
div {font-size: 1em; /* = 10px */}
p, dl, td, th, li, pre, code, kbd, samp, pre, tt, input {font-size: 1.4em; /* 14px */}
p {line-height: 1.54; margin-bottom: 1em;}
strong{font-weight: bold;}
em{font-style: italic;}
cite{font-style: italic;}
abbr, acronym { 
	cursor: help;
	text-transform: uppercase; 
	font-size: 85%; 
	letter-spacing: .1em; 
	border-bottom: 1px dotted #999;
}
pre { white-space: pre;}
pre * { 
	font-size: 1.4em; 
	line-height: 1.54; 
	white-space: pre; 
}
blockquote { 
	border-top: 1px dotted #FC54A0; 
	border-bottom: 1px dotted #FC54A0; 
	color: #FC54A0; 
}

ins {
	text-decoration: underline;
	background: #FFFFCC;
}
del {text-decoration: line-through;}

address,
blockquote{
	margin: 1.5em 0;
	font-size: 1.4em;
	line-height: 1.54;
}
blockquote p{margin: 1em;}

td td, li ul li, li ol li, td p, blockquote p, dd p, li p, ul li ul li, ul li ul li p, ol li ol li, ol li ol li p {
	font-size: 1em!important; /* Cascading font size should remain same! */
}

hr { 
	display: block; 
	background: #FFF url('../img/dot-hor-black.gif') repeat-x 0 0; 
	color: #171717; 
	width: 100%; 
	height: 1px; 
	border: none; 
}


/* =LINKS
............................................................... */
a:link, a:visited, a:hover, a:active{
	color: #FC54A0;
	text-decoration: underline;
}
a:hover, a:active{
	color: #171717;
	-webkit-transition: color .35s linear;
}
a.noBorder,
h1 a:link, h1 a:visited, h1 a:hover, h1 a:active,
h2 a:link, h2 a:visited, h2 a:hover, h2 a:active,
h3 a:link, h3 a:visited, h3 a:hover, h3 a:active {text-decoration: none;}
a.button:link, a.button:visited, a.button:hover, a.button:active{
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #FFF;
	text-decoration: none;
	float: none;
	display: block;
}

ul.horizontal li a:link, ul.horizontal li a:visited, ul.horizontal li a:hover, ul.horizontal li a:active{
	display: block;
	padding: 0.5em;
}

/* Exceptions */
#page-nav a,
#footer a { text-decoration: none;}

.photo-credits a,
.aside a, .feature a,
#footer .about a {color: #FFF;}

.photo-credits a:hover, .photo-credits a:active,
#page-nav a:hover, #page-nav a:active,
#footer a:hover, #footer a:active { color: #FFF; text-decoration: underline;}
#footer a:hover, #footer a:active { color: #171717;}
#footer .about a:hover, #footer .about a:active { color: #FFF;}

.aside a:hover, .feature a:hover {text-decoration: none;}


/* =GENERIC CLASSES
............................................................... */
.hidden {display:none;}
.accessibility {display: block; position: absolute; left: -999em; top: -999em;}

p.read-more {font-size: 1.2em;line-height: 1; margin-top: -.8em;}

.alignRight {text-align: right;}
.alignLeft {text-align: left;}
.alignCenter {text-align: center;}
.floatRight {float: right;}
.floatLeft {float: left;}

.error {background: transparent;color: #FF3333;}
.success {background: transparent;color: #006600;}

/* (Form) message boxes */
.message { 
	background-color: #FFFFCC; 
	color: #363636;
	border-top: 1px solid #FF9900; 
	border-bottom: 1px solid #FF9900; 
	padding: 1em 1em 0; 
	text-align: left;
	margin: 1.54 0;
}
.message ul {margin: 1.54 0 1.54 1.54;}
/* NOTE: IE6 does not support .class.otherclass chaining! */
.message.error {
	background-color: #FFD0D0;
	color: #FF3333;
	border-color: #FF3333; 
}
.message.success{
	background-color: #CCEE99; 
	color: #006600;
	border-color: #006600; 
}


/* =vCARD
............................................................... */
.vcard{
	position: relative;
	border-top: 1px dotted #EEE;
	border-bottom: 1px dotted #EEE;
}
.vcard p{margin: 0 0 .5em 0;}
.vcard .url, .vcard .adr{
	display: block;
	position: absolute;
	left: -999em;
}
.vcard .save-vcard a{
	display: block;
	height: 32px;
	padding: 0 0 0 38px;
	margin-top: 1em;
	font-size: 0.8em;
	background: transparent url('../img/vcard-add.png') no-repeat 0 0;
}


/* =HEADERS
............................................................... */
h1, h2, h3, h4, h5, h6{
	margin: 1em 0 0 0;
/* 	text-shadow: 0 1px 0 rgba(250,250,250, 0.8); */
	color: #171717;
	line-height: 1.54;
	font-weight: normal;
}

h1,h2{
	font-family: 'Quicksand Book Embedded', 'HelveticaNeue-UltraLight', 'Helvetica Neue Ultra Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	font-weight: 200;
	font-size: 3em;
}
h3{font-size: 1.6em;}
h4{font-size: 1.6em;font-weight: bold;}
h5{font-size: 1.4em;font-weight: bold; font-style: italic;}
h6{font-size: 1.4em;font-weight: bold;}

/* Exceptions */
#masthead h1 {width: 540px;}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child{margin-top: 1em;}
.page h1:first-child, .aside h1:first-child,
.page h2:first-child, .aside h2:first-child{margin-top: 0;}
.page h1, .aside h2:first-child {margin-bottom: .5em;}
.page h2 {font-size: 2.4em; margin: .8em 0 0;}


.article .header h1,
.article .header h2,
.aside h2:first-child { 
	background: transparent url('../img/dot-hor-black.gif') repeat-x 0 100%;
	line-height: 1;
	padding: .4em 0 .1em 0;
}
.article .header h1 strong,
.article .header h2 strong,
.aside h2:first-child strong { 
	font-family: 'Quicksand Dash Embedded', 'Helvetica Neue Light', 'HelveticaNeue-Light', Helvetica, Arial, sans-serif;
	font-weight: normal;
}


.feature .header h2,
.aside h2:first-child { background: transparent url('../img/dot-hor-white.gif') repeat-x 0 100%;}
.article .header h2:first-child { margin-top: 0; }
.feature h2, .feature h3, .feature h4,
.aside h2, .aside h3, .aside h4 {color: #FFF;}

h2 + h3 {margin-top: .1em;}
#subscribeform h3 + p {margin-top: 0;}
.page h3 {font-weight: bold;}

.vcard h3,
.message h3{margin: 1em 0 .25em 0;}
.message h3{
	font-size: 1.4em;
}
.error h3{color: #FF3333;}
.success h3{color: #006600;}


/* =LOGO
............................................................... */
#logo {
	width: 540px;
	height: 49px;
}
#logo a {
	display: block;
	width: 540px;
	height: 49px;
	background: transparent url('../img/logo.png') no-repeat 0 0;
}

#logo span {
	display: block;
	position: absolute;
	left: -999em;
}


/* =IMAGES
............................................................... */
.page img {
	border: 1px solid #FC54A0;
	-o-box-shadow: 1px 1px 2px #999;
	-webkit-box-shadow: 1px 1px 2px #999;
	-moz-box-shadow: 1px 1px 2px #999;
	box-shadow: 1px 1px 2px #999;
}
.page img {
	float: left;
	margin: 1em 1em .1em 0;
}

img.left {float: left;margin: 0 1em 0 0;}
img.right, .page img.floatRight {float: right;margin: 0 0 0 1em;}
.noBorder, .page img.noBorder {
	border: 0;
	-o-box-shadow: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}


/* =LISTS
............................................................... */

/* definition lists */
dl{margin: .5em 0;line-height: 2em;}
dl dt{font-weight: bold;}
dl dd{margin-left: 1em;}

#content ul, #content ol{ 
	list-style-type: disc; 
	list-style-position: outside; 
	margin: 2em 0;
	margin-left: 2.5em;
}
#content ol{list-style-type: decimal;}
#content ul li, #content ol li{margin: .5em 0;}

ul li ul, ol li ol, ul li ol, ol li ul{margin: .5em 2em;}
ul li ul li, ol li ol li, ul li ol li, ol li ul li{margin: 0;}

/* Exceptions */
#page-nav ul {
	list-style-type: none;
	margin: 0;
}
#page-nav ul li {
	margin: 0 0 .6em 0;
}
#page-nav ul li:last-child { margin-bottom: 0;}

/* horizontal lists */
ul.horizontal, ol.horizontal,
/* 	We ASSUME the NAV and FOOTER lists are horizontal, so no 'horizontal' needed */
.nav ul, #footer ul {
	list-style-position: inside; 
	list-style-type: none; 
	margin: 0;
}

ul.horizontal li,
ol.horizontal li{
	float: left; 
	margin-right: 1em;
}

.nav ul li,
#footer ul li{
	display: inline; 
	margin-right: 1em;
}

#footer ul{
	padding: 1.2em 0 2em 0;
	background: transparent url('../img/pink-banner.gif') repeat-x 3px 100%;
}
#footer ul li{
	display:  -moz-inline-box; /* Fx 2 */
	display: inline-block; 
	font-size: 1.2em;
	border-right: 1px solid #171717;
	margin: 0 .8em 0 0;
}
#footer ul li a {
	padding: 0 .8em 0 0;
	text-decoration: none;
}
#footer ul li:last-child, #footer ul li.last {border-right: none;}


#content #online-services,
#content #project-list {
	list-style-type: none;
	list-style-position: inside;
	margin: 1.3em 0;
	padding: 0;
}
#content #online-services li,
#content #project-list li {
	margin: 0 0 .5em 0;
	padding: 0 0 .5em 0;
	border-bottom: 1px solid #EEE;
}
#online-services li a,
#content #project-list li a {
	display: block;
	padding: .5em 0 .7em 42px;
	background: transparent url('../img/services-sprite.gif') no-repeat 0 0;
}
#online-services li .email {background-position: 0 0;}
#online-services li .twitter {background-position: 0 -42px;}
#online-services li .facebook {background-position: 0 -84px;}
#online-services li .flickr {background-position: 0 -126px;}
#online-services li .youtube {background-position: 0 -169px;}
#online-services li .rss {background-position: 0 -211px;}

#content #project-list li a { background: none; padding-left: 0;}

/* =NAVIGATION
............................................................... */
#main-navigation ul{
	float: right;
	overflow: hidden;
}
#main-navigation ul li{
	display:  -moz-inline-box; /* Fx 2 */
	display: inline-block;
	margin: 0;
	padding: 0;
	font-size: 1.2em;
	font-weight: bold;
	border-right: 1px solid #171717;
}

#main-navigation ul li a:link,
#main-navigation ul li a:visited,
#main-navigation ul li a:hover,
#main-navigation ul li a:active{
	display:  -moz-inline-box; /* Fx 2 */
	display: inline-block;
	padding: 0 .6em;
	text-decoration: none;
}

#main-navigation ul li a:hover,
#main-navigation ul li a:active{
	color: #171717;
	-webkit-transition: color .35s linear;
}
#main-navigation ul li:last-child, #main-navigation ul li.last {border-right: 0;}
#main-navigation ul li:last-child a, #main-navigation ul li.last a {padding-right: 0;}

#main-navigation ul li.active a:link,
#main-navigation ul li.active a:visited,
#main-navigation ul li.active a:hover,
#main-navigation ul li.active a:active{color: #171717;}

/* =TWEETS
............................................................... */
div.tweet {padding: 0 1px;}
#content ul.tweet_list,
#content ul.tweet_list li {
	margin: 8px 0 0!important;
	padding: 0!important;
}
#content ul.tweet_list li {
	border-bottom: none!important;
	list-style-type: none;
	line-height: 1.54;
}
#content ul.tweet_list li a {background-image: none; padding-left: 0;display: inline;}
#content ul.tweet_list .tweet_avatar {
	display: none;
	float: left;
	margin: 0 10px 0 0!important;
	padding: 0!important;
	line-height: 1;
	border: 1px solid #FC54A0;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
#content ul.tweet_list .tweet_join {color:#FC54A0;}
#content ul.tweet_list .tweet_text {color: #333;font-style: italic;}


/* =BASE STRUCTURE (Div frame)
............................................................... */
#wrapper{
	width: 960px;
	margin: 20px auto;
	text-align: left;
}

/* Generic column classes */
.column{
	width: 225px; 
	float: left; 
	margin: 0 20px 0 0; 
	padding: 0;
	border: none;
}
.last{margin-right: 0;}

.feature, .aside{
	width: 205px;
	padding: 0 10px;
	background: #FC54A0 url('../img/bg-feature.gif') repeat-y 0 0;
	color: #FFF;
}

.article{}

#masthead {
	padding-bottom: .5em;
	background: transparent url('../img/pink-banner.gif') repeat-x 3px 100%;
}

#main-navigation {
	float: right;
	margin-top: -3.1em;
}

#slideshow {
	padding-bottom: 4px;
	background: #171717 url('../img/pink-banner.gif') repeat-x -10px 100%;
	margin-bottom: 2em;
	height: 372px;
	overflow: hidden;
}
#slideshow ul.slides {margin: 0; padding: 0;}
.js-on #slideshow ul.slides {overflow: hidden;}
#slideshow ul.slides li {margin: 0; padding: 0;}
#slideshow ul.slides li img {}
#slideshow ul.slides li h3 {}
#slideshow ul.slides li p {}
#slideshow ul.slides li p.photo-credits {}
.js-on #slideshow ul.slides li p.photo-credits {display: block;margin: -2em 0 0 1em; color: #FFF;}

#content { margin-bottom: 1.3em; }

.page { 
	float: left;
	width: 655px; 
}

.aside {
	width: 225px;
	float: right;
	background-position: 100% 0;
	background-repeat: no-repeat;
	margin: 0;
	
}

#page-nav {
	background: #171717 url('../img/bg_pagenav.gif') no-repeat 100% 0;
	color: #FFF;
	margin: 20px 0;
}
#page-nav ul {
	padding: 10px 10px 20px;
	background: transparent url('../img/pink-banner.gif') repeat-x -16px 100%;
}

#footer { background: transparent url('../img/dot-hor-black.gif') repeat-x 0 0; }
#footer p.about{
	background: #171717 url('../img/black-noise.jpg') repeat 0 0;
	color: #FFF;
	text-align: right;
	padding: 1.1em 1em;
	font-size: 1.2em;
}


/* =TABLES
............................................................... */
table{
	margin: 2em 0;
	width: 100%;
	border: 1px solid #171717;
	text-align: left;
}
table caption{
	margin-bottom: -1em; /* table top-margin/2 reversed! */
	margin-top: 2em; /* table top-margin/2 reversed! */
	font-size: 1.2em;
	font-style: italic;
	color: #666;
	text-align: right;
}
table tr{}
table thead{}
table thead tr{
	background: #171717; 
	color: #FFF;
}
table thead tr th,
table tfoot tr th{
	border-bottom: 1px solid #171717;
	padding: .2em .5em;
	font-weight: bold;
}
table thead tr td,
table tfoot tr td,
table tfoot tr th{
	padding: .2em .5em;
	border-bottom: 1px solid #171717;
	border-right: 1px solid #171717;
}
table tbody{}
table tbody tr{}
table tbody tr th{
	border-bottom: 1px solid #171717;
	border-right: 1px solid #171717;
	padding: .2em .5em;
	font-weight: bold;
}
table tbody tr td{
	padding: .2em .5em;
	border-bottom: 1px solid #171717;
	border-right: 1px solid #171717;
}


/* =FORMS
............................................................... */
form {}
legend, label, .help_text {
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-weight: normal;
	display: block;
}
fieldset legend {
	margin-bottom:  .5em;
	font-size: 1.3em;
}

form p {
	margin: 1em 0;
	/* auto clearfixing: saves extraneous classnames */
	clear: both;
	overflow: hidden;
	zoom: 1;
}

fieldset p:first-child {margin-top: 0;}

/* Notices, Labels, Errors, Messages */
label {
	font-weight: bold;
	color: #171717;
}
div > label:first-child {
	display: block;
	font-size: 1.4em;
	line-height: 1.54;
}
.help_text {
	display:block;
	font-style: italic;
}

/* Inputs */
input,
textarea {
	width: 183px;
	margin: 0;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 1em;
	background: #FFF url('../img/corner-pink-topright.gif') no-repeat 100% 0;
	color: #FC54A0;
	padding: .3em 10px;
	border: 1px solid #FC54A0;
}
textarea {
	font-size: 1.4em;
	height: 80px;
	overflow: auto;
}
/* FOCUS */
input:focus,
textarea:focus,
input.focused,
textarea.focused {
	border: 1px solid #171717;
	color: #171717;
}

input[required],
textarea[required]{}

input.error,
textarea.error{
	background-color: #FFF;
	border: 1px solid #FF3333;
	color: #FF3333;
	font-style: italic;
}

input[type='button'], input[type='submit'], input[type='checkbox'], input[type='image'], input[type='radio'], input[type='reset'], select, button { cursor: pointer; }

input[type='hidden'] { display:none; }

/* No width etc. on certain types of input... */
input[type='button'], input[type='submit'], input[type='reset'], input[type='image'], .button {
	background: #171717 url('../img/black-noise.jpg') repeat 0 0;
	color: #FFF;
	padding: .2em 1em;
	width: auto; 
	border: 3px double #FFF;
	float: right;
}
input[type='button']:hover, input[type='submit']:hover, input[type='reset']:hover, input[type='image']:hover, input.button:hover {
	border: 1px double #FFF;
	color: #FC54A0;
	margin: 2px;
}

input[type='button']:active, input[type='submit']:active, input[type='reset']:active, input[type='image']:active, input.button:active {
}

/* ... Checkboxes and radio buttons */
input[type=checkbox],
input[type=radio],
input.check,
input.radio {
	background: transparent;
	width: auto;
	float: left; /* !! */
	border: none;
	margin: 0;
}

p.checkbox label, p.radio label {margin-left: 1.5em;}
p.checkbox input, p.radio input {margin-top: -1.5em;}

select { 
	color: #171717; 
	border: 1px solid #171717;
}
select option{}

#honinglabel, #honing{display: none;}

/* CONTACTFORM */
#contactform {width: 50%; }
#contactform textarea{width: 100%; }
#contactform .button{ float: left; }