/*
	ProjectorFeatures.css

	Date: 18th December 2009
	Author: N.Quinn
	
	Implements CSS box-modelling to provide a standard set of CSS IDs 
	and classes for working with projector features. All elements in-
	herit #pf as a root node in order to maintain a high level of CSS
	separation from the rest of the website's markup and to make full
	use of the cascading properties of CSS.

	The box model is structured the following way in HTML (MFC is op-
	tional) - all are 'div' elements:
	
		MC -> {MFC} -> FC -> FCOL

	Elements are fully self-describing, with the exception of the fo-
	llowing items (the inline-style that is required is in brackets
	next to each exception):

		- colLeft	[width]
		- colRight	[width]
*/

/* Master Container [MC]*/
#pf
{
	width: auto;
	padding: 0px 0px 10px 0px;
	margin-top: 20px;
	height: auto;
}

/* 
	Master Feature Container [MFC] (Optional) 

	doubleFeature is a DIV wrapper which allows for [FC]s to be
	sited on the page side-by-side using floats. This MFC uses
	overflow as the fix to pulling the page down when there are
	floating elements being used.

	borderedContainer can be used to wrap a feature container
	in a bordered area. You must specify a style element on the
	page which determines the border style being used (e.g.
	solid, dotted or dashed).

	simple2Col is used for creating new, simplified layouts where
	all features are only left or right (no spanning of columns)
*/
#pf .doubleFeature
{
	overflow: hidden;	
}

#pf .borderedContainer
{
	border-width: 1px;
	border-color: #666;
	padding: 5px;
}

#pf .simple2Col
{
	background-image: url(../../../images/pfCentralBorder.png);
	background-repeat: repeat-y;
	overflow: hidden;
}

#pf .simple2Col_NoSplitLine
{
	background-repeat: repeat-y;
	overflow: hidden;
}

/* 
	Feature Containers [FC]

	The surrounding structure for a feature - defines the feature
	'block' on the page. Comes in several variations to suit dif-
	ferent needs - the name describes the usage.

	feature2Col				-	a feature that will have two columns
	feature1Col				-	a feature that will have one column
	feature2ColLeft			-	a feature that will have two columns AND
								which will be inside an [MFC], so sitting
								beside a feature2ColRight element
    feature2ColLeftBordered -   same as feature2ColLeft, but with a border
								running down the right side acting as a se-
								parator between itself and the right col.
	feature2ColRight		-	same as feature2ColLeft but for the right
								side of the page.
	feature1ColLeft			-	same as feature2ColLeft but the feature
								itself only has one column, not two.
	feature1ColRight		-	same as feature2ColRight, but the feature
								itself only has one column, not two.
*/
#pf .feature2Col
{
	overflow: hidden;
	width: 100%;
	height: auto;
	display: block;
	padding: 5px 0px 5px 0px;
}

#pf .feature1Col
{
	overflow: hidden;
	width: 100%;
	height: auto;
	display: block;
	padding: 5px 0px 5px 0px;
}

#pf .feature2ColLeft
{
	overflow: hidden;
	width: 305px;
	/*width: 342px;*/
	height: auto;
	display: block;
	float: left;
	padding: 5px 0px 5px 0px;
}

#pf .feature2ColRight
{
	overflow: hidden;
	width: 380px;
	/*width: 343px;*/
	height: auto;
	display: block;
	float: right;
	padding: 5px 0px 5px 0px;
}

#pf .feature1ColLeft
{
	overflow: hidden;
	width: 305px;
	height: auto;
	display: block;
	padding: 5px 0px 5px 0px;
}

#pf .feature1ColRight
{
	overflow: hidden;
	width: 380px;
	height: auto;
	display: block;
	padding: 5px 0px 5px 0px;
	float: right;
}


/* 
	Feature Columns [FCOL]

	FCOLs are the containers for data on the page. There are three
	versions - colLeft and colRight are to be used when the FC is
	a '2col' variant, whilst colSingle should be used when the FC 
	is a '1col'. Both colLeft and colRight MUST have an inline
	style applied ("width") when put on the page.
*/
#pf .colLeft
{
	float: left;
	width: auto;
	height: auto;
}

#pf .colRight
{
	float: right;
	width: auto;
	height: auto;
}

#pf .colSingle
{
	float: none;
	width: auto;
	height: auto;
}

/* 
	Generic Styles

	These styles add additional markup to control
	how elements in the box model should appear.
*/
#pf .colLeft p, #pf .colRight p, #pf .colSingle p
{
	text-align: justify;
}

#pf p
{
	padding: 5px 0px 10px 0px;
}


#pf .borderedContainer h3
{
	padding: 0px 0px 8px 0px;
	margin: 0px;
}

#pf h3
{
	padding: 10px 0px 8px 0px;
	margin: 0px;
}

#pf p.noTopPadding
{
	padding-top: 0px;
	margin-top: 0px;
}

#pf img
{
	padding: 10px 0px 10px 0px;
	margin-left: auto;
	margin-right: auto;
}

#pf img.noPadding
{
	padding: 0px;
}

/*
	Content Styles
	
	These elements can be used to apply localised
	styling to the content applied to the page.
	
	All these rules begin with 'cont-' and can
	only be classes - no ID/singular structures
	are included.
*/
#pf .cont-floatcontainer
{
	overflow: hidden;
	display: block;
}

#pf .cont-floatRight
{
	float: right;
	display: block;
}

#pf .cont-floatLeft
{
	float: left;
	display: block;
}

#pf .cont-textTBpadded
{
	padding: 10px 0px 10px 0px;
}

#pf .cont-textAlignRight
{
	text-align: right;
	display: block;
	width: auto;
}

#pf .cont-paddedTopBottomArea
{
	padding: 5px 0px 5px 0px;
}

#pf .BlackModal
{
	background-color: #000;
	width: 900px;
	padding: 10px;
}

#pf .BlackModal_NoPadding
{
	background-color: #000;
	width: 920px;
}

#pf .WhiteModal
{
	background-color: #FFF;
	width: 900px;
	padding: 10px;
}

#pf .centered
{
	text-align: center;
}

/*******************************************************************************
/********************************* Simple Layout *******************************
/*******************************************************************************

	The following styles create a uniform two column layout without
	the need for the advanced CSS selectors used to construct a
	layout. These <must> be used with the simple2Col master container.

	These must be wrapped as so:

	MC -> COL -> SFC

*/

/*
	COL

	Defines a column - there are only two for simple layout, one for
	the left and one for the right, both are equal width.
*/
#pf #colRight
{
	width: 340px;
	overflow: hidden;
	display: block;
	float: right;	
}

#pf #colLeft
{
	width: 340px;
	overflow: hidden;
	display: block;
	float: left;	
}

/*
	COL Split

	Defines a split column - there are only two for simple layout, one for
	the left and one for the right, both are equal width.

    A split column can be created multiple times on the page, unlike COL,
    where columns can only be defined once.

    A split section also allows for a fullwidth section, declared with .fullwidth
*/

#pf #splitsection
{
    display: block;
}

#pf #splitsection .fullwidth
{
    width: 100%;
    display: block;
    overflow: hidden;
}

#pf #splitsection .colRightSplit
{
    width: 340px;
	overflow: hidden;
	display: block;
	float: right;
}

#pf #splitsection .colLeftSplit
{
    width: 340px;
	overflow: hidden;
	display: block;
	float: left;
}

/*
	SFC

	Simple Feature Container - blocks containing a distinct feature.
	These items are stackable and sit in their respective COL at
	the standard width of the column.
*/
#pf .sfc
{
	display: block;
	width: 100%;
	padding: 0px;
	margin: 0px;
}

/* Styles */
#pf .sfc h3
{
	padding: 20px 0px 10px 0px;
	font-weight: bold;
	font-family: Arial;
	font-size: 16px;
	margin: 0px;
}

#pf .sfc h3.orange
{
	padding: 20px 0px 10px 0px;
	font-weight: bold;
	font-family: Arial;
	font-size: 16px;
	margin: 0px;
    color: #F89D58;
}

#pf .sfc h3.topline
{
	padding: 0px 0px 10px 0px;
	font-weight: bold;
	font-family: Arial;
	font-size: 16px;
	margin: 0px;
}

#pf .sfc h3.supertitle
{
    font-size: 18px;
    padding: 30px 0 10px 0;
}

#pf .sfc h3.topline.supertitle
{
    padding: 0px 0px 10px 0px;
}

#pf .sfc p
{
	padding: 0px;
	margin: 0px 0px 15px 0px;
}

/*

	Consumer Features

*/
#pf .consumerfeatureLeft
{
	float: left;
	overflow: hidden;
	width: 340px;
}

#pf .consumerfeatureRight
{
	float: right;
	overflow: hidden;
	width: 340px;
}

#pf .consumerfeatureBlock
{
	overflow: hidden;
	width: 100%;
}

#pf .consumerPicofeatureLeft
{
	float: left;
	overflow: hidden;
	width: 220px;
}

#pf .consumerPicofeatureRight
{
	float: right;
	overflow: hidden;
	width: 200px;
}

#pf .titleImage
{
    height: 120px;
    width: 100%;
    line-height: 120px;
    margin-bottom: 20px;
    background-repeat:no-repeat;
}

#pf .titleImage h3.white
{
    padding: 0 10px 0 10px;
    margin: 0;
    color: #FFF;
    font-size: 24px;
}

#pf .titleImage h3.black
{
    padding: 0 10px 0 10px;
    margin: 0;
    color: #000;
}