/**
 * CSS for screen media
 * (c) Republic Factory AB
 * www.republic.se
 */


/* @group - Basic Layout */
/* ----------------------------------------------------------------------- */
body { text-align: center; background-color: #333;}

#wrapper { margin: 0px auto; width: 980px; padding: 0; text-align: left; background-color: #fff; overflow: hidden; min-height: 600px; border-left: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999;}

#header { width: 980px; height: 200px; position: relative; font-size: 30px; text-align: left;  color: #fff; text-shadow:3px 3px 5px #121010; background: transparent url(/images/header-image4.jpg) 0 0 no-repeat; border-bottom: 1px solid #d5d5d5;}
#header a.logo		 { position: absolute; left: 40px; top: 30px;}


#header a.logout  { position: absolute; top: 10px; right: 10px; color: #fff; font-size: 12px; }

#nav {position: relative; height: 36px; width: 980px; background: transparent url(/images/box_header_bg.png) 0 bottom repeat-x; }
#nav ul { margin: 0; padding: 0; float: right; }
#nav li { float: left; list-style-type: none; }
#nav li a { display: block; padding: 7px 25px; border-bottom: 2px solid transparent; color: #333; text-shadow: 0 -1px 0 rgba(255,255,255,0.6); text-decoration: none; font-family: "Trebuchet MS";}
#nav li.active a { border-bottom: 2px solid #134d04; background: #daf0d4 url(/images/box_header_bg.png) 0 bottom repeat-x; }
#nav li:hover a {  border-bottom: 2px solid #134d04;color: #134d04; text-decoration: none; }

#nav .logo { float: left; font-size: 18px; font-family: verdana; font-weight: bold; margin-left: 45px; margin-top: 7px; }
#nav .logo a { text-decoration: none; color: #393939;}

#section { width: 605px; float: left; padding: 0 70px 30px 50px; background: transparent url(/images/content-bg.gif) 0 0 repeat-x;}
#section.login { padding-left: 250px; padding-top: 100px;}
#section.login .checkbox { display: inline;}
#section.login label { display: inline;}

#aside 			{ width: 255px; float: right; background: transparent url(/images/content-bg.gif) 0 0 repeat-x;}
#aside, #section { padding-top: 50px;}
#aside h4 { height: 29px; background: transparent url(/images/box_header_bg.png) 0 bottom repeat-x; padding: 7px 0 0 20px; text-shadow: 0 1px 0 rgba(255,255,255,0.5); border-bottom: 1px solid #d5d5d5;}
h3.rubrik { height: 29px; background: transparent url(/images/box_header_bg.png) 0 bottom repeat-x; padding: 7px 0 0 20px; text-shadow: 0 1px 0 rgba(255,255,255,0.5); border-bottom: 1px solid #d5d5d5;}

#footer { clear: both;  }
#footer p { font-size: 11px; text-align: center; }
/* @end */



/* @group - Typography */
/* ----------------------------------------------------------------------- */
body { font-size: 62.5%; font-family: "Helvetica neue",Verdana,Arial; line-height: 1.8em; color: #393939;}
h1, h2, h3, h4, h5, h6, p { font-weight: normal; line-height: 1; color: #444; }
h1, h2, h3, h4, h5, h6    {margin-bottom: 15px; font-family: "Trebuchet MS"; text-shadow: 0 -1px 0 rgba(0,0,0,0.2);}

h1 { font-size: 24px; }  /* displayed at 24px */
h2 { font-size: 22px; }  /* displayed at 14px */
h3 { font-size: 20px; }  /* displayed at 15px */
h4 { font-size: 18px }  /* displayed at 12px */
h5 { font-size: 16px }
h6 { font-size: 14px }
p, ol, ul, ol li { font-size: 1.3em; line-height: 1.5;}
p { margin: 0 0 1em 0; }
ul { margin: 0 0 2em 15px; padding: 0; line-height: 1;}
li { margin: 0; padding: 0; line-height: 1.5; list-style-type: disc; }

a,
a:link 	{ text-decoration: none; color: #134d04; text-decoration: underline; }
a:hover { text-decoration: none;}

#bloggen .blog,
#start .blog.first { margin: 30px 0 25px 0; padding-bottom: 25px; float: none; border-bottom: 1px solid #e2e2e2;}
#start .blog				{ margin-bottom: 25px; padding-bottom: 25px; float: none; border-bottom: 1px solid #e2e2e2;}
.date { font-size: 12px; color: #999;}
#bloggen .blog h4,
#start .blog h4    { margin-bottom: 3px;}
#bloggen .blog_date {  font-size: 12px; color: #999;}
#bloggen .blog .date,
#start .blog .date { margin-bottom: 10px; float:left; }
#bloggen .blog .nr_of_comments,
#start .nr_of_comments { float: left; font-size: 11px; margin-left: 10px;}
a.read_more { font-size: 12px; float: right; margin-top: -10px;}

img.presentation { padding: 10px; border: 1px solid #999; -moz-box-shadow: 1px 1px 10px #888; box-shadow: 1px 1px 5px #888; -webkit-box-shadow: 1px 1px 10px #888; margin-bottom: 10px;}
img.right { float: right; margin-left: 15px; margin-bottom: 10px;}
img.center { display: block; text-align: center;}
img.left  { float: left; margin-right: 15px; margin-bottom: 10px;}

table { font-size: 12px; margin-bottom: 20px;}
table th { font-weight: bold;}
table td,
table th { padding: 2px 10px;}

table tbody td.even { background-color: #e2e2e2;}

.competitions,
.sponsors 		{ margin-bottom: 50px; font-size: 12px;}
.competitions .date { }
.competitions .name { font-weight: bold;}
.competitions .country { font-size: 11px;}
.competitions .item { margin-bottom: 7px;}
.sponsors { text-align: center; }
.sponsors img { margin: 0;}
.sponsors .sponsor { margin-bottom: 25px; margin-top: 20px;}

.comments { margin-top: 50px; margin-bottom: 50px;}
.comment_form { }
.comment_form label { display: block; font-weight: bold; font-size: 12px; }
.comment_form input.text { font-size: 14px; width: 300px;}
.comment_form textarea { font-size: 14px; font-family: "Helvetica neue",Verdana,Arial;}
.comment_form .input_field { margin-bottom: 10px;}
.comment_form .input_field_extra { display: none;}
.comment_error 	 { margin-bottom: 20px; padding: 10px; border: 1px solid #bf0000; background-color: #f4eaea;}
.comment_error p { margin: 0; color: #bf0000; font-size: 11px; }
.comment { width: 500px; border: 1px solid #e2e2e2; margin: 10px 0 10px 0; padding: 20px;}
.comment .author { font-size: 11px; color: #999;}

.hide { display: none;}
#loading							{ width: 100%; height: 100px; background: transparent url(/images/ajax-loader.gif) center center no-repeat; border: 5px solid #fff;}
#main_picture_wrapper { text-align: center; margin: 0 auto; border: 5px solid #ecedf1;}
#main_picture_wrapper .description { background-color: #000; opacity:0.7; filter:alpha(opacity=70); height: 20px; padding: 5px 10px 5px 10px; text-align: left; color: #fff; margin: -35px auto 0px auto; font-size: 12px;}
#main_picture_wrapper img { }
.photograph { clear: both; text-align: center; font-size: 11px; }

/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 


#scrollable_wrapper { margin: 0 50px;}
div.scrollable { 
 
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 440px; 
    height:110px; 
} 

 
/* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/ 
div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 
 
/* 
    a single item. must be floated in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
#start div.scrollable div.items div.item { 
    float:left; 
		margin-right: 10px;
		cursor:pointer;
		border: 1px solid #fff;
		width: 700px;
		text-align: center;
} 

div.scrollable div.items img { 
    float:left; 
		margin-right: 10px;
		cursor:pointer;
		border: 1px solid #fff;
		text-align: center;
}


 
/* active item */

div.scrollable div.items img.wheeled_img.hover { border: 1px solid #666; }
div.scrollable div.items img.active.hover,
div.scrollable div.items img.active {
	border:1px solid #000;
	z-index:9999;
	position:relative;
}

/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:52px;
	height:59px;
	float:left;
	margin:20px 0px;
	cursor:pointer;
	font-size:1px;
}


/* right */
a.right 				{ clear:right; margin-right: 0px; background:url(/images/scrollable/arrow/scroll-left-right.jpg) no-repeat; background-position: -52px 0px;}
a.right:hover 		{ background-position: -52px -59px; }
a.right:active 	{ background-position:-52px -118px; } 


/* left */
a.left				{ background-position: 0 0; margin-left: 0px; background:url(/images/scrollable/arrow/scroll-left-right.jpg) no-repeat; margin-left: 30px;} 
a.left:hover  		{ background-position: 0 -59px; }
a.left:active  	{ background-position: 0 -118px; }

/* up and down */
a.up, a.down		{ 
	background:url(/images/scrollable/arrow/left.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }

/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}