/*
Title:      	HOL Hogsmeade Herald
Author:     	Rames El Desouki, The Traveller Publishing
*/

/* Basic Structure
================================================== */

body {
        margin:0;
        padding:0;
        border:0;
        width:100%;
        background:#fff;
        min-width:600px;    /* Minimum width of layout - remove line if not required */
	font-size:90%;
	font-family: "Palatino Linotype", "Times New Roman", georgia, times, serif;
}

a {
    	color:#369;
}

a:hover {
	color:#fff;
	background:#369;
	text-decoration:none;
}

h1, h2, h3 {
        margin:.8em 0 .2em 0;
        padding:0;
}

h4 {
        margin:.8em 0 -1.4em 0;
	color: #C0C0C0;
        padding:0;
}

h4.reset {
        margin:.8em 0 -0.5em 0;
}

p {
        margin:.4em 0 .8em 0;
        padding:0;
	text-align: justify;
}

img {
	margin:10px 0 5px;
}

ul{
	margin-left: 0;
	padding-left: 15px;
	list-style-type: square;
}

li {
	margin-bottom: 0.2em;
}

/* Formatting
================================================== */

.negative	{ color: #ff0000; }
.positive	{ color: #008000; }
h2.title	{ border-bottom: 1px dotted #000; margin-bottom: 1em; }

.article_bottom {
	border-top: 1px solid #555555;
	color: #555555;
	padding-left: 15px;
	margin-bottom: 1em;
}

/* Headers
================================================== */

#header {
        clear:both;
        float:left;
        width:100%;
}

#header {
	border-bottom:1px solid #000;
}

#header p,
#header h1,
#header h2 {
	padding:.4em 15px 0 15px;
        margin:0;
}

#header ul {
	clear:left;
	float:left;
	width:100%;
	list-style:none;
	margin:10px 0 0 0;
	padding:0;
}

#header ul li {
	display:inline;
	list-style:none;
	margin:0;
	padding:0;
}

#header ul li a {
	display:block;
	float:left;
	margin:0 0 0 1px;
	padding:3px 10px;
	text-align:center;
	background:#eee;
	color:#000;
	text-decoration:none;
	position:relative;
	left:15px;
	line-height:1.3em;
}

#header ul li a:hover {
	background:#369;
	color:#fff;
}

#header ul li a.active,
#header ul li a.active:hover {
	color:#fff;
	background:#000;
	font-weight:bold;
}

#header ul li a span {
	display:block;
}

/* Width Sub Menu
================================================== */

#layoutdims {
	clear:both;
	background:#eee;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
}

/* Column Container
================================================== */

.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
        width:100%;		/* width of whole page */
	overflow:hidden;	/* This chops off any overhanging divs */
}

/* General Column Settings
================================================== */

.colright,
.colmid,
.colleft {
	float:left;
	width:100%;		/* width of page */
	position:relative;
}

.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
}

.col1 {
	padding-right: 0.5em;
}

.col1 img {  /* small: 200px large: 449px */
	display: block;
	vertical-align: top; 
	padding: 2px;
	margin-right: 10px;
	border: 3px solid #ebebbc;
	background: #fff;
}

.col2 img, .col3 img {  /* small: 200px large: 449px */
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding: 2px;
	border: 3px solid #ebebbc;
	background: #fff;
}

.blogstyle {
	background:#eee;	/* right column background colour */
}

.blogstyle .colmid {
	right:25%;		/* width of the right column */
	background:#f4f4f4;	/* center column background colour */
}

.blogstyle .colleft {
	right:25%;		/* width of the middle column */
	background:#fff;	/* left column background colour */
}

.blogstyle .col1 {
	width:46%;		/* width of center column content (column width minus padding on either side) */
	left:52%;		/* 100% plus left padding of center column */
}

.blogstyle .col2 {
	width:21%;		/* Width of left column content (column width minus padding on either side) */
	left:56%;		/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}

.blogstyle .col3 {
	width:21%;		/* Width of right column content (column width minus padding on either side) */
	left:60%;		/* (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

.threecolumn {
	background:#eee;	/* right column background colour */
}

.threecolumn .colmid {
	right:33%;		/* width of the right column */
	background:#f4f4f4;	/* center column background colour */
}

.threecolumn .colleft {
	right:33%;		/* width of the middle column */
	background:#fff;	/* left column background colour */
}

.threecolumn .col1 {
	width:30%;		/* width of center column content (column width minus padding on either side) */
	left:68%;		/* 100% plus left padding of center column */
}

.threecolumn .col2 {
	width:29%;		/* Width of left column content (column width minus padding on either side) */
	left:72%;		/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}

.threecolumn .col3 {
	width:29%;		/* Width of right column content (column width minus padding on either side) */
	left:76%;		/* (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

.rightmenu {
	background:#eee;	/* right column background colour */
}

.rightmenu .colleft {
	right:25%;		/* right column width */
	background:#fff;	/* left column background colour */
}

.rightmenu .col1 {
	width:71%;		/* left column content width (left column width minus left and right padding) */
	left:27%;		/* (right column width) plus (left column left padding) */
}

.rightmenu .col2 {
	width:21%;		/* right column content width (right column width minus left and right padding) */
	left:31%;		/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

.doublepage {
	background:#eee;	/* right column background colour */
}

.doublepage .colleft {
	right:50%;		/* right column width */
	background:#fff;	/* left column background colour */
}

.doublepage .col1 {
	width:46%;		/* left column content width (column width minus left and right padding) */
	left:52%;		/* right column width plus left column left padding */
}

.doublepage .col2 {
	width:46%;		/* right column content width (column width minus left and right padding) */
	left:56%;		/* (right column width) plus (left column left and right padding) plus (right column left padding) */
}

.fullpage {
	background:#fff;	/* page background colour */
}

.fullpage .col1 {
	width:96%;		/* page width minus left and right padding */
	left:2%;		/* page left padding */
}


/* Footer
================================================== */
	
#footer {
        clear:both;
        float:left;
        width:100%;
	border-top:1px solid #000;
}

#footer p {
        padding:10px;
        margin:0;
}

#footer > ul { 
	list-style: none;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 35px;
	color: #775;
}

#footer > ul li + li { 
	display: inline;
	text-transform: uppercase;
}

#footer > ul li + li + li + li + li + li { 
	text-transform: none;
	color: #775;
}

#footer > ul li + li:after { content: " |"; color: #550; }

#footer > ul li + li + li + li + li:after { content: "" }

#footer > ul a { 
	color: #0000FF;
	text-decoration: underline;
	font-weight: normal;
	border: none;
}

#footer > ul a:hover { text-decoration: none; }

/* Forms
================================================== */

form {
	font: 100% verdana,arial,sans-serif;
	margin: 0;
	padding: 0;
	width: 100%; 
}

form fieldset {
	border-color: #000;
	border-width: 1px;
	border-style: solid;
	padding: 10px;
	margin: 0;
}

form fieldset legend {
	font-size: 1.1em; 
}

form label { 
	display: block;  /* block float the labels to left column, set a width */
	float: left; 
	width: 150px; 
	padding: 0; 
	margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right; 
}

form input, form textarea, form select {
	width: auto; 
	margin: 5px 0 0 10px; 
}

textarea { overflow: auto; }

form br {
	clear: left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
}

/* Live Form Validation
================================================== */

.LV_validation_message{
	font-weight: normal;
	margin:0 0 0 5px;
}

.LV_valid {
	color:#00CC00;
}
	
.LV_invalid {
	color:#CC0000;
}
    
.LV_valid_field,
input.LV_valid_field:hover, 
input.LV_valid_field:active,
textarea.LV_valid_field:hover, 
textarea.LV_valid_field:active {
	border: 1px solid #00CC00;
}
    
.LV_invalid_field, 
input.LV_invalid_field:hover, 
input.LV_invalid_field:active,
textarea.LV_invalid_field:hover, 
textarea.LV_invalid_field:active {
	border: 1px solid #CC0000;
}