@charset "UTF-8";

/* •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••
   ••  Project: Sphere-Research.com                                 ••
   ••  Date:    July 2009                                           ••
   •••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••   
   
    1. GLOBAL STYLES
       1.1 Reset
       1.2 Default
       1.3 Accessibility
       1.4 Combined
      
    2. LAYOUT
       2.1 Clearfix
       2.2 Scaffold
       2.3 Columns
    
    3. HEADER
       3.1 Contact
       3.2 Logo
       3.3 Navigation
    
    4. CONTENT
       4.1 Headers
       4.2 Thumbnails
       4.3 Body (Text & Illustrations)
       4.4 Form
    
    5. SPECIFIC
       5.1 Layout
       5.2 Intro
       5.3 Projects
       5.4 Projects’ JS Carousel
       
    6. FOOTER
      
---------------------------------------------------------------------- */

/* 1. =GLOBAL STYLES
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* 1.1 =Reset
---------------------------------------------------------------------- */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strike, strong, sub, sup, tt, 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;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-style: inherit;
  font-weight: inherit;
}

a, ins, del {
  text-decoration: none;
}

q, blockquote {
  quotes: none;
}

q:after, q:before,
blockquote:after, blockquote:before {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

th, td {
  vertical-align: top;
}

th {
  text-align: left;
}

button, input, select, textarea {
  font: inherit;
}

/* 1.2 =Default
---------------------------------------------------------------------- */

body {
  font: normal 62.5%/1 Arial, "Helvetica Neue", Tahoma, Verdana, Geneva, sans-serif;
  background: #fff url("i/bg-top.jpg") no-repeat 50% 0;
  color: #464646;
}

body.home {
  background-image: url("i/bg-top-home.jpg");
}

del       { text-decoration: line-through; }
strong, b { font-weight: bold; }
em, i     { font-style: italic; }

blockquote, p, ul, ol, dl, fieldset {
  line-height: 1.5em;
  margin-bottom: 1em;
}

li {
  list-style-position: inside;
}

blockquote {
  background: url("i/bg-blockquote.png") no-repeat;
  padding-left: 15px;
  color: #6b9c21;
}

a {
  background-color: #eae8d0;
  border-bottom: 2px solid #c6c4a8;
  padding: 3px 6px;
  color: #464646;
}

button, input[type="submit"], input[type="image"] {
  cursor: pointer;
}

/* 1.3 =Accessibility
---------------------------------------------------------------------- */

#a11y,
.header-structural {
  position: absolute;
  height: 1px;
  width: 1px;
  left: -999em;
}

/* 1.4 =Combined
---------------------------------------------------------------------- */

#header,
#main,
#footer {
  font-size: 1.4em; /* 10px → 14px */
}

a.company,
.navigation a,
.header a,
.projects .slides a,
.thumbnails a,
#footer .header a {
  padding: 0;
  border-bottom: 0;
  background-color: transparent;
}

.thumbnails{
	width: 980px;
	margin-left: auto;
	margin-right: auto;
}

.navigation,
.projects .viewer,
.projects .pagination ul {
  margin-bottom: 0;
}

.navigation li,
.projects .viewer li,
.projects .pagination li,
.pitch li,
.thumbnails li {
  list-style: none;
}

/* 2. =LAYOUT
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* 2.1 =Clearfix
---------------------------------------------------------------------- */

#header > div:after,
.columns:after,
.header-items:after,
.navigation:after,
.projects .viewer:after,
.projects .pagination:after,
.projects .body:after,
.thumbnails:after,
span.grid:after {
  clear: both;
  content: "";
  display: block;
  height: 0;
  overflow: hidden;
}

/* 2.2 =Scaffold
---------------------------------------------------------------------- */

#header address span,
#header > div,
#main,
#footer > * {
  display: block;
  width: 980px;
  margin: 0 auto;
}

/* 2.3 =Columns
---------------------------------------------------------------------- */

.columns > .primary,
.columns > .secondary,
.columns > .tertiary {
  float: left;
}

.columns > .primary,
.columns > .secondary {
  width: 476px;
}

.columns > .primary {
  margin-right: 14px;
}

.columns > .secondary {
  margin-left: 14px;
}

.columns.minor-major > .primary,
.columns.major-minor > .secondary {
  width: 326px;
}

.columns.minor-major > .secondary,
.columns.major-minor > .primary {
  width: 626px;
}

.columns.minor-major > .secondary.columns > .primary,
.columns.minor-major > .secondary.columns > .secondary,
.columns.minor-major > .secondary .columns > .primary,
.columns.minor-major > .secondary .columns > .secondary {
  width: 299px;
}

.columns.minor-major > .secondary.columns.minor-major > .primary,
.columns.minor-major > .secondary .columns.minor-major > .primary {
  width: 260px;
}

.columns.minor-major > .secondary.columns.minor-major > .secondary,
.columns.minor-major > .secondary .columns.minor-major > .secondary {
  width: 338px;
}

.columns.minor-minor-major > .primary,
.columns.minor-minor-major > .secondary {
  width: 280px;
  margin-left: 0;
  margin-right: 28px;
}

.columns.minor-minor-major > .tertiary {
  width: 364px;
}

/* 3. HEADER
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* 3.1 =Contact
---------------------------------------------------------------------- */

#header address {
  background-color: #002a5f;
  border-bottom: 4px solid #3773bf;
  color: #fff;
}

#header address span {
  padding: 20px 0;
}

#header address a {
  background-color: #eae8d0;
  color: #363636;
}

/* 3.2 =Logo
---------------------------------------------------------------------- */

.company {
  margin: 0px 40px 30px 15px;
  width: 300px;
  height: 75px;
  background: url("i/logo-sphere-research.png") no-repeat;
  text-indent: -1000em;
  outline: 0;
  float: left;
}

/* 3.3 =Navigation
---------------------------------------------------------------------- */

.navigation {
  float: left;
  margin-top: 60px;
}

.navigation li {
  float: left;
  width: 140px;
  text-transform: lowercase;
  padding-right: 10px;
  text-shadow: #fff 1px 0 0;
}

.navigation li a {
  display: block;
}

.navigation strong {
  display: block;
  text-transform: lowercase;
  font-weight: bold;
  font-size: 1.286em; /* 14px → 18px */
}

/* 4. CONTENT
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

#main {
  padding: 0 10px 10px;
}

/* 4.1 =Headers
---------------------------------------------------------------------- */

.header {
  border-bottom: 1px dotted #3773bf;
  padding: 12px 0;
  margin-bottom: 1em;
}

.header-major,
.header-minor {
  text-transform: lowercase;
  font-weight: bold;
}

.header-major {
  font-size: 1.286em; /* 14px → 18px */
}

.header.header-major {
  margin-bottom: 0.778em; /* 18px → 14px */
}

.header.header-minor {
  font-size: 1em;
  margin-bottom: 1em;
}

.header-items > * {
  display: inline;
}

.header-items .more {
  color: #707070;
  padding-left: 10px !important;
  text-transform: lowercase;
}

.header-items .more:before {
  content: "» "
}

/* 4.2 =Thumbnails
---------------------------------------------------------------------- */

.thumbnails li {
  float: left;
  margin-left: 16px;
}

.thumbnails li:first-child {
  margin-left: 0;
}

.thumbnails a,
.thumbnails img {
  display: block;
  margin: 1px;
  margin-right: 3px;
}

#photo-hs img,#photo-contest img,#photo-ideone img,#photo-scarky img,#photo-spoj img{
	display: none;
}
#photo-hs a,#photo-contest a,#photo-ideone a,#photo-scarky a,#photo-spoj a{
	margin: 1px;
}
#photo-hs:hover, #photo-hs:focus {
	background: url(../content/images/all2.png);
	background-position: -15px -21px;
}

#photo-hs{
	width: 200px;
	height: 44px;
	margin-top: 25px;
	display: block;
	background: url(../content/images/all.png);
	background-position: -15px -21px;
}

#photo-contest:hover, #photo-contest:focus{
	background: url(../content/images/all2.png);
	background-position: -235px -23px;
}
#photo-contest{
	width: 130px;
	height: 40px;
	margin-top: 27px;
	background: url(../content/images/all.png);
	background-position: -235px -23px;
}

#photo-ideone:hover, #photo-ideone:focus{
	background: url(../content/images/all2.png);
	background-position: -385px -23px;
}
#photo-ideone{
	width: 200px;
	height: 37px;
	margin-top: 27px;
	background: url(../content/images/all.png);
	background-position: -385px -23px;
}

#photo-scarky:hover, #photo-scarky:focus{
	background: url(../content/images/all2.png);
	background-position: -605px 3px;
}
#photo-scarky{
	width: 100px;
	height: 92px;
	background: url(../content/images/all.png);
	background-position: -605px 3px;
}

#photo-spoj:hover, #photo-spoj:focus{
	background: url(../content/images/all2.png);
	background-position: -725px -26px;
}
#photo-spoj{
	width: 250px;
	height: 32px;
	margin-top: 30px;
	background: url(../content/images/all.png);
	background-position: -725px -26px;
}

/* 4.3 =Body
---------------------------------------------------------------------- */

.lesser {
  font-size: 0.857em; /* 14px → 12px */
}

.lesser p,
.lesser blockquote,
.lesser ol,
.lesser ul,
.lesser dl {
  line-height: 1.75em; /* 12px → 21px */
  margin-bottom: 1.75em; /* 12px → 21px */
}

.photo img {
  display: block;
  border: 5px solid #d9e2c3;
  padding: 1px;
  background-color: #fff;
}

.illustrated img {
  float: left;
}

.columns > .illustrated .body {
  margin-left: 180px;
  padding-left: 10px;
}

/* 4.4 =Forms
---------------------------------------------------------------------- */

label,
textarea,
span.grid,
span.submit {
  display: block;
  margin-bottom: 10px;
}

span.grid label {
  float: left;
  width: 80px;
  margin: 0;
  padding-right: 10px;
  text-align: right;
}

span.submit {
  text-align: right;
}

input[type="text"],
input[type="password"],
textarea,
select {
  border: 1px solid #c2c0c0;
  padding: 2px;
  width: 307px;
}

span.grid input[type="text"],
span.grid input[type="password"],
span.grid textarea {
  width: 217px;
}

span.grid select {
  width: 223px;
}

input[type="submit"] {
  border: 2px solid #c6c4a8;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  background-color: #fff;
  padding: 3px 7px;
  color: #464646;
}

/* 5. SPECIFIC
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

/* 5.1 =Layout
---------------------------------------------------------------------- */

.projects {
  margin-left: -6px;
}

.projects + .thumbnails,
.projects + .thumbnails + .columns {
  padding-left: 27px;
}

.projects + .thumbnails + .columns > .primary,
.projects + .thumbnails + .columns > .secondary {
  width: 285px !important;
}


/* 5.2 =Intro
---------------------------------------------------------------------- */

.intro blockquote {
  background: none;
  padding: 0;
  color: #464646;
  margin: 40px 0 0 400px;
}

.intro blockquote p {
  background: url("i/bg-tagline.png") no-repeat;
  text-align: center;
  font-size: 2em;
  line-height: 1.25em;
}

.intro + * + .pitch li {
  background-position: 0 0;
}

/* 5.3 =Pitch
---------------------------------------------------------------------- */

.pitch li {
  list-style-position: outside;
  padding-left: 30px;
  background: url("i/bullet-tick.png") no-repeat 0 0.4em;
}

.pitch.bullets li {
  line-height: 28px;
}

/* 5.4 =Projects
---------------------------------------------------------------------- */

.projects {
  background: url("i/bg-project.png") no-repeat;
  padding: 11px 0 0 11px;
  position: relative;
  margin-bottom: 0px;
}

.projects .inner {
  background-color: #fff;
  padding: 6px 0 0 0;
  border-left: 9px solid #fff;
  overflow: auto;
}

.projects .viewer {
  width: 1845px;
  overflow: hidden;
}

.projects .viewer li {
  float: left;
  width: 598px;
  padding-right: 14px;
  height: 200px;
  overflow: auto;
  margin-bottom: 5px;
}

.projects .illustration {
  float: left;
}

.projects .header {
  padding-top: 0;
}

.projects .body {
  margin-left: 40px;
  padding-left: 10px;
  margin-top: 30px;
}

.projects .pagination {
  background-color: #fff;
  margin-right: 30px;
}

.projects .pagination li,
.projects .pagination li a {
  float: left;
}

.projects .slides {
  float: left;
  padding: 9px 0 9px 16px;
}

.projects .slides li {
  margin-right: 4px;
}

.projects .slides a {
  width: 19px;
  height: 19px;
  outline: 0;
  text-indent: -1000em;
  background: #fff url("i/bullet-slides.png") no-repeat;
}

.projects .slides a.active {
  background-position: 0 -19px;
}

.projects .prev-next {
  float: right;
  text-transform: lowercase;
}

.projects .prev-next li {
  margin-left: 2px;
}

.projects .prev-next a {
  padding:1px 4px;
  outline: 0;
  font-size: 12px;
}

.projects .prev-next li.previous,
.projects .prev-next li.forward{
	width: 74px;
}
.projects .prev-next li.previous a,
.projects .prev-next li.forward a{
	width: 62px;
       text-align:center;
}
.projects .prev-next li.previous a:before {
  content: "« ";
}

.projects .prev-next li.forward a:after {
  content: " »";
}

/* 5.5 =Carousel
---------------------------------------------------------------------- */

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
  position: relative;
}

.jcarousel-clip {
  z-index: 2;
  padding: 0;
  margin: 0;
  overflow: hidden;
  position: relative;
}

.jcarousel-list {
  z-index: 1;
  overflow: hidden;
  position: relative;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
  float: left;
  list-style: none;
  /* We set the width/height explicitly. No width/height causes infinite loops. */
  width: 75px;
  height: 75px;
}

/* 6. FOOTER
•••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••• */

#footer {
  background-color: #eae8d0;
  border-top: 4px solid #c6c4a8;
  padding: 8px 0 20px;
}

#footer .header {
  border-bottom-color: #c6c4a8;
}

#footer a {
  background-color: #fff;
}

#footer p span {
  display: block;
}

#footer p span.line,
#footer .vcard {
  margin-top: 25px;
}

#footer .copyright {
  background: url("i/bg-credtis.png") no-repeat;
  color: #abaa98;
  padding: 21px 0 0;
  font-size: 0.857em; /* 14px → 12px */ 
  line-height: 1.75em; /* 12px → 21px */
}