﻿/* CSS RESET */
img { display: block; }
a img { border: 0; }
a, a:visited { text-decoration: none; }


h1#logo
{
    width: 50px;
    height: 30px;
    border: 1px solid green;    
}

    h1#logo span
    {
        margin-left: -9999px;
    }

/* STYLES */

body 
{
    margin: 0;
    padding: 0;
    background: #e8e2e4 url(../images/layout/bg-body-centek.png) top left repeat-x;
    font-family: Arial, "Trebuchet MS", Sans-Serif;
    font-size: 12px;    
}

div.main-col ul
{
    margin: 10px;
    padding: 0 0 0 12px;
    list-style-type: circle;
}

    div.main-col ul li
    {
        margin: 0;
        padding: 0;
    }   

/* LAYOUT */

div#wrapper
{
    margin: 5px auto;
    width: 980px;
    padding: 20px;
    background: #fff;
}

div#footer
{
    font-size: 1em;
    border-top: 1px solid #ccc;
    margin: 30px 0;
    padding: 20px 0 0 30px;
}

    div#footer div.footer-content
    {
        width: 60%;
        font-size: 1em;
        line-height: 17px;
        background: transparent url(../images/layout/map-sweden.png) center right no-repeat;
    }
    
        .footer-content div.address-push
        {
            width: 20%;
            margin: 10px 20px 20px 0;
        }
    
    div#footer div.footer-info
    {
        width: 80px;
        margin: 20px 30px 20px 45px;  
        text-align: center;      
    } 
    
		div#footer div.footer-info a,
		div#footer div.footer-info a:visited
		{
			font-size: 90%;
		}
    
         div#footer div.footer-info h4
         {
             font-size: 16px;
         }
         
         div#footer div.footer-info ul 
         {
             list-style-type: none;
             margin: 10px 0 0 0;
             padding: 0;             
         }
         div#footer div.footer-info ul li
         {
             font-size: 0.9em;
             margin: 0 0 4px 0;
         }
    
    div#footer div.footer-partners
    {        
        margin: 0 0 0 30px;        
    }
    
    div#footer div.footer-intro
    {
        width: 80%;
    }
    
    div#footer div.footer-map
    {
        width: 10%;
    }        

/* COMMON */

.clr { clear: both; }
.align-left { float: left; }
.align-right { float: right; }

span.copyright
{
    font-size: 0.8em;
}

/* NAVIGATION */

ul#nav
{
    width: 981px;
    height: 80px;
    margin: 15px 0;
    padding: 0;
    list-style-type: none;
    float: left;
    background: url(../images/layout/navigation-ny.png) 0 1px no-repeat;
}
    ul#nav li
    {
        float: left;      
        height: 80px;
        padding: 0;
        margin: 0;        
    }
    
        ul#nav li a,
        ul#nav li a:visited
        {
            display: block;
            height: 80px;
            outline: none;
        }
    
        ul#nav li a span
        {
            margin-left: -9999px;
        }

/* Specific id */

li#default { left: 0; width: 81px; }
li#default a:hover,
li#default a.active { background: url(../images/layout/navigation-ny.png) 0px -80px no-repeat; }
li#default a { height: 80px; }

li#about { left: 0; width: 106px; }
li#about a:hover,
li#about a.active { background: url(../images/layout/navigation-ny.png) -81px -80px no-repeat; }
li#about a { height: 80px; }

li#companies { left: 0; width: 118px; }
li#companies a:hover,
li#companies a.active { background: url(../images/layout/navigation-ny.png) -187px -80px no-repeat; }
li#companies a { height: 80px; }

li#students { left: 0; width: 113px; }
li#students a:hover,
li#students a.active { background: url(../images/layout/navigation-ny.png) -305px -80px no-repeat; }
li#students a { height: 80px; }

li#designers { left: 0; width: 116px; }
li#designers a:hover,
li#designers a.active { background: url(../images/layout/navigation-ny.png) -418px -80px no-repeat; }
li#designers a { height: 80px; }

li#press { left: 0; width: 84px; }
li#press a:hover,
li#press a.active { background: url(../images/layout/navigation-ny.png) -534px -80px no-repeat; }
li#press a { height: 80px; }

li#contact { left: 0; width: 94px; }
li#contact a:hover,
li#contact a.active { background: url(../images/layout/navigation-ny.png) -618px -80px no-repeat; }
li#contact a { height: 80px; }

/* JQUERY CODA-SLIDER*/

.stripViewer .panelContainer .panel ul {
	text-align: left;
	margin: 0 15px 0 30px;
}

.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
	margin: 20px 0;
	position: relative;
	width: 100%;
}

/* These 2 lines specify style applied while slider is loading */
.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
.csw .loading {margin: 200px 0 300px 0; text-align: center}

.stripViewer { /* This is the viewing window */
	position: relative;
	overflow: hidden; 
	border: 1px solid #e8e2e4; 
	margin: auto;
	width: 630px; /* Also specified in  .stripViewer .panelContainer .panel  below */
	height: 250px;
	clear: both;
	background: #fff;
}

.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
	position: relative;
	left: 0; top: 0;
	width: 100%;
	list-style-type: none;
	/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
}

.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
	float: left;
	height: 100%;
	position: relative;
	width: 630px; /* Also specified in  .stripViewer  above */
}

.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
	padding: 0;
}

.stripNav,
.stripNavL,
.stripNavR
{
    display: none;
}

/* s3slider */

#s3slider {
   width: 980px; /* important to be same as image width */
   height: 375px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}

#s3sliderContent {
   width: 980px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin: 5px 0 0 7px; /* important */
   padding: 0;
}

.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}

.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 11px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   margin: 0;
   width: 350px;
   background-color: #8495A2;
   filter: alpha(opacity=80); /* here you can set the opacity of box with text */
   -moz-opacity: 0.8; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.8; /* here you can set the opacity of box with text */
   opacity: 0.8; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   bottom: 0;

   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}

.clear {
   clear: both;
} 

#s3slider li.hidden
{
	display: none;
}
