/******************************************************************************/
/******************************************************************************
File: template_common.css
Comments: Common classes, IDs and elements needed throughout the site.

Notes: We have set the default font to 74% which is equal to 10pt.  to increase
by 1px JUST CHANGE THE EM NUMBER.  EXAMPLES BELOW:
1em == 10pt
1.1em == 11pt
1.2em == 12pt
1.3em == 13pt                    
This is scalable and accessible and works in IE6, IE7 and FireFox 1.5+

DO NOT USE  TO SET A PX FONT SIZE...EVER.  IT IS NOT NEEDED.  
*******************************************************************************/

/***RESET STYLESHEET NEEDED ONLY IN THIS FILE**********************************/
@import 'reset.css';

/***GLOBAL ELEMENTS************************************************************/

html {
	background-color: #fdfdfd;
}

body {
	width: 900px;
	margin: 0 auto;	
	color: #444;
	background-color: #fdfdfd;
	font-size: 1em;
}

#nav_content  {
	width: 900px;
	float: left;
}

#nav_content #primaryContent, #nav_content #primaryNavigation, #nav_content #secondaryContent {
	float: left;
}

#nav_content #primaryContent {
	width: 518px;
	margin: 0 0 20px 121px;
}

#nav_content #primaryNavigation {
	width: 97px;
	margin: 0 0 20px -639px;
}

#nav_content #secondaryContent {
	margin: 0 0 20px 27px;
	width: 234px;
}

#leviContactInfo {
	clear: both;
}

p, ul, ol {
	margin: 0 0 1.4em 0;
	line-height: 1.4em;
}

h1, h2, h3, h4, h5, h6{
	margin: 1em 0 .5em 0;
	line-height: 1.4em;
}

h1, h2, .reader-publisher-module h3 {
	font-family: Georgia;
	text-transform: uppercase;
	letter-spacing: 1px;
}

h1 {
	font-size: 1.6em;
}

h2, .reader-publisher-module h3 {
	font-size: 1.4em;
}

h1, #secondaryContent h2, .reader-publisher-module h3 {
	border-bottom: 3px solid #99a;
}

a {
	text-decoration: none;
	color: #990000;
}

a:hover {
	text-decoration: underline;
}

a[href^="http://"]:not([href*="interfacelanguages.com"])::after {
   content: "\2197";
   color: #990;
}

/* navigation styles
-------------------------------------*/
#primaryNavigation {
	text-align: right;
}

#primaryNavigation h2 {
  	overflow: hidden;
  	width: 0;
  	height: 0;
	margin: 0;
	line-height: 0;
	padding: 0;
}


#primaryNavigation ul li{
	padding: 0 .5em 0 0;
}

#primaryNavigation ul li a, #primaryNavigation ul li a:link, #primaryNavigation ul li a:visited{
	display: block; 
	padding: .2em .6em .2em 0;
	margin: .4em 0;
	text-decoration: none;
	color: #444;
	border-right: .4em solid #990000;
}

#primaryNavigation ul li a:hover, #primaryNavigation ul li a:active{
	text-decoration: underline;
	border-right: .4em solid #999900;
}

#primaryNavigation ul li a:active, #primaryNavigation ul li a:focus{
   outline: none;
}


/* you are here indent
----------------------------------------*/
#primaryNavigation ul li.active {
	position: relative;
	top: 0;
	left: .5em;
	cursor: default;
	text-decoration: none;
}

#primaryNavigation ul li.active a {
	border-right: .4em solid #999900 !important;
	background-color: #e0e0e0;
}

/* branding
-------------------------------------------*/
#branding {
	width: 100%;
	height: 150px;
	text-indent: -9999px;
	background: url(../images/branding.gif) transparent center 30px no-repeat;
}
/* screen shots
-----------------------------------------------*/

#nav_content #primaryContent #screenshots li{
	display: inline;
}
#nav_content #primaryContent #screenshots li a img{
	overflow: hidden;
  	width: 0;
  	height: 0;
  	border: none;
}
#nav_content #primaryContent #screenshots li a{
	float: left;
	display: block;
	height: 150px;
	width: 31%;
	margin-right: 1.5%;
	border: 1px solid #aaa;
	background: transparent top left no-repeat;
}
.eap #nav_content #primaryContent #screenshots li a { 
/*separate styles for eap page*/
	width: 48%;
}
#nav_content #primaryContent #screenshots li a:after {
	display: none;
}
#nav_content #primaryContent #screenshots li:last-child a{
	margin-right: 0;
}


/* primary content stylings
-----------------------------------------------------------*/
#nav_content #primaryContent #headshot img{
	float: right;
	margin: 0 0 15px 15px;
}
#nav_content #primaryContent #headshot:after {
	display: none;
}
dl dd {
	padding: 0 0 0 2em;
	margin: 0 0 1em 0;
}

blockquote {
	font-style: italic;
}
/* secondary content, list of web projects
-------------------------------------------------*/
#nav_content #secondaryContent h2 {
	margin-top: 1.3em;
}

#nav_content #secondaryContent #web_nav {
	float: left;
}
#nav_content #secondaryContent #web_nav li{
	float: left;
}
#nav_content #secondaryContent ul li{
	margin-bottom: 1em;
}
#nav_content #secondaryContent #web_nav li p{
	padding-left: 116px
}
#nav_content #secondaryContent #web_nav li h3 img{
	float: left;
	margin-right: 10px;
	border: 3px solid #e0e0e0;
}

/* eliminate current web project from secondary content
-----------------------------------------------------------*/

#web_nav li.active {
	display: none;
}

/* contact information, footer
----------------------------------*/
#leviContactInfo {
	text-align: center;
	margin-top: 2em;
	border-top: 1px dotted #aaa;
}

#leviContactInfo h2, #leviContactInfo p {
	overflow: hidden;
  	width: 0;
  	height: 0;
}

#leviContactInfo #hcard-Levi-Sigworth div{
	display: inline;
}

#leviContactInfo #hcard-Levi-Sigworth a{
	padding-right: 2em;
}

/* background images for detail pages
-------------------------------------------------*/
#nav_content #primaryContent #screenshots #avalonscreenshot1 {
background: url('../images/avalon/avalon1.jpg') 0 0 no-repeat;
}

#nav_content #primaryContent #screenshots #avalonscreenshot2 {
background: url('../images/avalon/avalon2.jpg') 0 0 no-repeat;
}

#nav_content #primaryContent #screenshots #avalonscreenshot3 {
background: url('../images/avalon/avalon3.gif') 0 0 no-repeat;
}

#nav_content #primaryContent #screenshots #brilliscreenshot1 {
background: url('../images/brilli/brilli1.jpg') 0 0 no-repeat;
}

#nav_content #primaryContent #screenshots #brilliscreenshot2 {
background: url('../images/brilli/brilli2.jpg') 0 0 no-repeat;
}

#nav_content #primaryContent #screenshots #brilliscreenshot3 {
background: url('../images/brilli/brilli3.jpg') 0 0 no-repeat;
}

#nav_content #primaryContent #screenshots #bufscscreenshot1 {
background: url('../images/bufsc/bufsc1.gif') 0 0 no-repeat;
}

#nav_content #primaryContent #screenshots #bufscscreenshot2 {
background: url('../images/bufsc/bufsc2.gif') 0 0 no-repeat;
}

#nav_content #primaryContent #screenshots #bufscscreenshot3 {
background: url('../images/bufsc/bufsc3.gif') 0 0 no-repeat;
}

#nav_content #primaryContent #screenshots #penfoldscreenshot1 {
background: url('../images/penfold/penfold1.gif') 0 0 no-repeat;
}

#nav_content #primaryContent #screenshots #penfoldscreenshot2 {
background: url('../images/penfold/penfold2.jpg') 0 0 no-repeat;
}

#nav_content #primaryContent #screenshots #penfoldscreenshot3 {
background: url('../images/penfold/penfold3.gif') 0 0 no-repeat;
}

/***PARALLAX********/

.parallax {
    position:relative; 
	overflow:hidden; 
	width:506px;
	height:200px;
	border: 6px solid #e0e0e0;
	margin: 2em 0 .3em 0;
}

.parallax_link {
	text-align: right;
}

img.tl {
	position: absolute;
	top:0;
	left:0;
}

img.tr {
	position: absolute;
	top:0;
	right:0;
}

img.br {
	position: absolute;
	bottom:0;
	right:0;
}

img.bl {
	position: absolute;
	bottom:0;
	left:0;
}