@charset "utf-8";

/*********** Structure Template Css Stylesheet ****************
 Author: Carl Pryke
 Date: 05/05/2011
 Version: 1.0 
 Description: This file describes the structure for a standard 
   web page that has a fixed width of 900px and scrolls with 
   a fixed background. Most easily implemented with the index.html
   file of this folder.
 *************************************************************/

/*********** General positioning of the site ****************/

/* Here the main attributes of the body are manipulated */
body 
	{
	margin: 0 0; /* Margin must always be set to 0 in case browsers have other default */
	}
	
div, textarea, input 
	{
	float: left;
	position: relative;
	}
 
/* Firefox thinks browser window is bigger than screen, 
so set wrappers with maximum width and height */
div.wrapper, div.wrapper1, div.wrapper2, div.wrapper3, div.wrapper4
	{
	position: absolute;
	width: 100%;
	height: 100%;
	min-width: 1000px;
	text-align: center; /* aligns anything within the div to the centre */
	z-index: 0;
	}

div.wrapper3
    {
        z-index: 10;
    }

div.wrapper4
    {
        z-index: 10;
        height: 0px;
    }
    
div.wrapper99, div.wrapper100
    {
        position: absolute;
        width: 100%;
        min-width: 1000px;
        text-align: center;
	    z-index: 99;   
        visibility: hidden;
        vertical-align: middle;
        background-image: url('../../images/bg-repeat.png');
        height: 900px;
    }

div.wrapper100{z-index: 100;}
    
div.filePanel
    {
        float: none;
        margin: 225px auto;
        width: 1000px;
        height: 400px;
        opacity: 0.0;
        visibility: hidden;
    }
    
div.fileUploadLeft, div.fileUploadRight, div.fileUploadContent
    {
        float: left;
        width: 20px;
        height: 400px;
        background-repeat: no-repeat;
    }
    
div.fileUploadContent
    {
        width: 960px;
        background-repeat: repeat-x;
    }
    
div.fileUploadExit
    {
        float: right;
        width: 40px;
        height: 40px;
        margin-top: 20px;
        cursor: pointer;
    }
    
    
select.fileUploadList, input.fileUp
    {
        float: left;
        width: 200px;
        height: 30px;
        margin-left: 5px;
        margin-top: 20px;
    }
    

/* Background wrapper will contain content consitent regardless of scrolling
and must be fixed */
div.wrapper{position: fixed;}
	
/* Multiple wrappers set so layering can be implemented, 
   All parameters remain the same except the z-index */
div.wrapper1{z-index: 1;}
div.wrapper2
	{
	z-index: 2;
	height: 0px;
	}

/* Sets up the content panels of the site, backgroundContent has altered dimensions
to accomodate potential ad space in the site */
div.backgroundContent, div.content
	{
	width: 1400px;
	min-height: 1000px;
	margin: 0 50%; /* makes the backgroundContent panel start from the centre of the screen, so left ad will
					  disappear off side of screen.*/
	text-align: left;
	}
	
/* Defines the area that content will be rendered, 
must be in a flexible position relative to screen width*/	
div.content
	{
    float: none;
	width: 1000px; /* Industry Standard Width, no height defined to remain flexible */
	min-height: 500px;
    margin: 0 auto; /* makes the margins automatically place the content at the centre.*/
    overflow: hidden;
    margin-bottom: 50px;
	}
	
/* Defines a invisible content box */
div.contentLine
	{
    float: none;
	width: 1000px;
	height: 0px;
	margin: 0 auto;
	}

/* Defines a panel that sits at either side of the content panel, 
image backgrounds should be specified here */
div.adPanelLeft, div.adPanelRight
	{
	position: fixed;
	width: 250px;
	height: 1000px;
	margin-left: -750px; /* Default setting for left panel, must be a negative value so it slides OFF the screen when reduced. */
	}
	
/* Used whenever an advertisement is needed, reserves the whole width of the page and centers the contained ad */	
div.wideAdPanel
	{
	position: relative;
	float: none;
	width: 1000px;
	height: 50px;
	text-align: center;
	}

/* because we want adPanels to be fixed, we can't avoid having to manually define a x axis position,
this mean the margin on the left must be the left ad width plus the content panel width*/
div.adPanelRight{margin-left: 500px;}

div.header
	{
	position: relative;
	width: 1000px;
	height: 200px;
	text-align: left;
    margin-bottom: 80px;
	}
	
div.subHeader
	{
	position: absolute;
	width: 1000px;
	height: 20px;
	margin-top: 68px;
	text-align: right;
	}

div.logo, div.contactNumber, div.bannerSpace
	{
	float: left;
	position: relative;
	width: 200px;
	height: 20px;
	}
    
div.phone, div.email
    {
        padding-left: 25px;
        width: 230px;
        height: 24px;
        vertical-align: middle;
        font-size: 14px;
        padding-top: 6px;
    }
    
div.location-address
    {
        float: left;
        width: 558px;
        height: 26px;
        margin-right: 5px;
        background-image: url('../../images/header-location.png');
    }

div.phone
    {
        width: 100px;
        margin-left: 58px;
    }
    
div.contactNumber
    {
        float: right;
        width: 500px;
        margin-top: 20px;
    }
    
div.logo
    {
        width: 254px;
        height: 200px;
        margin-top: 30px;
        background-repeat: no-repeat;
    }
	
div.bannerSpace
	{
	width: 500px;
	text-align: center;
	}

/* Title bar is the head of the website, occupies top of site and used for company
logo image mainly */
div.title
	{
	width: 1000px;
	height: 130px;
	}
	
/* Container for the navigation elements of the page, allows for a basic set of links */
div.navigation
	{
	width: 600px;
	height: 30px;
	}

div.mainPanel, div.sidePanel, div.contentPanel
	{
	width: 665px;
	min-height: 20px;
	}
 
div.contentPanelTop, div.contentPanelBottom
    {
        width: 1000px;
        height: 25px;
    }
    
div.contentPanel
    {
        padding: 0px 10px 10px 10px;
        width: 1000px;
        min-height: 0px;
    }
    
div.subPanel
    {
        width: 660px;
        margin-left: 5px;
        height: 40px;
    }
	
div.sidePanel
	{
	width: 305px;
	}
    
div.textPanel
    {
        width: 410px;
        min-height: 20px;
    }
    
div.imagePanel
    {
        width: 200px;
        min-height: 20px;
    }
    
input.formButton
    {
        width: 150px;
    }

/* Defines a clickable region that is linked to another document */	
div.navigationElement
	{
	position: relative;
	width: 145px;
	height: 30px;
	float: left;
	cursor: pointer;
	}
	
/* Area for News Scroller App for the site */

div.newsScrollerApp
	{
	position: relative;
	width: 900px;
	height: 20px;
	float: left;
	}
	
/* Area for complex navigation, can be a plug-in app or css-animated image based
navigation utility */

div.navigationApp
	{
	position: relative;
	width: 1000px;
	height: 40px;
	float: left;
	}
	
/* Area for having a search bar */

div.searchBar
	{
	position: absolute;
	width: 1000px;
	height: 30px;
	margin-top: 140px;
	text-align: right;
	float: left;
	}
	
/* Defines the main content of the site, where information should
be placed within the site */
div.contentMain
	{
	width: 900px;
	height: 1480px;
	}

/* Defines newsFeed and further article areas*/
div.dynamicContentPane, div.advertPane
	{
	width: 822px;
	height: 1500px;
	float: left;
	border: thin solid 1px;
	}
	
div.advertPane{width: 178px;}

/* Footer Area Definition, for extra links, XML Files, copyright and references */

div.footer
	{
	position: relative;
    padding-top: 10px;
	float: none;
	width: 100%;
    min-width: 1000px;
	min-height: 450px;
    text-align: center;
    margin-top: 80px;
	}

 div.footerTop
    {
        position: relative;
        min-height: 30px;
        width: 100%;
        height: 30px;
        background-color: #36b449; 
    }
    
 div.footerCenter, div.footerTopCenter
    {
        position: relative;
        float: none;
        margin: 0px auto;
        width: 1000px;
        min-height: 60px;
    }
 
 div.footerTopCenter
    {
        min-height: 30px;
        height: 30px;
        background-image: url('../../images/footer-top.png');
     }
    
 div.footerItem
    {
        height: 60px;
        width: 150px;
        margin: 5px;
        background-repeat: no-repeat;
    }
 
 div.footerLinks
    {
        width: 100%;
        min-height: 20px; 
    }
 
 div.footerLink
    {
        min-width: 100px;
        margin-left: 20px;
        font-family: 'Century Gothic'; 
    }

/*********** End General positioning of the site ****************/

/*********** Paragraph Formatting *******************************/

div.editorialText, div.editorialText2
	{
    padding: 5px;
	float: left;
	position: relative;
	width: 400px;
	min-height: 20px;
    font-size: 14px;
        font-family: 'Century Gothic';
	}
	
div.editorialText2
	{
	width: 295px;
	}

/*********** End Paragraph Formatting ***************************/

/*********** Image Files ****************************************/

div.editorialImages
	{
	margin-top: 5px;
	margin-left: 5px;
	float: left;
	position: relative;
	width: 250px;
	height: 200px;
	background-color: #EEEEEE;
	}
	
div.mapPanel
	{
	margin-top: 5px;
	float: left;
	position: relative;
	width: 670px;
	height: 400px;
	background-color: #EEEEEE;
	}

/*********** End Image Files ************************************/

/*********** Input Fields ***************************************/

div.formHeader, div.sectionHeader, div.formRow
	{
	position: relative;
	float: left;
	width: 100%;
	min-height: 10px;
    margin: 5px;
	}
	
div.formHeader
    {
        font-size: 25px;
    }
    
div.sectionHeader
	{
	height: 20px;
	}
	
div.errorBox, input.textElement, div.inputName, select.textElement
	{
	position: relative;
	float: left;
	margin: 5px 5px;
	width: 350px;
	min-height: 10px;
	border-width: 0px;
        font-family: 'Century Gothic';
	}
	
div.errorBox
	{
	width: 180px;
	}
	
input.textElement, select.textElement
	{
	background-color: #FFFFFF;
    width: 200px;
	}
	
input.checkBox
	{
	float: left;
	margin-left: 5px;
	margin-top: 5px;
	}
	
div.conditions
	{
	float: left;
	position: relative;
	width: 550px;
	margin: 5px 5px;
	min-height: 30px;
	font-size: 12px;
	}

div.terms, div.termsHeader
	{
	position: relative;
	float: left;
	margin: 5px;
	width: 250px;
	min-height: 10px;
	font-size: 12px;
	}
	
div.termsHeader
	{
    font-size: 16px;
	}

div.formBlock, div.formBlockRight
	{
	float: left;
	position: relative;
	width: 340px;
	height: inherit;
	}
	
div.formBlockRight
	{
	text-align: right;
	}
	
div.bulletHeader, div.bullets
	{
	margin: 5px 5px;
	width: 680px;
	height: 20px;
	float: left;
	position: relative;
	}
	
div.bullets
	{
	margin: 5px 15px;
	width: 660px;
	font-size: 12px;
	}

div.blankValue, div.correctValue, div.incorrectValue
	{
	float: left;
	position: relative;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	margin-top: 5px;
	}

textArea.textArea
    {
        width: 600px;
        height: 300px;
        font: arial;
    }


/************ End Input Fields **********************************/

/************ Banner Ad Dimensions ******************************/

div.leaderBoard
	{
	width: 672px;
	height: 51px;
    margin-left: 0px;
    margin-bottom: 20px;
    margin-top: 46px;
    background-color: #EEEEEE;
	}

div.banner
	{
	margin: 20px 15px;
	width: 468px;
	height: 60px;
	background-color: #EEEEEE;
	}

div.smallBanner
	{
	margin: 10px auto;
	width: 300px;
	height: 50px;
	background-color: #EEEEEE;	
	}

div.MPUAd
	{
	margin: 5px 5px;
	float: none;
	width: 300px;
	height: 250px;
	background-color: #EEEEEE;
	}

div.widescraper
	{
	margin: 5px 5px;
	float: none;
	width: 160px;
	height: 444px;
	background-color: #EEEEEE;
	}

div.exhibition-button
    {
        width: 182px;
        height: 26px;
    }


/************ End Banner Ad Dimensions **************************/

/************ Tables ************************************/

table.companyTable, tr.companyTableRow
    {
        width: 100%;
        min-height: 10px;
        font-size: 12px;
        padding: 0px;
    }
    
tr.companyTableRow:hover
    {
        background-color: #EEEEEE;
        padding: 0px;
        min-height: 2px;
        overflow: hidden;
    }
    
tr.companyTableRow:hover
    {
        background-color: #EEEEEE;
        padding: 0px;
        min-height: 2px;
    }
    
td.companyTableItem, th.companyTableHeaderItem
    {
        max-width: 180px;
        min-height: 2px;
        font-size: 12px;
        padding: 0px 2px;
    }
    
td.companyTableItem
    {
        cursor: pointer;
    }
    
/******************* Form Elements ********************/

div.controls
    {
        width: 100%;
    }
    
div.companyList
    {
        width: 205px;
        min-height: 10px;
    }
    
div.companyDetails
    {
        width: 300px;
        min-height: 20px;
        margin-left: 5px;
            font-family: 'Century Gothic';
    }
    
div.companyInfo
    {
        width: 300px;
        min-height: 20px;
            font-family: 'Century Gothic';
    }
    
div.companyPanel
    {
        width: 100%;
        min-height: 20px;
        margin-top: 10px;
            font-family: 'Century Gothic';
    }
    
div.companyDescription
    {
        width: 300px;
        min-height: 180px;
            font-family: 'Century Gothic';
    }
    
div.companyItem:hover
    {
        background-color: #19a506;
        color: #FFFFFF;
    }
    
div.companyNameHeading
    {
        width: 300px;
        padding-right: 50px;
        min-height: 60px;
        font-size: 30px;
            font-family: 'Century Gothic';
    }
    
div.companyItem
    {
        width: 200px;
        min-height: 20px;
        margin-top: 2px;
        background-color: #EFEFEF;
        padding: 2px;
        cursor: pointer;
        font-family: 'Century Gothic';
    }
    
input.searchBar
    {
        margin-top: 10px;
        width: 200px;
        height: 20px;
            font-family: 'Century Gothic';
    }
    
div.fileUploadButton, div.registerCodeButton, div.mailOutButton
    {
        width: 150px;
        height: 30px;
        float: right;
        cursor: pointer;
    }
 
div.companyLogo
    {
        float: right;
        width: 250px;
        height: 250px;
        background-position: top center;
        background-size: 100% auto;
        -moz-background-size: 100% auto;  
        background-repeat: no-repeat;
      
    }
    
div.companyImage
    {
        float: right;
        width: 250px;
        height: 200px;
        margin-top: 10px;
        background-position: center center;
        background-size: auto 100%;
        background-repeat: no-repeat;
        -moz-background-size: auto 100%; 
    }
    
div.companyImages
    {
        width: 290px;
        min-height: 400px;
    }
    
    
/**************** Sub Nav *********************/

div.subnav
    {
        margin-left: 1%;
        width: 99%;
        min-height: 20px;
        font-size: 16px;
        margin-bottom: 10px;
    }
    
div.subItem
    {
        min-width: 70px;
        text-align: center;
    }
    
div.subBreak
    {
        padding-left: 10px;
        padding-right: 10px;
    }
    
div.email-link
    {
        margin-left: 20px;
        margin-top: 20px;
            font-family: 'Century Gothic';
    }
    
div.textContent
    {
        padding: 5px;
        min-height: 200px;
    }
    
div.uploadList
    {
        width: 200px;
        min-height: 10px;
    }
    
div.uploadImage
    {
        width: 100%;
        min-height: 10px;
        color: #FFFFFF;
    }

div.bullet, div.bullet2
    {
        padding: 2px 0px 2px 50px;
        width: 80%;
        min-height: 30px;
        font-size: 14px;
        background: no-repeat left top url('../../images/bullet.png');
    }
    
div.bullet2
	{
		background: no-repeat left top url('../../images/tick.png');
	}

div.partners-panel
    {
        min-height: 140px;
        width: 960px;
    }

div.partners-panel-item
    {
        height: 140px;
        background-position: center center;
        padding: 10px;
        background-repeat: no-repeat;
    }

#additionalDetails, #additionalDetails1, #additionalDetails2, #additionalDetails3, #additionalDetails4
    {
        visibility: hidden;
        height: 0px;
        overflow: hidden;
    }

/****************************** Social Links ********************************/

div.icon
    {
        width: 21px;
        height: 29px;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 3px;
        cursor: pointer;
    }

div.titlex  
    {
        width: 200px;
        color: #19a506;
        font-style: italic;
    }

div.waiting-message
    {
        width: 400px;
        min-width: 400px;
        height: 100px;
        min-height: 100px;
        margin: 0px auto;
        background: url('../../images/waiting-message.gif') no-repeat;
        float: none;
    }