/*
Theme Name: Francois
Theme URI: http://www.francois.no/
Description: Exclusive WordPress theme for Francois.no website
Version: 1.0
Author: Joakim Christian Staalstr�m
Author URI: http://www.plastikk.no/
Tags: francois.no

	Plastikk Media as - 2010


*/


@charset "utf-8";


/************************************
*	RESET (from the Yahoo UI Library) *
************************************/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
a{outline: none;}

/*******************
*	REUSABLE CLASSES *
*******************/

.hide{display: none !important;}

/************
* INTERFACE *
************/

html, body {
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
	font: 11px Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.6em;
	background-color: #000000;
	background-image: url(img/bg_tile.png);
	background-repeat: repeat-x;
	background-position: center top;
	color: #ffffff;
	}
	
a {
	color: #D9007C;
	text-decoration: none;
	}
	
a:hover {
	text-decoration: underline;
	}

p {
	margin-bottom: 10px;
}

strong {
	font-weight: bold;
	}
	
/* Begin Images */
p img {
	padding: 0;
	max-width: 100%;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}


/****************
* FLASH CONTENT *
****************/

#wrapper {
	width: 100%;
	height: 100%;
	text-align: center;

	/* W3C vertical alignment */
	position: fixed; 
	display: table;
	}
	

	
#centered_cell {
	height: 100%;
	width: 100%;
	
	/* W3C vertical alignment */
	vertical-align: middle;
	display: table-cell;
	}
	
#flashcontent {
	width: 100%;
	height: 100%;
	/* 
	background-color:#FF00FF;
	width: 627px;
	height: 627px;
	*/
	}
	
/***************
* HTML CONTENT *
***************/

#container {
	width: 1010px;
	min-height: 750px;
	margin: 0 auto;
	background-image: url(img/bg.png);
	background-repeat: no-repeat;
	}
	
#logo {
	display: block;
	position: absolute;
	margin: 35px 0 0 100px;
	height: 82px;
	width: 426px;
	}
	
	#logo span {
		display: none;
		}

#menu, #menu ul {
	position: relative;
	float: left;
	display: block;
	margin: 118px 0 0 392px;
	width: 584px;
	height: 44px;
	background-image:url(img/menu.png);
	}
	
#menu li {
	display: block;
	position: relative;
	float: left;
	}
	
#menu span {
	display: none;
	}
	
#menu .home {
	display: block;
	width: 161px;
	height: 44px;
	background: url(img/menu.png) 0px 0px;
	}
	
#menu .home:hover {
	background-position: 0px -44px;
	}

#menu .booking {
	display: block;
	width: 117px;
	height: 44px;
	background: url(img/menu.png) -161px 0px;
	}
	
#menu .booking:hover {
	background-position: -161px -44px;
	}

#menu .archive {
	display: block;
	width: 110px;
	height: 44px;
	background: url(img/menu.png) -278px 0px;;
	}
	
#menu .archive:hover {
	background-position: -278px -44px;
	}

#menu .about {
	display: block;
	width: 196px;
	height: 44px;
	background: url(img/menu.png) -388px 0px;
	}
	
#menu .about:hover {
	background-position: -388px -44px;
	}
	
#content {
	position: relative;
	float: left;
	width: 644px;
	margin: 30px 0 0 87px;
}
	
#content #videoplayer {
	margin: 0px 0px 30px 0px;
	position: relative;
	float: left;
	width: 644px;
	height: 415px;
	outline: none;
	-moz-outline: none;
}

#content .storycontent {
	position: relative;
	float: left;
	margin: 0 0 20px 0;
	width: 100%;
}
		
#content h2 {
	color:#FFFFFF;
	font-size:24px;
	font-weight:normal;
	line-height:1em;
	margin-bottom: 15px;
	}

#content h2 a {
	color:#ff0092;
	text-decoration: none;
	}
	
#content h2 a:hover {
	text-decoration: underline;
	}

	#content small {
		position: relative;
		clear: both;
		display: block;
		margin: 0 0 10px;
		}

#content h3 {
	color:#ff0092;
	font-size:16px;
	font-weight:normal;
	line-height:1.38em;
	margin: 0 0 12px;
	/* margin-bottom:1.38em; */
	}
	
#content h3 a {
	color:#ffb3de;
	text-decoration: none;
	}
	
#content h3 a:hover {
	text-decoration: underline;
	}
	
#content p {
	color: #BBBBBB;
	font-size:14px;
	line-height:1.7em;
	margin-bottom:1.5em;
	}
	
#content em {
	font-style: italic;
	}

/**********
* SIDEBAR *
**********/

#sidebar {
	position: relative;
	float: left;
	width: 200px;
	margin: 20px 0 0 40px;
	}
	
	#sidebar h2 {
		font-weight: bold;
		}
		
	#sidebar li {
		margin: 0 0 10px;
		}

/****************
 * Booking Form *
 ****************/

#booking_form {
  font-size: 14px;
  width: 800px;
  margin-bottom: 40px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}   

#booking_form input {
  position: relative;
	float: left;
	margin: 2px 0 0 0;
  font-size: 22px;
	
}

#booking_form label.error {
	position: relative;
	margin: 3px 0 0 0;
	float: left;
	clear: both;
	color: #D9007C;
	font-size: 11px;

}

#booking_form input[type=text] {
  border: 1px solid #ccc;
  background-color: #ccc;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
}

#datepicker { float: right; font-size: 12px; margin-right: 30px;}

#booking_date-place {
  float: right;
  width: 200px;
}

#booking_contact {
  float: left;
  width: 530px;
} 

#booking_contact div, #booking_date-place div {
  float: left; 
  padding: 10px;
}

#booking_input {
  float: left;
  margin-top: 20px;
}

#booking_date-place input#booking_date { background-color: #ddd; color: #777; }

#booking_contact-title, #booking_date-place-title { font-size: 18px; margin-left: 5px;
  margin-top: 30px; margin-bottom: 5px;
}

table.person-select { margin-top: 25px; width: 530px; text-align: left; color: #ddd; float: left;}

table.person-select td { padding: 5px; } 

input[type=radio] { margin-right: 5px; } 

#booking_comment { width: 510px; height: 200px; background-color: #ddd;
  margin: 4px 0 0 0;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  }

#booking_contact table td, #booking-date-place table td {
  padding: 5px;
}

#booking_form .submit {
	display: block;
	width: 184px;
	height: 64px;
	left: -20px;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	border: 0;
	background: url("img/submit.png") 0px 0px;
	cursor: pointer;
}

#booking_form .submit:hover {
	background-position: 0px -64px;
}