/******************************************************************************
 * ConstellationNY main stylesheet.
 * Note: Internet Explorer hacks are in a separate files
 * Author: Neal Krouse (krousen@comcast.net)
 *
 ******************************************************************************/
 
 
/*-----------------------------------------------------------------------------
 *	SITE COLORS:
 *	color items:				#ec008c
 *----------------------------------------------------------------------------*/
 
 
/* _general
------------------------------------------------------------------------------*/

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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

/* Tables still need 'cellspacing="0"' in the markup. */
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { text-align: left; font-weight: normal; }

/* Remove possible quote marks (") from <q>, <blockquote>. */
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clear:after, .container:after
{
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
.clear, .container { height: 1%; }
.clear, .container { display: block; }

html 
{ 
	/* Rule removes Page Shift by
	 * adding vertical scrollbars to every page */
	min-height: 100%; 
	margin-bottom: 1px; 
	/* target Firefox because the above code doesn't work */
	overflow:-moz-scrollbars-vertical; 
}

::-moz-selection { background-color: #ec008c; color: #fff; }
::-o-selection { background-color: #ec008c; color: #fff; }
::selection { background-color: #ec008c; color: #fff; }

body
{
	font-family: arial, sans-serif;
	line-height: 1.5;
	/* Unitless for proper inheritance */
	color: #000;
	background-color: white;
}

/* This is where you set your desired font size. The line-height 
   and vertical margins are automatically calculated from this. 
   
   You have to add an extra calculation here because of IE, so that 
   all users may resize text manually in their browsers.
   
   The top one is for IE: The percentage is of 16px (default IE text size)
   10px is 62.5%, 12px is 75%, 13px is 81.25%, and so forth).
   The second value is what all other browsers see (the wanted font size). */
   
body   { font-size: 13px; }  /* Compliant browsers */

h1,h2,h3,h4,h5,h6 
{ 
	font-family: arial, sans-serif;
	font-weight: bold;
	clear: both; 
	line-height: 1.1;
 }

h1
{
	font-size: 5.5em;
	margin-bottom: .1em;
	letter-spacing: -.08em;
	text-rendering: optimizeLegibility;
	word-spacing: -.07em;
}

.shell > h1
{
	border-top: 4px solid #000;
}

h2
{
	font-size: 2em;
	margin: 1em 0 .5em;
	border-top: 4px solid #000;
	padding-top: .25em;
}
h2:first-child { margin-top: 0; border-top: none; }

h3 { font-size: 1.5em; margin-bottom: 1em; }
h4 { font-size: 1.3em; margin-bottom: .5em; text-transform: uppercase; }
h5 { font-size: 1em; }
h6 { font-size: .8em; margin: 0 0 1em; }


strong { font-weight: bold; }
em { font-style: italic; }
p { margin-bottom: 1em; }
.small { font-size: .8em; }
.large { font-size: 1.2em; }
.center { text-align: center; }
.float-left { float: left; margin-right: 1em; }
.float-right { float: right; margin-left: 1em; }
.color { color: #ec008c; }
.ulc { text-transform: capitalize; }
.no-transform { text-transform: none; }
sup { font-size: .8em; vertical-align: top; }
abbr { letter-spacing:0.1em; font-size: .9em; }
p.top-of-page { text-align: right; }
p.top-of-page a { cursor: n-resize; }
p.top-of-page a:after { content: ' \25B2'; cursor: n-resize; }
a:link
{
	text-decoration: none;
	color: #ec008c;
	-webkit-transition: all .25s ease-in;
	-moz-transition: all .25s ease-in;
	-o-transition: all .25s ease-in;
	-ms-transition: all .25s ease-in;
	transition: all .25s ease-in;
}
a:visited
{ 
	color: #f06eaa;
}
a:hover, a:focus 
{ 
	color: black;
}
a:active 
{ 
	color: #9e005d;
	position: relative;
	top: .1em;
}


/* _wrapper
------------------------------------------------------------------------------*/
#wrapper
{
	width: 950px;
	margin: 0 auto;
}

#top
{
	position: absolute;
	top: 0;
	left: 0;
	width:1%;
	z-index: 100;
}

#skipnav
{
	position: relative;
	text-indent: -9000em;
	overflow: hidden;
}
 

/* _branding
------------------------------------------------------------------------------*/
#branding
{
	height: 56px;
	position: relative;
	background-color: #000;
}

#branding #logo
{
	position: absolute;
	width: 368px;
	height: 37px;
	top: 8px;
	left: 13px;
}


#branding #logo a
{
	width: 368px;
	height: 37px;
	display: block;
	position: absolute;
	top: 0;
	left: 0px;
	text-indent: -9999em;
	overflow: hidden;
	outline: 0;
	text-decoration: none;
	background-image: url(constellationny-logo.png);
	background-repeat: no-repeat;
	background-position: left top;
}

#social-media
{
	position: absolute;
	top: 15px;
	right: 22px;
}

#social-media li
{
	display: inline-block;
	float: left;
	position: relative;
}

#social-media li a
{
	width: 24px;
	height: 24px;
	/*text-indent: -9999em;*/
	color: white;
	display: inline-block;
	outline: 0;
	margin-left: 1em;
	text-decoration: none;
	position: relative;
	background-image: url(socialmedia.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#social-media li a span
{
	position: absolute;
	display: block;
	width: 5.5em;
	height: 16px;
	line-height: 16px;
	text-align: center;
	top: 0;
	left: -1.375em;
	font-size: .66em;
	color: white;
	background-color: #ec008c;
	opacity: 0;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: all .5s ease-in;
	-moz-transition: all .5s ease-in;
	-o-transition: all .5s ease-in;
	-ms-transition: all .5s ease-in;
	transition: all .5s ease-in;
}

#social-media li a:hover span
{
	top: 30px;
	opacity: 1;
}

#social-media li a.twitter
{
	background-image: url(socialmedia.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
}

#social-media li a.linkedin { background-position: -26px 0px; }
#social-media li a.facebook { background-position: -52px 0px; }
#social-media li a.blogger1 { background-position: -78px 0px; }
#social-media li a.blogger2 { background-position: -104px 0px; }



/* _navigation
------------------------------------------------------------------------------*/
#nav
{
	font-size: 18px;
	font-weight: bold;
	height: 60px;
	border-bottom: 11px solid #000;
}

#nav li li { display: none; }

#nav > li 
{ 
	display: inline;
	float: left;
}
#nav > li a
{
	color: #000;
	margin-right: 1em;
	text-decoration: none;
	outline: none;
	-webkit-transition:	all .5s ease;
	-moz-transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	transition: all .5s ease;
}

#nav > li a:hover,
#nav > li:hover > a,
#nav > li.current > a
{
	color: #ec008c;
}

#nav li ul
{
	position: absolute;
	/* set width to suit layout */
	width: 13em;
	text-align: left;
	/*background-color: #ec008c;*/
	/*border-bottom: 1px solid orange;*/
	z-index: 110;
	left: -9999em;
}


#nav li li
{
	float: none;
	display: block;
	background-image: none;
	margin: 0;
	padding: 0;
	z-index: 110;
	text-transform: none;
}

#nav li li a
{
	position: static;
	display: block;
	text-indent: 0;
	overflow: inherit;
	background-color: #eaeaea;
	font-size: 14px;
	color: #000;
	letter-spacing: normal;
	text-transform: none;
	padding: 0 12px;
	margin: 0;
	text-decoration: none;
	height: 30px;
	line-height: 30px;
	outline: none;
	/*
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	*/
	border-top: 4px solid orange;
	
	background-color: #ec008c;
	color: white;
}
#nav li li a:hover
{
	background-color: #000; 
	color: #fff;
}

/* you-are-here states for dropdown menus */
#nav li li.current a
{
	color: #fff;
	background-color: #000;
}
#nav li li.current a:before
{
	content: '\25BA ';
}

#nav li:hover ul { left: auto; }




/* _content
------------------------------------------------------------------------------*/
#content
{
	border-bottom: 11px solid #000;
	min-height: 600px;
}
#home-page #content
{
	min-height: 0;
}


/* _primary content
------------------------------------------------------------------------------*/
#primary { border-bottom: 4px #000 solid; }

#home-page #primary
{
	border-bottom: none;
}

#home-page #primary h1
{
	font-size: 5.5em;
	line-height: 1;
	margin-bottom: .1em;
}

#home-page #primary h1 a, #home-page #primary h1 a:link
{
	color: #f06eaa;
	-webkit-transition: all .25s ease-in;
	-moz-transition: all .25s ease-in;
	-o-transition: all .25s ease-in;
	-ms-transition: all .25s ease-in;
	transition: all .25s ease-in;
}
#home-page #primary h1 a:visited
{ 
	color: #f06eaa;
}
#home-page #primary h1 a:hover, #home-page #primary h1 a:focus 
{
	color: black;
}
#home-page #primary h1 a:active { 	color: #9e005d;
position: static; }

/** icons for anchors */
#content a[href^='http://']:after
{
	content: '';
	width: 8px;
	height: 8px;
	display: inline-block;
	background-image: url(custom-theme/images/ui-icons_ec008c_256x240.png);
	background-repeat: no-repeat;
	background-position: -36px -84px;
	margin-left: 4px;
}

#content a[href$='.pdf']:after
{
	content: ' ' url(icon-pdf.png);
	
	-webkit-transition: all .25s ease-in;
	-moz-transition: all .25s ease-in;
	-o-transition: all .25s ease-in;
	-ms-transition: all .25s ease-in;
	transition: all .25s ease-in;
}

#content a[target='_blank']:after
{
	content: '';
	width: 9px;
	height: 8px;
	display: inline-block;
	background-image: url(custom-theme/images/ui-icons_ec008c_256x240.png);
	background-repeat: no-repeat;
	background-position: -52px -84px;
	margin-left: 4px;
}

#content a.pdf:after
{
	content: ' ' url(icon-pdf.png);
}

#content a[href$='.doc']:after
{
	content: ' ' url(icon-doc.png);
}


#content a.image:after { content: ''; }



/* _sub-nav
------------------------------------------------------------------------------*/
#sub-nav
{
	margin-top: 1em;
	width: 238px;
}

#sub-nav.fixed
{
	margin-top: 1em;
	width: 238px;
	position: fixed;
	top: 0;
}

#sub-nav ul
{
	/*width: 238px;*/
}

#sub-nav ul
{
	/*margin-top: 1em;*/
}

#sub-nav ul li
{
	margin-bottom: .5em
}

#sub-nav li a
{
	padding: .5em .5em;
	background-color: #000;
	display: block;
	color: #fff;
}

#sub-nav li a:hover
{
	background-color: #ec008c;
	color: #fff;
}

#sub-nav li.current a
{
	background-color: #ec008c;
	color: #fff;
}

#sub-nav li.current :-moz-any-link:before
{
	/* @KLUGE: Firefox will not render the right-pointing triangle
	 * on the sub-navigation, but it does render it in the main
	 * navigation. I used Firefox's propietary psuedo-class for links.
	 * 
	 * @TODO: Check this rule in Firefox 4, it may render both triangles.*/
	content: '\25B6 ';
}
#sub-nav li.current a:before
{
	content: '\25BA ';
}

#sub-nav .bio-pic
{
	border-top: 2px solid #000;
	/*border-bottom: 3px solid #000;*/
	padding: .5em 0;
	margin-top: 1em;
}

/** Thumbnails on Case Study pages */
#sub-nav #thumbnails,
#sub-nav .thumbnails
{
	border-top: 4px solid #000;
	border-bottom: 4px solid #000;
	padding-top: .2em;
}

#sub-nav .thumbnails { border-top: none; }
#sub-nav #thumbnails ul,
#sub-nav .thumbnails ul
{
	width: 248px;
	margin: .5em 0 0;
}

#sub-nav #thumbnails li,
#sub-nav .thumbnails li
{
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	line-height: 0;
}

#sub-nav #thumbnails li a,
#sub-nav .thumbnails li a
{
	padding: 1px;
	position: relative;
	display: block;
	width: 50px;
	height: 50px;
}

#sub-nav #thumbnails li a:after,
#sub-nav .thumbnails li a:after
{
	content: '';
	width: 12px;
	height: 12px;
	background-image: url(custom-theme/images/ui-icons_ec008c_256x240.png);
	background-repeat: no-repeat;
	background-position: -177px -194px;
	display: block;
	position: absolute;
	bottom: 3px;
	right: 3px;
	z-index: 101;
}

#sub-nav #thumbnails li a:before,
#sub-nav .thumbnails li a:before
{
	content: '';
	width: 6px;
	height: 6px;
	display: block;
	position: absolute;
	background-color: #fff;
	bottom: 6px;
	right: 5px;
	z-index: 100;
}

#sub-nav #thumbnails li img,
#sub-nav .thumbnails li img
{
	/* @NOTE: img's original size are 78px x 78px,
	 * but reducing size to 50px x 50px, helps
	 * CSS3 Transformation. */
	width: 100%;
	image-rendering: optimizeQuality;
}

.csstransforms #sub-nav #thumbnails li a,
.csstransforms #sub-nav .thumbnails li a
{
	-webkit-transition: all .25s ease-in;
	-moz-transition: all .25s ease-in;
	-o-transition: all .25s ease-in;
	-ms-transition: all .25s ease-in;
	transition: all .25s ease-in;
	
	cursor: -moz-zoom-in;
}

.csstransforms #sub-nav #thumbnails li a:hover,
.csstransforms #sub-nav .thumbnails li a:hover
{
	z-index: 100;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	transform: scale(1.5);
	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	-o-box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}



/* end Thumbnails on Case Study pages */

/* _Left-col
------------------------------------------------------------------------------*/
#left-col
{
	width: 25%;
	float: left;
	position: relative;
	min-height: 1em;
}


/* _right-col
------------------------------------------------------------------------------*/
#right-col
{
	width: 50%;
	float: left;
	margin-left: 12.5%;
}

#right-col.no-ternary
{
	width:60%;
}

#right-col p:first-child { margin-top: 1em; }

#right-col ul
{
	list-style-type: disc;
	list-style-position: outside;
	margin-bottom: 1em;
	border-top: 1px solid #ccc;
	color: #ec008c;
}

#right-col ul li
{
	padding: .5em 0;
	border-bottom: 1px solid #ccc;
}

#right-col ul li span
{
	color: #000;
}

/** Intellegence Capital pages */
.intel h4 
{
	padding-top: 1em;
	border-top: 2px solid #000;
}

/* end Intellegence Capital pages */

/* _ternary
------------------------------------------------------------------------------*/
#ternary
{
	width: 10%;
	float: right;
	border-bottom: 1px solid #000;
}

#ternary h6
{
	border-top: 1px solid #000;
	padding-top:1em;
}

#ternary h6:first-child
{
	border-top: none;
}


/* _center-col
------------------------------------------------------------------------------*/
#single-col
{
	width: 50%;
	
	margin-left: 37.5%;
}

#single-col ol
{
	list-style-type: decimal;
	margin-bottom: 1em;
	border-top: 1px solid #ccc;
	list-style-position: outside;
	font-weight: bold;
	font-size: 1.5em;
}

#single-col ol li
{
	padding: 0 0 .25em;
	border-bottom: 1px solid #ccc;
}

#single-col ol li a
{
	font-size: .75em;
	font-weight: normal;
}

#single-col ol a { text-decoration: underline; }

form
 {
 	margin: 1em 0;
 	border-top: 2px solid #000;
 }
 
form p { margin: 1.5em 0; }

label
{
	width: 15%;
	margin-right: 2%;
	display: inline-block;
	float: left;
	padding-top: .5em;;
}
label[for='security'] { padding: 0 0 2em; }

input, textarea
{
	width: 75%;
	border-top: 2px solid #000;
	background-color: #eee;
	border: 2px solid #fff;
	padding: .5em;
	outline: none;
}

input:focus, input:target, textarea:focus
{
	background-color: #f06eaa;
	-webkit-box-shadow: 0 0 4px #ec008c;
	-moz-box-shadow: 0 0 4px #ec008c;
	-o-box-shadow: 0 0 4px #ec008c;
	box-shadow: 0 0 4px #ec008c;
}

input[type='submit']
{
	width: auto;
	margin-left: 17%;
}

input#security { width: auto; }

textarea
{
	height: 12em;
	resize: vertical;
}

p.error:after
{
	content: '';
	width: 12px;
	height: 11px;
	display: inline-block;
	background-image: url(custom-theme/images/ui-icons_ec008c_256x240.png);
	background-repeat: no-repeat;
	background-position: -1px -145px;
}

p.error input, p.error textarea
{
	border-color: #ec008c;
}

p.msg
{
	margin: 1em 0 1em 17%;
	font-weight: bold;
}

p.msg:before
{
	content: '';
	width: 12px;
	height: 11px;
	display: inline-block;
	background-image: url(custom-theme/images/ui-icons_ec008c_256x240.png);
	background-repeat: no-repeat;
	background-position: -1px -145px;
	margin-right: .5em;
}


/* _footer
------------------------------------------------------------------------------*/
#footer
{
	width: 950px;
	font-size: .8em;
	margin: .5em auto 0;
}

#footer p span
{
	float: right;
	font-style: italic;
	opacity: .4;
}

#footer p span:hover
{
	opacity: 1;
}


/* Media Queries
------------------------------------------------------------------------------*/

@media screen and (max-width: 980px)
{
body { font-size: 12px; line-height: 1.7; }
#wrapper { width: 750px; }h1 { font-size: 4em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
#footer { width: 750px; }
}

@media screen and (min-width: 1600px)
{
body { font-size: 14px; }
#wrapper { width: 1200px; }
#footer { width: 1200px; }
}