/*---- Self-Clearing Floats ----*/
.mod:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

/*---- Fluid Images and Objects ----*/
img,
object,
embed{max-width:100%;}

/*---- Optional Vanity Styles ----*/
img::selection{background:transparent;}
img::-moz-selection{background:transparent;}
@media only screen and (max-device-width:480px) {
	html{-webkit-text-size-adjust:none;}
	a{-webkit-tap-highlight-color:rgba(200,0,0,0.4);}
}


/* ---- Standard Links ---- */
a, a:link, a:visited{color:#779ab4;text-decoration:underline;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;cursor:pointer;}
a:hover, a:active, a:focus{color:#fff;text-decoration:underline;cursor:pointer;}

/*----------------------------------------------------------------------------------*/

body{background-color:#F5EEDB;color:#222;font:normal 100% Helvetica, Arial, Verdana, sans-serif;}
abbr{cursor:help;}

/* ---- Containers ---- */
#main{margin:0 auto;padding:0;width:958px;height:auto;border-left:1px solid #fff;border-right:1px solid #fff;background-color: #fff;}

.intro {width: 958px; margin: 0; height: auto; padding: 0; display: block; clear: both;}

#roadmapcontainer {width: 860px; margin: 0 auto; padding: 0; display: block; clear: both; min-height: 225px;}

#roadmapcontainer img {width: 150px; height: 150px; display: block; margin: 0;}


.producthdr {width: 207px; height: 45px; background-color: #5a5a5a; display: block;}
.producthdr#left {float: left; margin-right: 10px;}
.producthdr#right {float: right; margin: 0;}

.leftcol {width: 207px; min-height: 425px; margin: 10px 10px 0 0; padding: 0; float: left; background-color: #eaeaea;}
.rightcol {width: 207px; min-height: 425px; margin: 10px 0 0 0; padding: 0; float: right; background-color: #eaeaea;} 

/* ---- Hero ---- */
#hero{margin:0 auto;padding:0;width:958px;height:253px;background: url(../imgs/roadmap/hero.jpg) no-repeat; position: relative;}


/* ---- Navigation --- */

a.homebtn {display: block; clear: both; float: right; margin: 0; padding-right: 58px; width: 45px; height: 45px; text-indent: -9999px; white-space: nowrap; background-image: url(../imgs/pgnav/home_btn.png); background-repeat: no-repeat;}
a.homebtn:hover {background-image: url(../imgs/pgnav/home_btn_ovr.png); background-repeat: no-repeat;}
a.homebtn:active {background-image:url(../imgs/pgnav/home_btn_active.png); background-repeat: no-repeat;}

.nav {width: 958px; height: 100px; margin: 0; padding: 0; display: block; clear: both; background-image: url(../imgs/roadmap/roadmap_navbg.jpg); background-repeat: no-repeat;}
.navWrap {width: 860px; margin: 0 auto; padding: 0; display: block; clear: both; height: 100px;}
.nav ul {list-style-type: none;}
.nav ul li{display:inline;}
.nav ul li a {display: block; float: left; width: 172px; height: 100px; margin: 0; padding: 0; text-indent: 100%; overflow: hidden; white-space: nowrap;}

a#eval {background-image: url(../imgs/pgnav/pgNAV_prodeval.png);}
a#eval:hover {background-image: url(../imgs/pgnav/pgNAV_prodeval_ovr.png);}
a#maps {background-image: url(../imgs/pgnav/pgNAV_roadmap_crnt.png);}
a#webi {background-image: url(../imgs/pgnav/pgNAV_webinar.png);}
a#webi:hover {background-image: url(../imgs/pgnav/pgNAV_webinar_ovr.png);}
a#mkt {background-image: url(../imgs/pgnav/pgNAV_mktng.png);}
a#mkt:hover {background-image: url(../imgs/pgnav/pgNAV_mktng_ovr.png);}
a#rma {background-image: url(../imgs/pgnav/pgNAV_rma.png);}
a#rma:hover {background-image: url(../imgs/pgnav/pgNAV_rma_ovr.png);}


/* ---- Typography --- */
   
h1 {font-family: 'robotobold', Arial, Helvetica, sans-serif; font-size: 1.5em; font-weight: normal; color: #333; padding: 150px 0 5px 53px; margin: 0;}
h2 {font-family: 'robotobold', Arial, Helvetica, sans-serif; font-size: 2em; font-weight: normal; color: #FFF; padding: 0 0 0 53px; margin: 0;}
h3 {font-family: 'robotolight', Arial, Helvetica, sans-serif; font-size: 1.25em; color: #FFF; text-align: left; line-height: 45px; margin-left: 10px;}
h4 {font-family: 'robotolight', Arial, Helvetica, sans-serif; font-size: .85em; font-weight: normal; color: #333; padding: 0 0 0 115px; text-decoration: none;}
h5 { margin: 0 0 25px 53px; font-family: 'robotobold', Arial, Helvetica, sans-serif; font-size: 1.5em; font-weight: normal; color: #333;}
h6 { margin: 10px 0; font-family: 'robotobold', Arial, Helvetica, sans-serif; font-size: 1.25em; color: #333;}
.intro p {font-family: 'robotolight', Arial, Helvetica, sans-serif; font-size: 1.25em; font-weight: normal; color: #333; text-align: left; line-height: 1.5em; padding: 50px 50px 25px 50px;}
.leftcol p{font-family: 'robotobold', Arial, Helvetica, sans-serif; font-size: .85em; color: #F57C25; text-align: left; margin: 10px;}
.rightcol p{font-family: 'robotobold', Arial, Helvetica, sans-serif; font-size: .85em; color: #F57C25; text-align: left; margin: 10px;}


ul.col {list-style-type: none; padding: 0; margin: 0 10px;}
ul.col li {margin: ; padding: 0; line-height: 1.5em;}
ul.col li a{text-decoration: none; font-family: 'robotoregular', Arial, Helvetica, sans-serif; font-size: .85em; font-weight: normal; color: #333;}
ul.col li a:hover {color: #F57C25;}

/* --- Table Content ---*/

.maintable {width: 860px; height: auto; margin: 0 auto; display: block; clear: both; padding: 0; background-color: #eee;}
td.familyhdr {width: 209px; height: 40px; font-family: 'robotoregular' Arial, Helvetica, sans-serif; font-size: .85em; text-align: center; color: #333; line-height: 40px; border-right: 1px solid #FFF;}
td.monthshdr { height: 40px; font-family: 'robotoregular' Arial, Helvetica, sans-serif; font-size: .85em; text-align: center; color: #333; line-height: 1.25em; border-right: 1px solid #FFF; vertical-align: middle;}
td.sizehdr {width: 37px; height: 40px; font-family: 'robotoregular' Arial, Helvetica, sans-serif; font-size: .85em; text-align: center; color: #333; line-height: 40px; border-right: 1px solid #FFF;}

.products {width: 860px; height: auto; margin: 0 auto; padding: 10px 0 0 0; display: block; clear: both; border-top: 1px solid #CCC; overflow:hidden;}
.familyCOL {width: 180px; height: 100%; padding: 0; margin: 0; display: block; float: left; text-align: center;}
.familyCOL p {display: block; margin: 0; padding: 0; width: auto; height: auto; font-family: 'robotobold', Arial, Helvetica, sans-serif; font-size: 1.1em; color: #333;}
.monthsCOL {width: 160px; height: 100%; padding: 0; margin: 0; display: block; float: left;}
.sizeCOL {padding: 0; margin: 0; float: left; height: auto; text-align:center;}

.prodName {width: auto; padding-left: 10px; margin: 0; font-family: 'robotoregular' Arial, Helvetica, sans-serif; font-size: .85em; text-align: center; color: #333; line-height: 30px; height: auto;}
.prodName a {text-decoration: none; color: #333;}
.prodName a:hover {text-decoration: underline;}
.prodName a:active {color: #F57C25; text-decoration: none;}
.prodName div.evalbtn {display: block; width: 100px; height: 15px; margin: 5px 5px 5px 0; float: left; background-color: #F57C25; font-family: 'robotoregular', Arial, Helvetica, sans-serif; font-size: .75em; text-align: center; line-height: 15px; color: #FFF;}
.evalbtn a {text-decoration: none; color: #FFF;}
.size {text-align: center; display: block; margin: 0; float: left; height: 30px;line-height: 30px; font-size:14px;}

/* --- Tab Content --- */

#portfolio {width: 860px; height: auto; margin: 0 auto; padding: 0; display: block; clear: both;}

.tabcontents
{
   display: block;
   width: 859px;
   margin: 0;
   clear: both;
   height: auto;
}

.tabcontent
{
    display: block;
	width: 860px;
	margin: 0;
	height: auto;
	padding: 0;
	clear: both;
	height: auto;
}

.tabcontent img.icons {display: block; width: 75px; height: 75px; margin: 10px auto;}
.tabcontent div.featurePROD {display: block; float: left; margin: 0 20px 0 5px; width: auto; height: auto;}
.tabcontent ul {list-style-type: none; padding: 0; margin: 0;}
.tabcontent ul li {margin: 0; padding: 0; line-height: 1em; font-family: 'robotolight', Arial, Helvetica, sans-serif; font-size: 1em; font-weight: normal; color: #333;}
.tabcontent ul li a {}
.tabcontent ul li a:hover {}

ul.tabs
{
    padding: 0;
    margin:0;
    list-style-type: none;
    text-align: center;
    
}
        
ul.tabs li
{

    margin: 0;
	padding: 0;
	display:inline;
}
        
ul.tabs li a
{
	display: block;
	float: left;
	width: 285px;
	height: 50px;
	background-color: #CCC;
	font-family: 'robotoregular', Arial, Helvetica, sans-serif;
	font-size: 1em;
    text-decoration: none;
    z-index: 1;
	line-height: 50px;
    color: #333;
	border-bottom: 1px solid #23C78A;
	border-right: 1px solid #FFF;
}
        
ul.tabs li a:hover
{
    color: #000;
    background: white;
}
        
ul.tabs li.selected a
{
    /*selected tab style */
    top: 0px;
	font-family: 'robotobold', Arial, Helvetica, sans-serif;
    background: #FFF;
    color: #23C78A;
	border-right: none;
	font-size: 1.25em;
	border-top: 1px solid #23C78A;
	border-left: 1px solid #23C78A;
	border-right: 1px solid #23C78A;
	border-bottom: none;
}
                
ul.tabs li.selected a:hover
{
    /*selected tab style */
    text-decoration: none;
}
div.oneCol {
    clear: both;
    margin: 0 0 10px 410px;
    padding: 0;
    width: 445px;
    height: auto;
    overflow: hidden;
}
.main-title {
    position: relative;
    margin: 10px 0 0;
    color: #444;
    font-size: 1.3em;
    text-align: center;
    font-weight: 400;}
.main-title-text {
    position: relative;
    z-index: 2;
    display: inline-block;
    padding: 0 10px;
    background: #fff;
	font-weight:bold;
}	
.main-title:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid #AAA;
}
.eval-disclaimer{
	padding:10px 0 50px 0;
	width:670px;
	margin:0 auto;
	}
.eval-disclaimer span{
	font-size:10px;
	color:#404040;
	vertical-align: -10px;
	margin-left:4px;
	}