@charset "utf-8";
/* CSS Document */

/*  

Client: Universal Display
Client URL: http: //www.universaldisplay.co.uk
Description: Universal Display Website
Version: 1.0
Author: Max Scianna
Agency URL: http: //www.maxscianna.com/
Date: 15/08/2009

Notes: All dynamic page elements should use classes to style them.

*/

/* Contents

	1.0 Reset CSS
	2.0	Global Formatting
	3.0	Common Formatting
	4.0	Links
	5.0	Fonts
	6.0	Global Classes
	7.0	Wrapper
	8.0	Logo
	9.0	Layout
	10	Navigation
	11	Forms
	12	Tables
    13  Homepage
    14  Ranges, Mannequins & Product Pages
    15  Content Pages
	
*/

/* 1.0	Reset CSS */

html,body,div,span,
applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,font,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
dd,dl,dt,li,ol,ul,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td 
{
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
	text-align: left;
}

table 
{
	border-collapse: collapse;
	border-spacing: 0;
}

ol,ul 
{
	list-style: none;
}

q: before,q: after,
blockquote: before,blockquote: after 
{
	content: "";
}

* 
{
    padding: 0;
    margin: 0;
}


/* 2.0	Global Formatting */

html, body 
{
	border: 0;
	margin: 0 0 0 0;
	padding: 0;	
}

body 
{
	font-size: 62.5%; /* 62.5% relative font size resets to 10px */
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #bec0bd;
}

html 
{
}

/* 3.0	Common Formatting */

p 
{
}

h1 
{
    font-family: "Catriel Bold", Arial, Sans-Serif;
    font-size: 2.5em;
    color: #666666; 
}

h2 
{
    font-family: "Catriel Bold", Arial, Sans-Serif;
    font-size: 2.5em;
    color: #666666; 
}

h3 
{
    font-family: "Catriel Bold", Arial, Sans-Serif;
    font-size: 2.5em;
    color: #666666; 
}

h4 
{
}

h5 
{
}

h6 
{
}

ul 
{
}

li 
{
}

blockquote 
{
}

img 
{
	border: none;
}

strong 
{
	font-weight: bold;
}

em 
{
	font-style: italic;
	color: #bec0bd;
	font-size: 1.4em;
}

u 
{
	text-decoration: underline;
}

small 
{
	font-size: 10px;
}

acronym, abbr 
{
	cursor: help;
	letter-spacing: 1px;
	border-bottom: 1px dashed;
}

/* 4.0	Links */

a 
{
  text-decoration: none;
  color: #bec0bd;  
  font-weight: bold;
}

a:hover 
{
    color: #333333;
}

a:visited 
{
}

a:focus 
{
}

/* 5.0	Fonts */

/* 6.0	Global Classes */

.clear 
{
	clear: both;
	height: 1px;
	overflow: hidden;
	width: 100%;
	display: block;
}

.hide 
{
	display: none;
}
 
.float-left 
{
	float: left;
}

.float-right 
{
	float: right;
}
 
.text-left 
{ 
	text-align: left!important;
}

.text-right 
{ 
	text-align: right;
}

.text-center 
{
	text-align: center;
}

.text-justify 
{
	text-align: justify;
}

.nopadding 
{
	padding: 0!important;
}

.noindent 
{
	margin-left: 0;
	padding-left: 0;
}

.nobullet 
{
	list-style: none;
	list-style-image: none;
}

.notbold 
{
	font-weight: normal!important;
}

.nobg 
{
	background: none!important;
}

.fade 
{
    cursor: pointer;
}

.inforequest
{
    cursor: pointer;
}

/* 7.0	Wrapper */

div#wrapper 
{
	width: 982px;
	margin: auto; /* This is to position the page centrally */
	overflow: hidden; /* This is to contain all floats within the wrapper */
	position: relative;
}

/* 8.0	Logo */

div#logo 
{
	float: left; /* This is to keep the logo inline with rest of the header elements */
	background: url(/images/universal-display-logo.gif) no-repeat;
	width: 180px;
	height: 153px;
}

div#logo a 
{
	display: block;
	width: 180px;
	height: 153px;
	text-indent: -999999px; /* This is to hide accessible text off the screen */
}

div#search
{
    float: right;
    text-align: right;
    width: 210px;
    padding-top: 60px;
}

div#search input
{
    width: 120px;
    margin-right: 10px;
}

div#search div
{
    display: inline;
    font-size: 1.3em;
	font-weight: bold;
}

/* 9.0	Layout */

#header 
{
	overflow: hidden; /* This contains the floats */
}

#maincontent 
{
	padding: 47px 81px;
	/* overflow: hidden;  This is to contain floats */
}

#footer 
{
	clear: both; /* This is to clear any floats */
	overflow: hidden; /* This is to contain floats */
	margin-bottom: 50px;
}

/* 10.0	Navigation */

/* Global Main Navigation */
div#topnavigation 
{
	clear: both;
	overflow: hidden; /* This is to contain floats */
}

div#topnavigation li 
{
    float: left;
}

/* Footer Navigation */

div#footer ul 
{
    text-align: center;
}

div#footer li 
{
    display: inline;
	padding: 0 30px;
	font-weight: bold;
}

/* 11.0	Forms */

fieldset 
{
}

legend 
{
}

label 
{
}

input 
{
	font-size: 1.3em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #bec0bd;
    background: url(/images/textbox-bg.gif) top left no-repeat;
    border: solid 1px #ddd;
    height: 17px;
    padding: 5px 0 0 5px;
}

textarea 
{
}

/* 12.0	Tables */

table 
{
}

tbody 
{
}

tr 
{
}

th 
{
}

td 
{
}

/* 13.0 Homepage */

div.newsticker
{
    position: absolute;
    top: 190px;
    left: 131px;
    width: 720px;
    height: 20px;
    overflow: hidden;
}

div.newsticker div
{
    position: relative;
	font-size: 1.5em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #bec0bd;
	width: auto;
    left: 720px;
}

/*
div.newsticker ul
{
    position: relative;
	font-size: 1.5em;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #bec0bd;
	list-style-type: none;
	width: 2000px;
	margin: 0;
	padding: 0;
}

div.newsticker ul li
{
    float: left;
    margin: 0;
    padding: 0;
}
*/

div.leftpanel 
{
    width: 310px; 
    height: 438px; 
    display: inline; /* This is a hack for IE6 double margin bug */
    float: left; 
    margin-left: 50px; 
    overflow: hidden; 
}

div.rightpanel
{
    width: 310px; 
    height: 438px; 
    display: inline; /* This is a hack for IE6 double margin bug */
    float: right; 
    margin-right: 50px;
    overflow: hidden;  
}

div.centerpanel
{
    width: 310px; 
    height: 438px; 
    display: inline; /* This is a hack for IE6 double margin bug */
    float: left; 
    margin-left: 255px;
}

/* 14.0 Ranges, Mannequins & Product Pages */

div.item 
{
    float: left;
    width: 205px; 
}

div.itemimage 
{
    width: 205px;
    height: 290px;
    position: relative;
}

div.itemlinks
{
    position: relative;
    width: 155px;
    height: 39px;
    text-align: center;
    padding-top: 11px;
}

div.itemlinks div
{
    float: left;
}

div.itemlinks img
{
    padding: 0 13px;
}

div.itemcaption
{
    position: relative;
    width: 155px;
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    padding-top: 11px;
    height: 39px;
}

div.inforequestform
{
    display: none;
    position: absolute;
    width: 300px;
    height: 210px;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 100;
    overflow: hidden;
}

div.inforequestform a.close
{
    display: block;
    float: right;
    padding: 10px 10px 0 0;
    font-size: 1.3em;
    font-weight: bold;
}

div.subscribeform
{
    display: none;
    position: absolute;
    width: 300px;
    height: 280px;
    border: 1px solid #ccc;
    background-color: #fff;
    z-index: 100;
    overflow: hidden;
}

div.subscribeform a.close
{
    display: block;
    float: right;
    padding: 10px 10px 0 0;
    font-size: 1.3em;
    font-weight: bold;
}

div.smallitem 
{
    float: left;
    width: 155px;
    height: 279px; 
}

div.smallitem div.itemimage 
{
    width: 155px;
    height: 219px;
    position: relative;
}

div.itemimage img
{
    position: absolute;
    top: 0;
    left: 0;
}

div.itemimage img.zoom
{
    width: 155px;
    height: 219px;
}

div.smallitem div.itemimage img.zoom
{
    width: 130px;
    height: 184px;
}

div.smallitem div.itemcaption
{
    text-align: left;
}

div.productimages
{
    width: 310px;
    float: left;
    text-align: center;
}

div.productimages img.mainimage
{
    width: 310px;
    height: 438px;
}

div.productimages div.links
{
    padding: 20px 0 10px 0;
}
div.productimages div.links div
{
    width: 199px;
    margin: auto;
}

div.productimages div.links div div
{
    vertical-align: top;
    padding: 0 20px; 
    display: inline;
}
 
div.scrollable 
{              
    /* required settings */ 
    position: relative; 
    overflow: hidden; 
    width: 308px; 
    height: 109px; 
    padding: 10px 1px;
} 


div.scrollable div.items { 
    /* this cannot be too large */ 
    width:20000em; 
    position:absolute; 
} 

div.scrollable div.items div 
{ 
    float: left; 
    cursor: pointer;
} 

div.productdetails
{
    width: 465px;
    float: right;
    position: relative;
}

div.productdetails div.details
{    
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 20px;
}

div.productdetails div.details span
{    
    display: block;
    width: 465px;
    padding-bottom: 4px;
	font-weight: bold;
}

div.productdetails div.details span label
{
    width: 100px;
    float: left;
    display: block;
    font-weight: bold;
}

/* 15.0 Content Pages */

div.article
{
    position: relative;
    padding: 0 51px;
}

div.widearticle
{
    position: relative;
    padding: 0 0 0 51px;
}

div.backbutton
{
    position: absolute;
    height: 21px;
    width: 23px;
    top: -1px;
    left: -15px;
}

div.leftcontent
{
    float: left;
    width: 350px;
    text-align: left;
}

div.leftcontent div.heading, div.article div.heading
{
    width: 325px; 
    float: left; 
    height: 40px;
}

div.leftcontent div.wideheading, div.article div.wideheading, div.widearticle div.wideheading
{
    width: 350px; 
    height: 40px; 
    clear: left;
}

div.leftcontent a.pdf
{
    display: block; 
    width: 25px; 
    float: left; 
    height: 40px;
}

div.leftcontent div.text
{
    clear: left;
    padding-top: 10px;
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.3em;
    padding-right: 25px;
}

div.rightcontent
{
    float: right;
    width: 310px;
}

div.rightcontent div.text
{
    font-size: 1.3em;
    font-weight: bold;
    line-height: 1.3em;
}

div.office
{
}

div.office div.address
{
    float: left;
    width: 310px;
    height: 219px;
}

div.office div.address p
{
    font-family: Arial, Sans-Serif;
    font-size: 1.3em;
    font-weight: bold;  
    color: #999;                
}
                        
div.office div.address a 
{
    color: #999;       
    text-decoration: none;  
}    

div.office div.address a:hover 
{
    color: #333;
}
    
div.office div.wraparound 
{  
    float: right;
    width: 155px; 
    height: 219px; 
    overflow: hidden;
}

div.office div.wraparound img
{  
    width: 155px; 
    height: 219px; 
}

div.spacer
{
    clear: both;
    height: 25px;
}

div.teammember
{
}
            
div.teammember div.profile
{
    width: 350px;
    float: left;
    padding-right: 100px;
}

div.teammember div.position
{
    width: 155px;
    float: left;
    padding-top: 5px;
}
            
div.teammember div.profile p, div.teammember div.position p
{
    font-family: Arial, Sans-Serif;
    font-size: 1.3em;
    font-weight: bold;
    color: #999;                   
}

div.teammember div.profile a
{
    color: #999;      
    text-decoration: none;     
}

div.teammember div.profile a:hover 
{
    color: #333;
}

div.teammember div.profile h3
{
    font-family: "Catriel Bold", Arial, Sans-Serif;
    font-size: 25px;
    color: #666666; 
}
    
div.teammember div.wraparound 
{
    position: relative; 
    width: 153px; 
    height: 217px; 
    border: solid 1px #EEE; 
    overflow: hidden; 
    float: left;
}

a.customerlogo 
{
    display: block;
    width: 310px;
    padding-bottom: 30px;
}

div.rightcontent a.slideshow
{
    float: left;
}

div.newsitem 
{
    float: left;
    width: 155px;
}

div.newsitem div.itemimage 
{
    width: 155px;
    height: 219px;
    position: relative;
}

div.newsitem div.itemcaption
{
    position: relative;
    width: 155px;
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    padding: 11px 0;
    height: auto;
}

div.newsitemimage 
{
    width: 155px;
    height: 219px;
}

div.newsitemcaption
{
    width: 155px;
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    padding: 11px 0;
    height: auto;
}

div.year
{
    float: right; 
    width: 49px; 
    padding-right: 7px;
}