/* Syzygy website colours

	1/ Reset style
	2/ Generic style
	3/ Page layout
	4/ Navigation
	5/ Page components
	6/ Callouts
	7/ Carousel
	
	colours:
	yellow: 		#f3df52
	dark gray:		#4b4b4b	(text)
	lighter gray:	#787878 (text)
	
*/


/******************** 1. Reset ********************/
html, body, div, span, a, img,
h1, h2, h3, h4, h5, h6, p,
dl, dt, dd, 
abbr, acronym, address, blockquote, 
cite, code, em, i, ins, kbd, pre, q, 
tt, var, small, strong, sub, sup, 
object, iframe, form, fieldset, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, hr
textarea, input, select		{ font-family: inherit; font-size: 100%; margin: 0; padding: 0; border:0}

/******************** 2. Generic style ********************/
body 			{ font: 0.75em Arial, Helvetica, Verdana, Geneva, sans-serif; color: #4b4b4b; background: #f3f3f3 url(../images/bg_body.jpg) no-repeat top center; }
p				{ margin: 0 0 1.5em 0; }
a				{ color: #D73332; text-decoration:underline;}
a:hover			{ text-decoration:underline;}
a.cta			{ display: block; margin: 0 0 0.5em 0; }
.hidden 		{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} 
.clearing 		{ display: block; height: 0; clear: both; overflow: hidden; }
.sub-header		{ display: block; margin-bottom: 0.6em; }
.more 			{ text-align:right; font-weight:bold}


h1				{ font-size: 1.9em; font-weight:lighter; padding-bottom: 0.5em; margin-bottom:.5em; background: transparent url(../images/bg_line.gif) repeat-x 0 70px }
h1 a			{ font-weight: normal; text-decoration:none; }
h2				{ font-size: 1.55em; font-weight: lighter; color: #4c4c4c; padding-bottom: 0.5em; }
h3				{ font-size: 1.2em; font-weight: bold; padding-bottom: 0.3em; }
h2 a, h3 a		{ text-decoration:none;}
h2.js-toggle a	{ color:#4b4b4b; text-decoration:none}
h2 a em			{ display: inline-block; width: 15px; height:15px; margin-right: 5px; background: transparent url(../images/icon_plus_minus2.gif) no-repeat 0 0; vertical-align: middle}

h3.highlight	{ background-color: #f3df52; padding: 3px 5px; margin-bottom: 0.5em; color:#fff; font-size: 1.4em}
.top-header		{ position: relative; margin-bottom: 2em; padding-bottom: 0.5em; background: transparent url(../images/bg_line.gif) no-repeat bottom left}
.top-header h1 	{ padding:0 0 0.5em 0; margin:0; }

ul				{ margin: 0 0 1.5em 2em; padding:0; }
ol				{ margin: 0 0 1.5em 3em; padding:0; }
ul li, ol li	{ margin:0; padding:0 0 0.5em 0}
dl				{ margin: 0 0 1.5em 0; }
dt				{ font-weight: bold; padding: 0.75em 0 0.25em 0; }

select			{ border: 1px solid #4b4b4b; }

blockquote		{ padding: 10px 0 10px 55px; margin: 0 0 .5em 0; background: transparent url(../images/quote_up.gif) no-repeat 0 0; }
blockquote div	{ padding: 0 50px 5px 0; background: transparent url(../images/quote_bottom.gif) no-repeat bottom right; }


/******************** 3. Layout ********************/
#container			{ width: 937px; margin: 0 auto; background-color:#fff }
#branding			{ height: 60px; padding: 25px 97px 0 0; text-align: right; position: relative; }	/* Total height: 130px */
#content-wrapper	{ background: #fff url(../images/bg_content.gif) repeat-y top right; overflow:hidden; width:100%;}
#content			{ width:674px; float:left; padding: 35px 14px 4em 14px; }	 /* Total width: 702px */
#right-nav			{ width: 220px; float:right; padding: 25px 0 0 15px; }
#footer				{ clear:both; }	


/******************** 4. Navigation ********************/
.accessibilityNav 				{ margin: 0; padding: 0} 
.skip 							{ display: none; text-align: left; margin: 0 0 0 5px; padding: 0; position: absolute; font-size:1em; } /*All incl Opera*/
/* * html */ .skip 				{ display: block} /*Seen by IE*/
:root .skip 					{ display: block} /*Seen by Moz, FF and Safari*/
.skip a 						{ padding: 0 0.5em; display: inline; z-index: 2; text-decoration:none; position: absolute; width: 20em; left: -300em;}
.skip a:focus, .skip a:active 	{ position: absolute; left: 0.5em; background: #fdf6d1}
.skip a:hover 					{ cursor: default}

/*Footer */
#footer							{ background: #fff url(../images/bg_footer.gif) no-repeat 0 0; padding: 100px 0 20px 14px; font-size:0.95em}
#footer	hr						{ display:inline-block; width: 330px; height: 10px; color: #4b4b4b; background-color:#4b4b4b; text-align:left}
#footer ul      				{ width: 100%; margin:0; padding: 0 0 20px 0; list-style-type: none; word-spacing: -1em; }    /* Firefox 3px gap fix */
#footer ul li 					{ margin:0; display: inline-block; word-spacing: normal; vertical-align: top; width: 150px; padding: 0 20px 0 0; }		
#footer ul li.last				{ width: 180px; padding-left: 30px; }
.ie6 #footer ul li,
.ie7 #footer ul li  			{ display: inline }  /*  IE 6 & IE 7 */
#footer dt						{ padding-bottom:0.5em; font-size:1.2em}
#footer dd						{ padding-bottom:0.5em }
#footer li.last a				{ display:inline-block;  width: 160px; height: 35px; background-image: url(../images/logo_one_syzygy.gif); background-repeat: no-repeat; }
#footer li.last a span			{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;} 
#footer li.last a.bg-syzygy-de	{ background-position: 0 0}
#footer li.last a.bg-unique		{ background-position: 0 -42px}
#footer li.last a.bg-hires		{ background-position: 0 -80px}


/* Main navigation */
#nav				{ font-size: 1.15em; border-bottom: 10px solid #4b4b4b; margin-bottom:10px;}
#nav a				{ text-decoration: none; color:#4b4b4b; font-weight:bold;}
#nav a:hover		{ text-decoration: underline}
#nav ul				{ list-style-type:none; margin: 0 0 15px -15px; padding:0}
#nav ul ul			{ padding: 0.5em 0 0 0; margin:0}
#nav ul li			{ padding: 0 15px 0.35em 15px; margin:0 0 0.35em 0}
#nav ul li li		{ font-size: 0.85em;  margin:0}
#nav ul li.on		{ background-color:#f3df52; padding: 0.5em 15px 0.35em 15px}
#nav ul li.on li	{ padding-top: 0}
#nav ul li.on li.on	{ background: transparent url(../images/bg_nav_on.gif) no-repeat 3px 0.5em; }

.slogan,				
#net				{ margin-bottom: 10px}
#net				{ float: left; border-bottom: 10px solid #4B4B4B; }
#net .social		{ float: left; height: 140px; padding: 0 0 6px 5px; }
#net .social h4		{ font-size: 1.2em; margin: 5px 0; }
#net .social .widget-image span { display: none; }
#net .social .widget-image		{ background: #fff url(../images/social_assets.jpg) no-repeat scroll 0px -52px; display: block; }
#net .social #rss-image			{ height: 51px; width: 52px; }
#net .social #facebook-image	{ background-position: -54px -52px; height: 51px; width: 124px; }
#net .social #linkedin-image	{ background-position: -0px -100px; height: 36px; width: 124px; }
#net .social #vimeo-image		{ background-position: -0px -134px; height: 40px; width: 124px; }
#net .social div p				{ margin: 5px; padding: 0px}
#net .social p					{ margin: 5px 0; padding-right: 10px}
#net .social #social-cta		{ color: #606060; text-decoration: none; padding: 0 0 10px 10px; }
#net .social #social-cta span	{ background: #fff url(../images/social_assets.jpg) no-repeat scroll -192px -52px; display: block; float: left; height: 10px; margin-top: 3px; text-indent: -999px; width: 10px; }
#social-nav					{ float: left; list-style-type: none; margin: 5px 0 0 5px; }
#social-nav li				{ float: left; margin-right: 9px; }
#social-nav li a span 		{ display: none; }
#social-nav li a			{ background: #fff url(../images/social_assets.jpg) no-repeat scroll 0 0; display: block; height: 25px; width: 26px; }
#social-nav li.active		{ border-bottom: 5px solid #4b4b4b; }
#social-nav li a.twitter	{ background-position: -35px 0; }
#social-nav li a.facebook	{ background-position: -70px 0; }
#social-nav li a.linkedin	{ background-position: -106px 0; }
#social-nav li a.flickr		{ background-position: -141px 0; }
#social-nav li a.vimeo		{ background-position: -176px 0; }

#social-nav li.active a.rss			{ background-position: 0 -26px; }
#social-nav li.active a.twitter		{ background-position: -35px -26px; }
#social-nav li.active a.facebook	{ background-position: -70px -26px; }
#social-nav li.active a.linkedin	{ background-position: -106px -26px; }
#social-nav li.active a.flickr		{ background-position: -141px -26px; }
#social-nav li.active a.vimeo		{ background-position: -176px -26px; }

#clients 			{ margin-left: 14px; width: 923px; }
#clients h2 		{ background: transparent url(../images/bg_clients_header.gif) repeat-y 0 0; font-size: 1.4em; padding: 2px 10px; width: 100%; }
#clients h2 a		{ color: #fff; text-decoration:none; }
#clients h2 a:hover	{ text-decoration:underline}
#clients h2 a em	{ display: inline-block; width: 10px; margin-right: 5px; background: transparent url(../images/icon_plus_minus.gif) no-repeat 100% 0.1em; }
#clients h2.collapse em	{ background-position: 0 0.1em; }
#clients ul			{ margin: 0; height: 286px; background: #fff url(../images/bg_clients.jpg) no-repeat 70px 28px; width: 100%; }
#clients ul li		{ position: absolute; left: -999em; }

#search						{ position: absolute; top: 0; right: 0; z-index: 10; background: #4b4b4b; }
#search input[type=text]	{ width: 15em; color: #fff; border: none; background: none; padding: 0.2em 0 0.3em 0.5em; }
#search input[type=submit]	{ width: 2em; text-indent: -999em; cursor: pointer; background: transparent url(../images/search_icon.png) no-repeat 0 0;border:none; }


/******************** 5. Page components ********************/

#pagination { margin-bottom:1.5em;}

.media p	{ padding-top:0.5em; }
.media img	{ margin-bottom: 0.2em}
.group-blog	{ width: 480px}
.group-blog .header-image,
.group-blog .header-video	{ margin-bottom:5px}

/*Share */
.share h3		{display: inline; font-weight:normal; padding-right: 5px}
.share ul		{display: inline; margin:0 1.5em 1.5em 0; padding:0}
.share li		{display: inline; padding: 0 5px; border-left: 1px solid #ccc}

/* Blog wrapper */
.block					{ padding: 0 0 1.5em 0; margin:0; }
.block .date, .caption	{ color:#787878;  font-size: 0.9em}
.block .js-hide .date	{ padding-left: 20px; }
.block.border 			{ margin-bottom: 2em; background: transparent url(../images/bg_line.gif) no-repeat bottom left; }

.gmap					{ padding: 0 0 1.5em 0; margin:0; }

.listing			{ margin: 0 0 1.5em 0; padding:0; list-style-type:none; font-size: 1.2em; font-weight:bold}
.listing li			{ padding: 0 0 0.6em 0; margin:0 }
.listing li a		{ text-decoration: none}
.listing li a:hover { text-decoration: underline;  }

.who-we-are			{ margin-bottom:1.5em; padding: 15px; background-color: #f3df52; color:#fff; font-size:1.8em; line-height:1; }

/* Contact us form */
form, fieldset		{}
#contact-form fieldset label input,
#contact-form fieldset .send input	{ width: auto; }
#contact-form fieldset .group,
#contact-form fieldset .message		{ margin-bottom: 10px; }
#contact-form fieldset label:first-child	{ padding-right: 20px; }
#contact-form fieldset label	{ padding-right: 10px; }
#contact-form fieldset input,
#contact-form fieldset textarea	{ padding: 4px; width: 300px; }
#contact-form fieldset label input { padding: 2px; }
textarea, input 	{ border: 1px solid #ccc}

.gmap				{ min-height: 358px; margin: 0 0 1.5em 0; }
.ie6 .gmap			{ height: 358px; }
.gmap code			{ display: none; }


/* Col - Common */
ul.col-2-list, 
div.col-2-div,	
ul.col-4-list, 
ul.col-3-list,
div.col-3-div				{ word-spacing: -1em; margin:0; padding:0; }
.ie6 ul.col-1-list li .col,
.ie7 ul.col-1-list li .col,
.ie6 ul.col-2-list li,
.ie7 ul.col-2-list li,
.ie6 div.col-2-div .col,
.ie7 div.col-2-div .col,
.ie6 ul.col-4-list li,
.ie7 ul.col-4-list li,
.ie6 ul.col-3-list li, 
.ie7 ul.col-3-list li,
.ie6 div.col-3-div .col,
.ie7 div.col-3-div .col			{ display: inline; }	/*  IE 6 & IE 7 */


/* 1-columns-list */
ul.col-1-list					{ margin: 0; padding: 0; list-style: none; }
ul.col-1-list li				{ padding: 0 0 1.5em 0; word-spacing: -1em; width: 100%; margin-bottom: 0.8em; }
ul.col-1-list li .col			{ width: 330px; margin-right: 14px; padding:0; display: inline-block; vertical-align: top; word-spacing: 0; }
ul.col-1-list li .col.right		{ margin-right: 0; }

/* 2-columns-list */
ul.col-2-list li				{ width: 330px; margin: 0 0 1em 14px; padding:0; display: inline-block; vertical-align: top; word-spacing: 0; }
ul.col-2-list li.odd			{ margin-left: 0; }
ul.col-2-list img				{ margin-bottom: 0.5em; }
ul.col-2-list h2				{ padding-bottom: 0.2em; }

/* 2-columns-divs */
div.col-2-div .col				{ width: 330px; margin-right: 14px; padding:0; display: inline-block; vertical-align: top; word-spacing: 0; }
div.col-2-div .col.right		{ margin-right:0; }
div.col-2-div img				{ margin-bottom: 0.5em; }

/* 4-columns-list */
ul.col-4-list li				{ width: 161px; margin-left: 10px; padding:0; display: inline-block; vertical-align: top; word-spacing: 0; }
ul.col-4-list li:first-child	{ margin-left: 0; }
.ie6 ul.col-4-list li.first		{ margin-left: 0; }		/* IE 6 fix */
ul.col-4-list img				{ margin-bottom: 0.8em; }

/* 3-columns-list */
ul.col-3-list li				{ width: 217px; margin-left: 11px; padding:0; display: inline-block; vertical-align: top; word-spacing: 0; }
ul.col-3-list li:first-child	{ margin-left: 0; }
.ie6 ul.col-3-list li.first		{ margin-left: 0; }		/* IE 6 fix */
ul.col-3-list img				{ margin-bottom: 0.8em; }

/* 3-columns-divs */
div.col-3-div .col				{ width: 217px; margin-right: 11px; padding:0; display: inline-block; vertical-align: top; word-spacing: 0; }
div.col-3-div .col.right		{ margin-right: 0; }
div.col-3-div img				{ margin-bottom: 0.8em; }

/******************** 6. Callouts ********************/
.calloutContainer				{ border: solid 1px #ffffff; position: relative; top: 1px; z-index: 3; width: 190px; padding: 4px; font-size:10px; background-color:#EFEFEF; padding:2px; }
.calloutDown					{ height: 0; width: 0; border-top: 12px solid #ffffff; border-left: 12px dotted transparent; border-right: 12px dotted transparent; left: 0px; top: 0px; margin-left: 20px; z-index: 11; }
.calloutDown div				{ position: relative;left: -10px;top: -12px;height: 0;width: 0;border-top: 10px solid #EFEFEF;border-right: 18px dotted transparent; z-index: 10;}


/******************** 7. Carousel ********************/

#carousel			{ margin-bottom:1.5em; padding:10px; background-color: #efefef;  }

.img-grid { width:654px; margin:auto; overflow:hidden; position:relative; }
.img-grid ul { list-style-type:none; padding:0; margin: 0; width:100%; position:relative; }
.img-grid li {
    zoom:1;
    list-style-type:none;
    margin:0;
    vertical-align:middle;
    position:relative;
    float:left;
    display:inline;
    padding: 8px;
    *padding:0;
    *font-size:180px;
}
.img-grid li img { vertical-align:middle; background:#fff; border:solid 1px #555; }