/* v1.0 | 20080212 */

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,
b, u, i, center,
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%;
	vertical-align: baseline;
	background: transparent;
	z-index: 2;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration: none;
}

/* Studio Kap Layout Styles */


/* Large structure styling
----------------------------------------*/
html, body, .swc0, .swc1 {
    height: 100%;
}
.swc0 {
    display: table;
    margin: 0 auto;
    width: 950px;
}
.swc1 {
    display: table-cell;
    vertical-align: middle;
}
.swc1 {
    white-space: nowrap;
}
.swc2 {
    position: relative;
}
.swc2:after {
    content: "";
    height: 0;
    position: absolute;
}

div#width { 
	width:875px;
	height:600px;
	white-space: normal;
}
#header {height: 50px;}
#header img {display:none;}
#content { position:relative;}

/* Navigation style for global
-------------------------------------------------------------*/

#nav {height:132px; width:132px; position:relative; top: 400px}
#nav ul {margin:0; padding:0; list-style:none; white-space:nowrap; text-align:left; padding:1px 1px 0 1px;}
#nav li {margin:0; padding:0; list-style:none;}
#nav li {display:inline-block; display:inline;}
#nav ul ul {position:absolute; left:-9999px; height:120px}
#nav ul#toplevel {position:absolute; left:0; top:0;}
#nav ul li:hover > ul {	left:100%;	margin-top:-23px;	margin-left:-1px;}
#nav a:hover ul, #nav a:hover a:hover ul, #nav a:hover a:hover a:hover ul {left:100%;}
#nav ul li:hover > ul.level_menu {top: 23px; }
#nav table {position:absolute; left:99%; height:0; width:0; border-collapse:collapse; margin-top:-7px; margin-left:-1px;}
#content {position: relative;	top: -110px;	height:365px;	width: 875px;}
#nav ul.level_menu {	width: 130px;}
#nav ul.outy {left:100%;margin-left:-1px;margin-top:-29px;top:29px;z-index:-10;}

/* Dynamic Navigation styling
---------------------------------------------*/

div.sc_menu_wrapper {height: 120px;	margin-top: 40px; overflow: auto;	position: absolute; top: -40px; left: 390px; width:240px}
div.sc_menu {padding: 0;}
.sc_menu_wrapper .loading {	position:relative;	top: 0px; left: 2px; width:100px}
#nav div.sc_menu_wrapper li { display:block;}

/* Wide dynamic nav box
------------------------------*/
div.wide {width:483px;}

/* Style to hide the right side on the long pages
----------------------------------------------------------*/
body.longpage .holder {display:none;}
body.longpage #project-header {display:none;}

body.longpage #left_image {width: 875px; height:365px; overflow:hidden}
body.halfpage #left_image {width: 560px; height:365px; overflow:hidden}
body.thirdpage #left_image {width: 300px; height:365px; overflow:hidden} 

body.longpage #left_image #s4.pics img {width: 875px; height:365px; position:absolute; top: 0; left: 0 }

#left_image, #s4, div.pics,  div.pics {width: 100%; height:100%;}

/* Layout style for the CONTENT left, right and image link boxes
-------------------------------------------------------------------*/
#project-images {position:absolute; margin: 0; }
#s4 {height: 365px; overflow:hidden}
.pics {height:  365px;width:   560px;padding: 0;margin:  0;}
.pics img {padding: 0;background-color: #fffafa;position: relative; bottom: 0; left: 0}
 
/* Style for the little image rollover boxes
----------------------------------------------------*/
.img_nav { margin:0 }
#project-images { width:auto; height: 15px; right: 0; top:380px;}
#project-images a { margin: 0 2px; width: 10px; height: 10px ; border: 1px solid #8B0000;text-decoration: none; text-indent:-9999px; display: block; float: left; }
#project-images a:visited {}
#project-images a:hover {border: 1px solid #c0c0c0;}
#project-images a:active {background-color: #50404D}
#project-images a.activeSlide { background: #933; border: 1px solid #8B0000  }
#project-images a:focus { outline: none; }


/* the changin HOLDER div styles
--------------------------------*/
.holder {height:335px; position:absolute; right:0; width:556px; top:30px }
body.news .holder { }
body.news .holder li {line-height: 20px}
body.studio .holder {width:300px; }
body.project .holder {width:300px; top:60px; height: 305px; }
body.staff .holder {width:300px; top:60px; height: 305px;}


/* NEWS body class
-------------------------------------*/
body.news #left_image {width: 300px}

/* Style for the main images on the portfolio page
----------------------------------------------------------*/

#left_image {position:absolute; top:0px; left:0; width: 560px; height: 365px;}


/* Hide ie6 warning
------------------------------ */
#dreadedie6 {display: none;}

/* stops akk the images pilling up with no js
---------------------------------------------------*/
body.js_off div#s4 img {display: none; }
body.js_off div#s4 img:first-child { display: block;}

/* Scollpane layout
------------------------*/
.scroll-pane { height:335px; overflow:auto; position:absolute; }
body.project .scroll-pane { height:305px}
body.staff .scroll-pane {height:305px}
body.news .scroll-pane {width: 557px;}

/* SLD tag
----------------------*/

#sld_tag {text-align:right; margin:80px 0 20px 0;padding: 40px 0 10px; display:block; }


/*
.holder {border: 1px dashed tan;}
#content {border: 1px dashed purple;}*/

/* Studio Kap Colour styles */

body, #content, #s4, #left_image, #global_nav, #nav, #header, .jScrollPaneDrag, .scroll-pane, .holder, #pane, .newsbox, #left_image, #s4, .bottom_sucker, #project-images, #nav ul, #nav ul ul, #pause, div.pics { background-color: #fffafa;}



/* Studio Kap Typography styles */


/* General type
--------------------------*/
html, body {font-family: "Trebuchet MS", Helvetica, Arial;}

#content p {color: #50404D;text-align: justify; line-height:20px;}

/* Headers
------------------------*/

h1 {text-indent: -8000px;	background: transparent url(http://www.studiokap.com/media/images/studioKAPlogo.png) no-repeat bottom left;	width: 200px;	height: 50px; padding-bottom:4px;	}
h1 strong {	display: block;	width:200px;margin-top:20px;position:absolute;	height:30px;}
h1 strong a {display:block;	height:30px;position:absolute;text-align:left; left:0; top:0;width:140px;}
#project-header h2, #project-header h4 {text-align: right;	margin-bottom: 2px; color: #50404D;font-weight: normal;margin-top: 0.4em;}
#project-header h2 {font-weight: bold;}
.newsbox h2 {margin-bottom: 2px; color: #50404D;font-weight: bold;margin-top: 0.4em;}

body.longpage #project-header {display:none;}


/* Nav Links
--------------------*/
#nav #global_nav a {display:block;color:#50404D;line-height:20px;text-decoration:none;padding:0 20px 0 0;outline: none;font-size:0.7em}
#nav #global_nav a:hover {color: #c0c0c0}
#nav #global_nav a:active {	color:#ddd;}
#nav #global_nav a.nav_select, #nav .sc_menu_wrapper ul a.nav_select {color: #8B0000;}
#nav #global_nav a.nav_select:hover,  #nav .sc_menu_wrapper ul a.nav_select:hover {color: #8B0000; font-weight:normal;}


/* Dynamic content
------------------------------*/
#nav .sc_menu_wrapper {color:#50404D;line-height:20px;font-size:0.7em}
#nav .sc_menu_wrapper p.lower_links {margin-bottom: 20px}
#nav .sc_menu_wrapper p.lower_links a:link, #nav .sc_menu_wrapper p.lower_links a:visited {color:#50404D; border-bottom: 1px dotted #50404D; }
#nav .sc_menu_wrapper p.lower_links a:hover, #nav .sc_menu_wrapper p.lower_links a:hover {border-bottom: 1px dotted #c0c0c0; color: #c0c0c0 }
#nav .sc_menu_wrapper .loading {color: #933;}
#nav .sc_menu_wrapper ul li {display:block;line-height:20px;text-decoration:none;padding:0;outline: none}
#nav .sc_menu_wrapper ul a:link, #nav .sc_menu_wrapper ul a:visited {color: #50404D}
#nav .sc_menu_wrapper ul a:hover {color: #c0c0c0}
#nav .sc_menu_wrapper ul a:active {	color:#ddd;}
#nav .sc_menu_wrapper ul a.nav_select{color: #8B0000; cursor: default;} 


/* Page Links
---------------------*/
.holder a:link, .holder a:visited {color: #50404D; border-bottom:1px dotted #50404D }
.holder a:hover {color: #c0c0c0; border-bottom:1px dotted #fffafa }


/* Inline Styles
-----------------------*/

span.news_date {color: #8B0000 ;}
#content {font-size:0.7em}
#content p.text-right, #content li.text-right { text-align:right; margin:4px 0;}
#content .holder div.link { margin-bottom: 20px}
span.kap {font-weight: bold; }

/* Contact page indent for address
-------------------------------------*/
ul.address { margin-bottom:20px}
ul.address li {padding-left: 15px; line-height:20px; text-align:right; }
ul.address li:first-child { padding-left: 0px}
p.address a { text-align:right}
/* Vacancies styles
-------------------------*/

h3.job_title {color: #8B0000;} 

/* SLD tag
----------------------*/

#sld_tag { font-size:0.6em;}
#sld_tag p {color: #50404D; }
#sld_tag a:link, #sld_tag a:visited {color: #50404D; border-bottom: 1px dotted #fff; }
#sld_tag a:hover {border-bottom: 1px dotted #50404D; }
#sld_tag a:active {border-bottom: 1px dashed #50404D; }

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #fffafa url(http://www.studiokap.com/media/images/bg_drag_pane.gif) repeat-y center top;
}
.jScrollPaneDrag {
	position: absolute;
	background: #8b0000;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}

span.codedirection {
    direction: rtl;
    unicode-bidi: bidi-override;
}