﻿/* Define the variables that will be used throughout the stylesheet */
/* Enables faster skinning and easier editing                       */

/* ---------------- */
/* Edited HTML-tags */
/* ---------------- */

/*                    The body                   */
/* Set default background image and default font */
body {
	background-image:  url('Images/DefaultTheme/BlackMosaic.jpg');
	background-color:  #1D343E;
	
	font:              12px "Arial";
	color:             #FFFFFF;
	}


/*        Links        */
/*   Set link colors   */
/* (Normal and hoover) */
a {
	color:  #EEEEEE;
	}

a:hover {
	color:  #888888;
	}

/* Colour the textboxes */
input[type="text"], input[type="password"] {
	border:            1px solid #538598;
	
	background-color:  #78bcde;
	}

/* Change colour when hovering */
input[type="text"]:hover , input[type="password"]:hover{
	border:            1px solid #69a9c1;
	
	background-color:  #85ccf0;
	}
	
/* Make all the buttons follow this style */
input[type="button"], input[type="submit"] {
	width:            100px;
	height:           30px;
	
	margin:           4px;
	background-image:  url('Images/DefaultTheme/ButtonBG.png');
	border:           none;
	color:            white;
	}

/* Make the comment button follow this style */
input[type="button"][name="Comment"] {
	width:            80px;
	height:           30px;
	
	background-image:  url('Images/DefaultTheme/CommentButtonBG.png');
	border:           none/* 1px solid #001822*/;
	}

/* Change colour when hovering */
input[type="button"]:hover, input[type="submit"]:hover {
	background-image:  url('Images/DefaultTheme/ButtonBGHover.png');
	}

/* Change colour when pressing */
input[type="button"]:active, input[type="submit"]:active {
	background-image:  url('Images/DefaultTheme/ButtonBGDown.png');
	}

/* Change colour when hovering */
input[type="button"][name="Comment"]:hover {
	background-image:  url('Images/DefaultTheme/CommentButtonBGHover.png');
	}

/* Change colour when pressing */
input[type="button"][name="Comment"]:active {
	background-image:  url('Images/DefaultTheme/CommentButtonBGDown.png');
	}

/* Change colour of textareas */
textarea {
	border:            1px solid #538598;
	
	background-color:  #78bcde;
	}

/* When hovering */
textarea:hover {
	border:            1px solid #69a9c1;
	
	background-color:  #85ccf0;
	}

abbr {
	border-bottom: 1px dotted  #FFFFFF;
	}

abbr:hover {
	cursor: help;
	}

/* ------------- */
/* Container IDs */
/* ------------- */

/*           The main container          */
/* The one that contains everything else */
#Container {
	width:         1000px;
	
	margin:        auto;
	margin-top:    20px;
	margin-bottom: 20px;
	
	border:         1px solid #001822;
	
		/*skugga*/
	-moz-box-shadow: 0 0 25px #000;
	-webkit-box-shadow: 0 0 25px#000;
	box-shadow: 0 0 25px #000;
	}

/*     The banner     */
#Banner {
	width:            1000px;
	height:           125px;
	
	margin:           auto;
	
	background-image:  url('Images/DefaultTheme/Banner.png');
	}

#Banner #Clickable {
	width:   1000px;
	height:  100px;
	
	display: block;
	}

/*                 The content box                 */
/* The layer that contains the content of the page */
#Content {
	width:            1000px;
	
	background-color:  #1D343E;
	
	padding-bottom:   20px;
	}

/*      The flash container      */
/* Is used to hold a flash movie */
#FlashContainer {
	width:      1000px;

	text-align: center;
	
	margin:     auto;
	margin-bottom: 6px;
	}

/*              Footer           */
/* Is at the bottom of the page. */
/* Shows some things.            */
#Footer {
	text-align:    center;
	
	margin:        auto;
	margin-bottom: 20px;
	}


/* -------------------------- */
/*           Classes          */
/* -------------------------- */

/*               The navigation menu               */
/* A second menu that contains navigation buttons  */
.NavigationMenu {
	width:            984px;
	height:           20px;
	
	overflow:         hidden;
	
	padding-left:     8px;
	padding-right:    8px;
	
	line-height:      20px;
	vertical-align:   middle;
	
	margin-bottom:    20px;
	
	border-top:        1px solid #001822;
	border-bottom:     1px solid #001822;
	
	background-image:  url('Images/DefaultTheme/NavBG.png');
	}

/* A separator line for the navigation menu */
.NavigationMenu .Separator {
	width:        1px;
	height:       25px;
	
	margin-left:  8px;
	margin-right: 8px;
	
	border-left:   1px solid #bbe0f5;
	border-right:  1px solid #152126;
	}

/* Used for the little info text, telling the user the amount of posts on the current page (news, films, etc.) */
.NavigationMenu .AmountInfo {
	float: right;
	color:  #BBBBBB;
	}

.NavigationMenu .img{
	text-decoration: none;
}
/* -------------------------- */ /* ------------------ */
/*          Object box        */ /*    The home box    */
/* -------------------------- */ /* ------------------ */
/* A regular item box that    */ /* A box shown at the */
/* can contain anything that  */ /* start page. It     */
/* is listed (films, news...) */ /* contains some      */
/* It consists of four parts: */ /* info.              */
/* 1. The container           */ /* Looks like the     */
/* 2. The header              */ /* news post item.    */
/* 3. The body/content        */ /*                    */
/* 4. The bottom              */ /*                    */
/* -------------------------- */ /* ------------------ */

.ObjectBox, #HomeBox, #FilmDescription, #CaptchaBox, #CPanel {	
	width:800px;
	
	margin: auto;
	margin-bottom: 20px;
	
	overflow:      hidden;
	
		/*skugga*/
	-moz-box-shadow: 0 0 13px #111;
	-webkit-box-shadow: 0 0 13px #111;
	box-shadow: 0 0 13px #111;
	
			/*runda hörn*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	}

#CPanel {
	float:         left;
	
	width:         808px;
	
	margin:        13px;
	margin-bottom: 20px;
	
	overflow:      hidden;
	}

/* Center the FilmDescription box */
#FilmDescription {
	margin: auto;
	}

.ObjectBox #Header, #HomeBox #Header, #FilmDescription #Header, #CaptchaBox #Header, #CPanel  #Header {
	height:           22px;
	
	padding-left:     4px;
	padding-right:    4px;
	padding-top:      3px;
	
	line-height:      25px;
	vertical-align:   middle;
	
	font:              15px "Arial";
	font-weight:      bold;
	
	border-radius: 10px 10px 0 0;
	
	background-image:  url('Images/DefaultTheme/ObjHeader.png');
	}

.ObjectBox #Header #CommentHeader {
	margin-top:  1px;
	
	font:         14px "Arial";
	font-weight: bold
	}

.ObjectBox #Header #DatePosted {
	float:      right;
	
	margin-top: 1px;
	
	font:        14px "Arial";
	
	color:       #BBBBBB;
	}

#FilmDescription #Header #Right {
	float:        right;
	
	margin-top:   1px;
	margin-right: 4px;
	
	font:          14px "Arial";
	}

.ObjectBox #Body, #HomeBox #Body, #FilmDescription #Body, #CaptchaBox #Body, #CPanel #Body {	
	padding:          4px;
	background-color:  #3D646E;
	}

/* Use this when the item should contain a thumbnail */
.ObjectBox #Body #Thumbnail {
	float:          left;
	
	width:          100px;
	height:         100px;
	
	padding-right:  4px;
	padding-bottom: 4px;
	margin-right:   4px;
	margin-bottom:  4px;
	}

.ObjectBox #Body #ThumbnailCharacter {
	float:          left;
	
	width:          100px;
	height:         150px;
	
	padding-right:  4px;
	padding-bottom: 4px;
	margin-right:   4px;
	margin-bottom:  4px;
	}

/* Use this in comments, when showing what the comment is answering to */
.ObjectBox #Body #ReplyTo {	
	margin-bottom:    4px;

	background-color:  #2a525c;
	background-color:  rgba(32,72,82,0.5);
	border:2px dotted #3a626c;
	color:             #BBBBBB;
	padding:4px;
	}

.ObjectBox #Body #ReplyTo #XxxWrote {
	color:        #FFFFFF;
	font-weight: bold;
	}

.ObjectBox #Body #ReplyTo #XxxWrote:hover {
	background-color:#4A7070;
	background-color:rgba(74,112,112,0.25);
	cursor:pointer;
	}

#FilmDescription #Body .Heading {
	display:       block;
	
	width:         820px;
	font-size:     16px;
	
	border-bottom:  1px solid #001822;
	}

#CaptchaBox #Body #Captcha {
	text-align: center;
	margin:     auto;
	}

/* The CPanel menu and content */
#CPanel #Body #CPanelMenu, #CPanel #Body #CPanelContent {
	float:            left;
	
	margin:           2px;
	padding:          4px;
	
	background-color:  #2a525c;
	}

#CPanel #Body #CPanelMenu {
	width: 140px;
	}

#CPanel #Body #CPanelMenu ul {
	list-style-type: none;
	
	margin-left:     0px;
	padding-left:    3px;
	}

#CPanel #Body #CPanelContent {
	width: 636px;
	}

#CPanel #Body #CPanelContent .FloatLeft {
	float:         left;
	
	width:         318px;
	
	margin-bottom: 4px;
	margin-top:    4px;
	}

#CPanel #Body #CPanelContent .FloatRight {
	float:         right;
	
	margin-bottom: 4px;
	margin-top:    4px;
	}

.ObjectBox #Bottom, #HomeBox #Bottom, #FilmDescription #Bottom, #CaptchaBox #Bottom, #CPanel #Bottom {
	height:              10px;
	
	padding:             4px;
	padding-top:         6px;
	padding-bottom:      6px;
	
	font:                 11px "Arial";
	
	border-radius: 0 0 10px 10px;
	
	background-color:     #3D646E;
	background-position: left bottom;
	}

#FilmDescription #Bottom{
  height:auto ;
}
#FilmDescription #Bottom a#download {
  float:right;
  font-size:35px;
  font-weight:bold;
  color:#94bdc7;
  margin-top:-60px;
  margin-right:10px;
  padding:10px;
  border:3px dashed white;
  border-style:dashed;
}

	
/* -------------------------- */
/*    The picture box item    */
/* -------------------------- */
/* A regular picture box item */
/* It consists of four parts: */
/* 1. The container           */
/* 2. The header              */
/* 3. The body/content        */
/* 4. The bottom              */
/* -------------------------- */

.PictureBox {
	float:            left;
	
	width:            116px;
	height:           140px;
	
	margin-left:      18px;
	margin-top:       10px;
	
	text-align:       center;
	
	background-image:  url('Images/DefaultTheme/PictureBG.png');
	}

.PictureBox #Header {
	display:    block;
	
	height:     14px;
	width:      114px;
	
	margin-top: 4px;
	
	overflow:   hidden;
	
	font-size:  12px;
	}

.PictureBox #Body {
	width:         102px;
	height:        90px;
	
	margin:        auto;
	margin-top:    4px;
	margin-bottom: 2px;

	border: medium none;
    display: block;
    text-decoration: none;
	}

.PictureBox #Bottom {
	width:     114px;
	
	font-size: 8px;
	}



/* The big header class */
.Header {
	width:         824px;
	
	margin-left:   4px;
	
	font-size:     15px;
	color:          #BBBBBB;
	
	border-bottom:  1px solid #001822;
	}

/* The comment browser box */
.CommentBrowserBox {


	width:            984px;
	height:           20px;
	
	overflow:         hidden;
	
	padding-left:     8px;
	padding-right:    8px;
	
	line-height:      20px;
	vertical-align:   middle;
	
	margin-bottom:    20px;
	
	background-image:  url('Images/DefaultTheme/NavBG.png');
	border-right:		0;
	border-left:		0;
	border-top:			1px solid #001822;
	border-bottom:		1px solid #001822;
	}
	



/*     Clear     */
/* Clears floats */
.Clear {
	clear: both;
	}

/*    Center    */
/* Centers text */
.Center {
	text-align: center;
	}
.Center img {
    max-width:100% !important;
}
/* Centers the comment button */
.CenterCommentButton {
	margin-left: 430px;
	padding: 10px;
	}
	
	
#Rules {
	width:   500px;
	
	padding: 5px;
	margin:  auto;
	margin-bottom: 10px;
	
	border:   0;
	
		/*skugga*/
	-moz-box-shadow: 0 0 13px #111;
	-webkit-box-shadow: 0 0 13px #111;
	box-shadow: 0 0 13px #111;
	
			/*runda hörn*/
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	
	background-color:  #3D646E;
	}
	
#UploadTitle {
	font-size: 24px;
	font-weight: bold;
	}
	
table.border,table.border tr,table.border td{
	border:1px solid rgba(192,192,192,0.5)
}