/********************* MASTER CSS - AUTHOR JESSICA BERTLING *********************/
/*      DATE CREATED:     04-13-2009       LAST DATE MODIFIED:     9-8-2010   */
/*      FOR WEBSITE ENTITLED "J&P CYCLES CAREERS"                               */
/*                                                                              */
/*                                                                              */
/****************************** MASTER COLOR CODE CHART *************************/
/*     BLACK COLOR: #333333     BLUE COLOR: #07444C     RED ACCENT: #AB3434     */
/*                                                                              */
/******************************* TABLE OF CONTENTS ******************************/
/*      [1] COMMON PAGE ELEMENTS                                                */
/*      [2] INSIDE PAGE ELEMENTS                                                */
/*                                                                              */
/********************************************************************************/

/********************************************************************************/
/*                            [1] COMMON PAGE ELEMENTS                          */
/********************************************************************************/
html,
body,
#form1 {
    height: 100%;   
}
body {
    margin: 0; padding: 0;
    font-family: Arial, Helvetica, Sans-Serif;
	font-size: 62.5%; color: #333333;
}
#form1 {
	margin: 0; padding:0;
	background: #aeaeae;
}
.clear {
	clear: both; height: 0; overflow: hidden; visibility: hidden;
	line-height: 0; 
}
a,
a:link,
a:visited,
a:active {
    color: #015F99;
}
p {
    margin: 10px 0 10px 10px; padding:0;
    color: #333333; font-size: 10pt; line-height: 14pt;
}
p:first-child {
   font-weight: bold; line-height: 18pt;
}
p:last-child {
    padding-left: 0 !important; padding-right: 0; margin-right: 0; margin-left: 0 !important;
}   
ul {
    font-size: 10pt;
    line-height: 18pt;   
}
table p img {
    float: left; margin-left: -2px;  
}
.rounded-corners {
	border-radius: 5px;
	/*--Bottom right rounded corner--*/
	-moz-border-radius-bottomright: 5px;
	-khtml-border-radius-bottomright: 5px;
	-webkit-border-bottom-right-radius: 5px;
	/*--Bottom left rounded corner--*/
	-moz-border-radius-bottomleft: 5px;
	-khtml-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	/*--Top right rounded corner--*/
	-moz-border-radius-topright: 5px;
	-khtml-border-radius-topright: 5px;
	-webkit-border-top-right-radius: 5px;
	/*--Top left rounded corner--*/
	-moz-border-radius-topleft: 5px;
	-khtml-border-radius-topleft: 5px;
	-webkit-border-top-left-radius: 5px;	
}
div.wrapper {
    display:block; width:100%;
    text-align: center;
    background: #aeaeae;
}
div.innerwrapper {
    display: inline-block; width: 987px;
    background: white; text-align: left; border: solid 1px #333333;
}
div.header {
    float:left; width:987px; margin: 0; padding:0;
    overflow:hidden;
}
    div.header div {
        float:left; margin:0; padding: 0;
    }

div.content {
    float: left; width:987px; height: auto;
    background: white url(../images/pageelements/contentback.jpg) repeat-x;
}
div.mainnav {
    float:left; width:190px; height: auto;
    background: transparent url(../images/pageelements/navrep.png) repeat-y right top;
}
    div.mainnav div.button {
        float:left; width:180px; margin:0; padding: 0 0 5px; overflow:hidden;
        border-top: solid 1px #daecfd; border-bottom: solid 1px #60b1e8;
    }
    div.mainnav div.button .icon {
        float:left; width:45px; margin:5px 5px 0 5px; padding: 0;
    }
    div.mainnav div.button a {
        float:right; width:110px; margin: 0px 2px 3px 0;
        font-weight: bold;
        font-size:9pt; text-decoration:none;
    }
    div.mainnav div.button a.title {
        float:right; width: 109px; margin-top: 18px; overflow:hidden;
        font-weight:bold; font-size: 11pt;
    }
    div.mainnav div.button a:hover {
        color: #fdff4d;  text-shadow: 2px 2px 2px #333;
    }
div.pagecontent {
    float: left; width:795px; clear:none; overflow:hidden;
}
    div.pagecontent h1 {
        float: left; margin: 10px 0 0 10px; padding:0; width: 98%;
        color: #015f99; text-transform: uppercase; font-size: 26pt;
    }
    div.pagecontent h2,
    .InteriorHeader {
        float: left; margin: 0 0 0 10px; padding:0; width: 98%;
        color: #333333; font-size: 14pt;
    }
    .InteriorHeader {
        float: none; width: inherit; font-weight: bold;
    }
    div.pagecontent h3 {
        float: left; margin: 5px 0 0 10px; padding:5px 0 0 0; width: 98%;
        color: #015f99; font-size: 14pt; border-top: solid 1px #ccc;
    }
    div.pagecontent h4 {
        margin: 5px 0 0 10px; padding:5px 0 0 0;
        color: #015f99; font-size: 12pt; width: 98%;
    }
    div.pagecontent sup {
        font-size: 50%;
    }
    div.pagecontent p {
        float: left; margin: 5px 0 0 10px; padding:0;
        color: #333333; font-weight: bold; font-size: 10pt;
        line-height: 18pt;
    }
		div.pagecontent p.bodytext {
			font-weight:normal; line-height:normal;
		}
		div.pagecontent p.bodytext50 {
			font-weight:normal; line-height:normal;
			width:48%;
		}
	div.pagecontent ul {
		float:left; margin: 0 0 0 10px; padding: 0;
		font-size: 10pt; font-weight:bold;
	}
    div.pagecontent li {
        float:left; margin: 5px 25px 0 0;
        list-style-type: none;
    }
		div.pagecontent li a {
			text-decoration:none;
		}
		div.pagecontent li a span {
			color: #333333; text-decoration:none;
		}
		div.pagecontent li a:hover {
			text-decoration:underline;
		}
    div.pagecontent table.contactinfo {
        float: left; width: 760px;margin: 15px 0 20px 10px; padding:0;
        color: #333333; font-size: 10pt;
    }
    div.pagecontent table.contactinfo td.info {
        font-size:9pt;
    }
p#cultphotos img {
    margin: 0 4px;
}
p#cultphotos a {
    text-decoration:none;
}
div.breadcrumbs {
    float:left; width:98%; margin: 5px 0 0 10px; padding: 0;
    font-size: 9pt; font-weight:bold;
}
    div.breadcrumbs a {
        color: #666666; font-weight:normal; margin: 0 3px;
    }
    div.breadcrumbs span {
        color: #666666;
    }
div.col1 {
    float: left; width: 420px; margin:0 0 0 10px; padding:0; overflow: hidden;
}
div.col2 {
    float: left; width: 330px; margin: 0 0 0 -10px; padding: 20px 0 0 35px;
    font-size: 13pt; font-weight:bold; line-height: 20pt;
}
    div.col2 span {
        float:left;margin: 0; padding: 0; width:286px;
        line-height: normal; font-size: 10pt; 
    }
    div.col2 span.belowbutton {
        width:100%; text-align:center;
        font-size: 9pt; font-weight:normal;
    }
    div.col2 a.joblistings {
        float:left; margin: 10px 0 0;
    }
	.col2 img {
		display: inline-block; vertical-align: middle;
		line-height: normal;	
	}
div.footer {
    background: #333333;
    font-size: 10pt; color: #cccccc; font-weight:bold;
    padding: 10px 0; text-align:center;
}


/********************************************************************************/
/*                            [2] INSIDE PAGES ELEMENTS                         */
/********************************************************************************/

div.quote {
    float:left; width:80%; margin: 5px 0 0 20px; padding: 0;
    font-weight: bold; font-size: 10pt;
}
    div.quote span {
    margin: 0; padding: 0; float:left;
    }
#pTabs {
	float: left; width: 183px; height: 335px;
	padding: 0px; margin: 0 -3px 0 10px;
    font-weight: bold; font-size: 10pt;
    background: #ececec url(/images/UI/jquercontentback.jpg) repeat-x;
}
        #pTabs ul {
            margin:0 0 0 0;
            padding:0; width:100%;
            list-style:none;
            overflow:hidden;
        }
        #pTabs li {
            float:left;clear:left;
            margin:0;
            padding:0;
            cursor: pointer;
            background: url(/images/UI/jquerleftlinks.png) no-repeat;
            width: 100%; height:67px;
        }
        #pTabs span {
            display:block;
            padding:10px 15px;
            color: #015f99;
        }
        #pTabs .hover {
            background: transparent url(/images/UI/jquerleftlinks_over.png) no-repeat;
            background-repeat: repeat-x;
            color: #015f99;
        }
        #pTabs .current {
        	color: #ececec;
            background: transparent url(/images/UI/jquerleftlinks_active.png) no-repeat;
        }
        #pTabs .current span {
            background:url("/content/images/tablnf.png") no-repeat left top;
            color: #ececec;
        }
.ourstorydecade {
	display:block; width: 580px; height:505px; overflow:hidden;
	padding: 0; margin: 0 0 0px -3px;
	font-size: 9pt;
	border-right: solid 3px #cccccc;  border-bottom: solid 3px #cccccc;
	background: #ececec url(/images/UI/jquercontentback2.jpg) repeat-x;
}
.ourstorydecade p.bodytext {
	width:375px;	
}
.ourstorydecade_hide {
	width: 532px;
	font-size: 9pt;
	padding: 15px 5px 5px 5px;
	margin: 0 0 5px 0;
	display: none;
	height:505px; overflow:hidden;
	background: #ececec url(/images/UI/jquercontentbackjpg) repeat-x;
}
#sTabs {
	float: left; width: 183px; height: 505px;
	padding: 0px; margin: 0 -3px 0 10px;
    font-weight: bold; font-size: 10pt;
    background: #ececec url(/images/UI/jquercontentback2.jpg) repeat-x;
}
        #sTabs ul {
            margin:0; height: 502px; padding: 3px 0 0; width:100%;
            list-style:none; overflow:hidden;
            border-bottom: solid 3px #cccccc;
            border-left: solid 3px #cccccc;
        }
        #sTabs li {
            float:left;clear:left; margin:0 0 0 -3px; padding:0;
            cursor: pointer;
            background: url(/images/UI/jquerleftlinks.png) no-repeat;
            width: 100%; height:67px;
        }
        #sTabs span {
            display:block;  font-size: 25pt;
            padding:10px 15px;
            color: #015f99;
        }
        #sTabs .hover {
            background: transparent url(/images/UI/jquerleftlinks_over.png) no-repeat;
            background-repeat: repeat-x;
            color: #015f99;
        }
        #sTabs .current 
        {
        	color: #ececec;
            background: transparent url(/images/UI/jquerleftlinks_active.png) no-repeat;
        }
        #sTabs .current span {
            background:url("/content/images/tablnf.png") no-repeat left top;
            color: #ececec;
        }
.container_product_infobox {
	display:block; width: 580px; height:335px; overflow:hidden;
	padding: 0; margin: 0 0 0px -3px;
	font-size: 9pt;
	border-right: solid 3px #cccccc; 
	background: #ececec url(/images/UI/jquercontentback.jpg) repeat-x;
}
.container_product_infobox p.bodytext {
	width:77%;	
}
.container_product_infobox_hide {
	width: 532px;
	font-size: 9pt;
	padding: 15px 5px 5px 5px;
	margin: 0 0 5px 0;
	display: none;
	height:329px; overflow:hidden;
	background: transparent url(/images/UI/jquercontentbackjpg) repeat-x;
}
.container_product_infobox table {
	float: left; width:98%;
	font-size:9pt; font-weight:bold; margin: 0 0 0 5px;
}
.container_product_infobox table td {
	border: solid 1px #cccccc; padding: 1px 5px;
}
.container_product_infobox table td.header {
	color: #015f99; font-size:11pt; text-align:center;
}
.container_product_infobox table td.term {
	color: #015f99;
}
.container_product_infobox table td.descrip {
	color: #333333;
}
#ourvision div.col1 {
    float:left; width: 327px; margin:0 0 0 10px; padding:0;
}
	#ourvision div.col1 img {
		float:left; margin:0 0 12px;
	}
#ourvision div.col2 {
    float:left; width: 445px; margin:0 0 0 10px; padding:0;
    font-size: 13pt; font-weight:bold; line-height:normal;
}
    #ourvision div.col2 ul {
        float:left; margin: 0; padding: 0; width:100%;
    }
    #ourvision div.col2 li {
        float:left; clear:left; 
        margin: 0 0 10px 2%; padding: 0; width:98%;
     }
    #ourvision div.col2 li.header {
        font-size:14pt; color: #015f99; margin-left:0;
     }
table.departments {
	float:left;width:75%;  padding: 0; margin: 10px 0 10px 100px;
	font-size: 9pt; font-weight:bold; color: #015f99;
}
	table.departments td 
	{
		float:left;width:25%;  padding: 3px 0; margin: 0;
		font-size: 9pt; font-weight:bold; color: #015f99;
	}
#JobDescrip table{
	float:left; width:100%;
}
table #ucJobDetail {
	float:left; clear:left; width: 700px;
}
div.jobdescrip {
	float:left; clear:left; width:700px; margin: 0 0 0 5px; padding:0;
	font-size: 10pt;
}
	div.jobdescrip td.category {
		margin: 0px; width:85px;
		font-weight:bold; font-size: .8em;
	}
	div.jobdescrip td.info {
		font-size: .8em;
		margin: 0; padding: 0;
	}
	div.jobdescrip td a {
		color: #07477c;
	}
	div.jobdescrip div.descrip {
		float:left; clear:left; width:770px;
	}
	div.jobdescrip span {
		margin: 0 5px 0 0; padding: 0;
	}
	div.jobdescrip p {
		display:block; float:none; width:770px;
		font-weight:normal; line-height:normal;
	}
	div.jobdescrip ul {
		width:720px; margin: 15px 0 0 15px;
		font-weight:normal; line-height:normal;list-style-type: disc;
	}
	div.jobdescrip h1 {
		width:720px; margin: 15px 0 0 15px;
		font-weight:normal; line-height:normal;list-style-type: disc;
	}
	div.jobdescrip li {
		width:720px; font-weight:normal;
		padding: 5px 0; list-style-type: disc;
	}
	div.jobdescrip li span {
		float:left; width:720px;font-weight:normal; margin: 0;
	}
.MsoNormal {
	margin-left:15px;
}
div.actionrow {
	float:left; width:100%; text-align:center;
	margin: 5px 0; font-size: 9pt; color: #333333;
}
div.actionrow img {
	margin: 5px 0 0;
}
a.action {
	width:auto; margin: 5px 5px 3px 0;
	font-size: 9pt;
}
#ourstory #cultphotos {
	height: auto; margin: 5px 0 0 5px; line-height: normal;
}
#business #cultphotos {
	height: auto; margin: 5px 0 0 5px; line-height: normal;
}
table.apply {
	float:left; width:765px; margin: 3px 0 0 10px;
	font-size: 9pt; color: black;
}
table.apply td {
	padding: 8px 0;
}
div.applicationtable {
	float:left; clear:left; width:99%; margin: 0 0 0 10px;
}
div.applicationtable table {
	float:left; clear:left; width:99%; margin: 10px 0 0;
}
div.applicationtable tr {
	display: block;
}
div.applicationtable td {
	display: inline-block; padding:0;
}
div.applicationtable td span {
	float:left;
}
ol.disclaimer li {
	float:left; clear:left; width: 700px;	
}
#ucJobDetail_dlJobs {
	float: left; clear: both; width: 770px; margin: 0 0 0 10px;
	font-size: 1.3em; font-weight:bold;
}
	#ucJobDetail_dlJobs dl {
		float: left; clear: both; width: 300px;
	}
		#ucJobDetail_dlJobs dt {
			float: left; width: 100px; clear:left; margin: 5px 0 0 0;
		}
		#ucJobDetail_dlJobs dd {
			float: left; width: 200px; margin: 5px 0 0 0;
		}
	#ucJobDetail_dlJobs p {
		display:block; float:none; clear:left; width: 100%; margin: 0;
	}
	#ucJobDetail_dlJobs ul {
		display:inline-block; float:none; clear:left; width: 100%; margin: 0; padding: 0 0 0 15px;
	}
	#ucJobDetail_dlJobs li {
		float:none; width: 90%; margin: 5px 0 0; 
		font-weight: normal;
		list-style-type: disc;
	}
#ucJob_dlJobs {
	float:left; clear:both;	
}
table#job-list {
	float: left; margin: 10px 0 10px 80px; 
	font-size: 9pt; color: #015f99;
	border: 1px solid #cccccc;
}
	table#job-list th {
		padding: 10px;
		font-weight: bold; color: #ab3434; text-align: left;
	}
	table#job-list td {
		padding: 10px;
	}
	table#job-list a {
		padding: 1px 2px;
		text-decoration: none;
		background: #fff; border: solid 1px #015f99;
	}
		table#job-list a:hover {
			color: #fff;
		}
#employee-quotes {
	margin: 10px 10px 0;	
}
	#employee-quotes .slide-quote {
		margin: 0 50px; display: block; float: none; width: 650px;
	}
	#employee-quotes .quote-photo {
		float: right; width: 100px; height: 100px; margin: 0;
	}
	#employee-quotes .employee-quote,
	#employee-quotes .employee-title {
		float: left; margin: 0; padding: 0 0 0 25px; width: 450px;
	}
	#employee-quotes .employee-quote {
		margin: 0;
		line-height: 15pt;	
	}	
	#employee-quotes .employee-title {
		margin-top: 5px;
		font-weight: normal; font-size: 9pt; line-height: normal;
	}
#employee-quotes .left-quote {
	margin-left: -25px; vertical-align: text-bottom;	
}
#employee-quotes .right-quote {
	margin-left: 5px; vertical-align: text-top;	
}
#quote-author {
	margin: 10px 0; padding: 20px 0 0 0px;
	font-size: 9pt; font-weight: normal; line-height: normal; text-align: right;
}
	#quote-author img {
		float: right; margin: -10px 10px 0 10px;
		border: solid 1px #333;	
	}
	#quote-author a {
		display: block; margin-top: 10px; width: auto;
	}
#leadership-roles a {
    float: left;
    text-decoration: none;   
}
#leadership-roles .leader,
#leadership-roles .executive {
    margin: 25px 3% 10px;
}
    #leadership-roles img {
        float: left; 
        border: solid 2px #333;
    }
    #leadership-roles p {
        float: left; margin: 10px 0 0 10px;
        line-height: normal;
    }
        #leadership-roles strong {
            display: block; 
            font-size: 1.3em;
        }
    #leadership-roles h2 {
        margin-top: 30px;   
    }
#leadership-roles .leader {
    width: 42%;
}
    #leadership-roles .intro-bio {
        width: 470px;
        font-weight: normal; line-height: 1.5em !important;
    }
    #leadership-roles .executive p {
        margin-top: 10px;
        line-height: normal; 
    }
    #leadership-roles .executive a {
        float: left;   
    }
    #leadership-roles .read-bio {
        margin: 5px 10px 0; float: left; width: 150px;
        text-decoration: underline; font-weight: bold; font-size: 1.3em;
    }
.leader-info {
    padding: 0 10px; margin: 10px 0;
}
    .leader-info p {
        float: none; margin: 0 0 10px; 
        font-weight: normal; line-height: 16pt;
    }
    .leader-info .leader-photo-col {
        float: right; width: 300px; margin: 0 0 10px 25px;
    }
        .leader-photo-col p {
           margin: 0; padding: 10px;
           font-weight: bold; font-size: 10pt; color: #015f99; line-height: 14pt; font-style: oblique;
           border-top: solid 3px #ccc; border-bottom: solid 3px #ccc;
        }   
        #john-jill .leader-photo-col {
            width: 480px;   
        }
   .leader-info a {
        font-weight: bold; font-size: 10.5pt; 
   }
    
/* TIMELINE */
#slider {
    margin: 15px 0 0; position: relative; width: 780px;
}
#slider * {
    float: none;  
    position: static; 
}
#slider .scroll {
	overflow: hidden !important; padding: 0; height: 560px; width: 780px; position: relative;
}
#slider .scrollContainer {
	position: relative;
}
#slider .panel {
    padding: 0; margin: 0 10px; width: 300px; height: 560px; overflow: visible;
}
#slider .background {
    width: 300px; opacity: .5;
}
#slider .inside {
	margin: -310px 20px; padding: 10px; height: 550px;
}
#slider .inside img {
	display: inline-block; width: 80px; float: left; position: relative; margin-right: 5px;
	border: 1px solid #666;
}
#slider .inside h2 {
    margin: 5px 0 0;
	font-size: 18pt; color: #07447c; font-weight: bold;
}
#slider .small h2 {
    font-size: 12pt; text-transform: uppercase;
}
#slider .inside p {
	margin: 0 0 5px; padding: 0;
	font-size:6pt; line-height: 1.3em; font-weight: normal;
	color: #333;
}
#slider .bold {
    font-weight: bold !important;
}
#slider .scrollButtons {
    position: absolute;
    top: 340px;
    cursor: pointer;
}
#slider .left {
    left: 38px;
    z-index: 10;
}
#slider .right {
    right: 37px;
}
#slider .hide {
    display: none;
}
#ourstory {
    background: #f9eabd;  
}
.hirebridge-frame {
    margin: 10px 0 0;   
}
.InteriorPage {
    margin: 10px 0;
    font-size: 10pt;   
}
.InteriorPage td {
    padding: 5px 0; 
}
.addthis_toolbox {
    width: 750px; clear: left;
}
.InteriorPage {
    width: 740px !important;   
}
.InteriorPage p {
    margin-left: 0;   
}
.InteriorPage,
.InteriorBody,
.InteriorStatus,
.SearchResultRow {
    font-size: 10pt;   
}
.InteriorPage .sort {
    color: #333; font-weight: bold; text-decoration: none;   
}
.InteriorStatus {
    font-weight: bold;   
}
.InteriorLabel{
    width: 100px;
    font-weight: bold; color: #666;
}
.InteriorTable {
    font-size: 11pt;   
}
.InteriorHeader2 {
    font-weight: bold; font-size: 11pt;   
}
td.button2 {
    padding: 0;
    text-align: right;
}
td.button2 a,
td.button2 a:link,
td.button2 a:hover,
td.button2 a:visited {
    padding: 5px; display: block; margin: 0;
    font-weight: bold; color: #ececec; text-align: center; text-decoration: none; font-size: 10pt; text-shadow: 2px 2px 2px #333;
    border: solid 1px #07447c;
    border-radius: 5px; background: url("../images/UI/jquerleftlinks_active.png") no-repeat scroll left -2px #07447c;
}
.InteriorPage td {
    padding: 5px;   
}