/*
 * Gamling.nu CSS
 * Rev. 070731: Pierre Reldin <pierre.reldin@gmail.com>
 */

#frame {
	margin-left: 5%;
  	margin-top: 2%;
	margin-right: 5%;
	position: absolute;
	width: 90%;
	min-width: 821px;
	background: url(/images/background_content.gif) repeat-x #fff;
	background-position: 100% 0;
}

#outer-column-container {
	padding-left: 240px;		/* because padding is on the left-side,
								the left-column"s background image is
								going to be applied to this element. */
	margin-right: 0px;			/* the right-column"s space is reserved
								with margin space rather than padding,
								so we can apply a background image to
								the parent element, #frame, and
								it will peek through. */
	background: url(/images/background_content.gif) repeat-x #fff;
	background-position: 0 0;
	border: #009999 solid;
	border-width: 0px 10px;
	margin: 0px 0px;
}

#inner-column-container {
	width: 100%;
	border-right-width: 0px;	/* Skippa den högra columnen */
	background: url(/images/background_content.gif) repeat-x #fff;
	background-position: 100% 0;
}

#source-order-container {
	float: left;			/* float left so the right column, which is outside this element, has a place to go. */
	width: 100%;			/* force this to go as wide as possible */
	margin-right: -1px;		/* make room for the right-column's overlap */ 
	margin: 0px;			/* Skippa den högra columnen */
}

#left-column {
	float: left;			/* float left, where it'll live */
	margin-left: -240px;	/* move it further left. the value here should
				  		 	be the same value as the left border width
							on #outer-column-container, but negative */
	width: 240px;			/* need to set a definite width, should be the
				  		 	same width as the left border width on
							#outer-column-container */
	margin-right: 1px;		/* overlap the middle column to help with
				   			clearing. */
}
#middle-column {
	float: right;			/* middle column goes right of the left column
							since the two share the same parent 
							element */
	width: 100%;			/* make the middle column as wide as possible
							 for a fluid layout. this is not possible
							 if it's parent element, 
							 #source-order-container, wasn't also at
							 100% width */
	margin-left: -1px;		/* make room for the left-column's overlap */
}
#right-column {
	float: right;				/* float on the right side of the layout */
	margin-right: -100px;		/* move it further right. the value here should
				   				be the same value as the right border width
								on #outer-column-container, but negative */
	width: 100px;				/* need to set a definite width, should be the
				   				same width as the right border width on
								#outer-column-container */
	margin-left: 1px;			/* overlap the middle column */
	display: none;				/* Skippa den högra columnen */
}


#header {
	height: 220px;
	position: relative;
}

#headerLeft {
  	background: url(/images/header_left.png) no-repeat #fff;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 810px;
	height: 220px;
	margin: 0px;
}

#headerFiller {
  	background: url(/images/header_filler.png) repeat-x #fff;	
	margin-left: 810px;
	margin-right:10px;	
	height: 220px;
}

#headerRight {
  	background: url(/images/header_right.png) no-repeat #fff;
	margin: 0px;
	width: 10px;
	height: 220px;
	position: absolute;
	right: 0px;
	top: 0px;
}

#footer {
	position: relative;
	font-size: 85%;
}

#footer .footer {
	  	text-align: center;		/* Nödvändigt för att lura IE */
}

#footerLeft {
  	background: url(/images/left_bottom_corner.gif) no-repeat #fff;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 10px;
	height: 10px;
	margin: 0px;
}

#footerFiller {	
	margin-left: 0px;		/* Trick IE */
	margin-right:10px;
	border-top: 10px #009999 solid;
}

#footerRight {
  	background: url(/images/right_bottom_corner.gif) no-repeat #fff;
	margin: 0px;
	width: 10px;
	height: 10px;
	position: absolute;
	right: 0px;
	top: 0px;
}

.clear-columns {
	clear: both;
}

/* --- HACKS --- */
.clear-columns {
	/* hide from IE/Mac \*/
	padding-bottom: 1px;
	margin-bottom: -1px;		/* this padding/margin hack is here for
								older Mozilla engines (Netscape 7, 6,
								FireFox pre 2.0) which will not allow 
							   an element to clear unless it has some 
							   effect on how the rest of the layout 
							   renders (ie, it takes up space). 
							   Hidden from IE/Mac as it triggers a 
							   horizontal scrollbar. */
}

* html #middle-column, * html #left-column, * html #right-column,
* html #source-order-container {
	/* hide from IE/Mac \*/
	overflow: visible;	/* a bug through IE/Win 6 causes the widths of
				   text boxes to be calculated narrower than
				   they render, causing overflow of their parent
				   elements. we need to explicitly handle this
				   overflow. IE/Win 5.0 does not handle visible
				   overflow correctly and so on some layouts,
				   at some viewport widths you'll get a 
				   horizontal scroll bar. */
	/* hide from IE/Mac \*/
	position: relative;	/* this resolves rendering bugs in IE/Win.
				   without this the columns don't render on
				   screen or text jog. */
}

* html #inner-column-container {
	display: block;
}

#left-column, #right-column {
	position: relative;		/* resolve issues with links in left and right
				   			columns not being clickable in Safari */
}