/*
http://bloomwebdesign.net/myblog/2012/05/create-a-vertical-accordion-menu-using-css3-tutorial/
*/


html {
    font: 11pt arial, helvetica, sans-serif;
	color:#9dcacf;
	background: #fff url(images/bg-body.png) repeat-x 0px 0px;
	}
body {
	position: relative;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	}
img {
    max-width: 100%;
    }
    
/* Navigation */
#navmobile {
    display:none;
}
#mobilepic {
    display:none;
}
#nav {
    margin:15px 0px 0px 0px;
    padding: 0px 0px 0px 120px;
    max-width: 100%;
    height:44px;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background: url(images/bg-menu.png) repeat-x 0px 0px;
    
    }
#nav ul {
    padding:0;
    margin:0;
    list-style-type: none;
    }
#nav li {
    float:left;
    }
#nav li a {
    padding:15px 0px 0px 0px;
    height: 44px;
    width: 150px;
    display: block;
    text-decoration: none;
    text-align: center;
    color:#fff;
    font:bold 10pt arial, sans-serif;    
    }
#nav li a:hover {
    text-decoration:none;
    top:0px;
    background: url(images/bg-menu-on.png) repeat-x 0px 0px;
    }
/* Sub Menu Styling */
#nav li ul {
    display:none;
    }
#nav li ul a {
    padding-left: 20px;
    height: 25px;
    width: 200px;
    text-align:left;
    border-bottom:1px solid gray;
   }
#nav li:hover ul {
    display:block;
    position:absolute;
    top:118px; 
    background: #0a0a33;
    z-index:100;
    }
#nav li:hover li {
    float:none;
    }
#feature {
     padding:30px 5px 5px 5px;
     margin:0px 0px 10px 0px;
     color:#0a0a33;
     font:14pt arial, sans-serif;
     border-bottom:1px solid #2f62a0;
     font-weight: bold;
    }
.feature-prod-header {
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 10px 0px;
    font-weight:bold;
    }
#feature-prod-left {
	float: left;
	width:470px;
	background:#0a0a33; /* Dark Blue */
	border:2px solid gray;	
	color: #fff;
    padding:20px 5px 20px 20px;
    line-height:20px;
	}
#feature-prod-right {
	float: right;
	width:470px;
	background: #f46905;
	border:2px solid gray;	
	color: #fff;
    padding:20px 5px 20px 20px;
    line-height:20px;
	}
#feature-prod-left a {
    text-decoration:none;
	color: #f46905; /* Dark Orange */
	}
#feature-prod-right a {
    text-decoration:none;
	color:#0a0a33;  /* Dark Blue */
	}
#feature-prod-left a:hover {
    text-decoration:none;
	font-weight:bold;
	}
#feature-prod-right a:hover {
    text-decoration:none;
	font-weight:bold;
	}
#product-page {
    width:100%;
    background:#fff;
    border:1px solid #000;
    margin:50px 0px 0px 0px;
    }
#product-page-section-header {
	font: 20pt arial, helvetica, sans-serif;
	padding:10px 0px 0px 40px;
	margin: 0px 0px 0px 0px;
	color:#0a0a33;
    }
#product-page-header {
	font: 20pt arial, helvetica, sans-serif;
	padding: 20px 0px 0px 40px;
	margin: 0px 0px 0px 0px;
	color:#0a0a33;
    }
#product-page-screen-shots {
    margin:10px 0px 0px 0px;
    }
#post .post-title {
    font: 12pt arial;
    font-style:italic;
    text-decoration:none;
    color:Olive; 
    }
#post .post-info {
    padding: 1px; 
    margin: 0 0 10px 0;
    }
#post .post-info ul {
    background: #e9e9e9;
    list-style: none;
    padding: 10px 20px 10px 10px; 
    overflow: hidden;
    }
#post .post-info ul li.posted-on {
    float: left;
    }
#post .post-info ul li.posted-by {
    float: left;
    margin: 0px 0px 0px 5px;
    padding: 0px 0px 0px 35px;
    }
#post .post-info ul li.read-more {
    float: right;
    }
#post .post-article-title {
    font: 14pt arial; 
    color:Olive; 
    }
#post .post-article-stamp {
    font: 11pt arial; 
    font-style:italic; 
    color:Gray;
    }
#post .post-bio {
    font: 11pt arial;
    font-style:italic;
    color:Gray;
    margin-left:20px;
    }
#sub-footer {
	clear:both;
	text-align:center;
	font:10pt arial, sans-serif;
	padding:10px 0px 10px 0px;
	color:#000;
	}
#sub-footer a:hover  {
    text-decoration:underline;
    color:#ac4800;
    }
#footer {
	clear:both;
	font: 10pt arial, helvetica, sans-serif;
	margin:1px 0px 0px 0px;
	padding:12px 0px 12px 0px;
	color:#000;
	text-align:center;
	border-top:0px solid #ffffff;
	}
#standard-text-display {
	color:#0a0a33;
	margin:0px 0px 0px 0px;
	padding:30px 40px 30px 40px;
	border:0px solid #000;
	font: 11pt arial, arial, helvetica, sans-serif;
	line-height:20px;
	}	
#product-page-text-display {
	color:#0a0a33;
	margin:0px 0px 0px 0px;
	padding:10px 40px 0px 40px;
	border:0px solid #000;
	font: 11pt arial, arial, helvetica, sans-serif;
	line-height:20px;
	}
	
uul.enlarge{
	list-style-type:none; /*remove the bullet point*/
	margin-left:0;
	}
ul.enlarge li{
	display:inline-block; /*places the images in a line*/
	position: relative;
	z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
	margin:10px 10px 0 10px;
	}
ul.enlarge img{
	background-color:#eae9d4;
	padding: 6px;
	-webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	box-shadow: 0 0 6px rgba(132, 132, 132, .75);
	-webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	border-radius: 4px; 
 }
ul.enlarge span{
	position:absolute;
	left: -9999px;
	background-color:#eae9d4;
	padding: 10px;
	font-family: 'Droid Sans', sans-serif;
	font-size:.9em;
	text-align: center; 
	color: #495a62; 
	-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
	-moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
	box-shadow: 0 0 20px rgba(0,0,0, .75);
	-webkit-border-radius: 8px; 
	-moz-border-radius: 8px; 
	border-radius:8px;
	}
ul.enlarge li:hover{
	z-index: 50;
	cursor:pointer;
	}
ul.enlarge span img{
	padding:2px;
	background:#ccc;
	}
ul.enlarge li:hover span{ 
	top: -300px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
	left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
	}
ul.enlarge li:hover:nth-child(2) span{
	left: -100px; 
	}
ul.enlarge li:hover:nth-child(3) span{
	left: -200px; 
	}
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.enlarge img, ul.enlarge span{
	behavior: url(pie/PIE.htc); 
	} 

@media screen and (max-width: 480px) {
    body {
	    position: relative;
	    width: 100%;
	    margin-left: auto;
	    margin-right: auto;
	}
	#mobilepic {
    display:block;
    }

    #nav {
        display:none;
    }
    #navmobile
    {
        display:block;
        list-style: none;
        margin: 0px 0px 0px 0px;
        padding: 0px 0px 0px 0px;
    }
    .navmobile-menu-item {
        display: block;
        height: 30px;
        background: url(images/bg-menu.png) repeat-x 0px 0px;
        font-weight: bold;
        margin: 2px;
        padding: 12px 0px 0px 20px;
    }
    .navmobile-submenu-item {
        display: block;
        padding: 10px 0px 5px 50px;
    }
    #navmobile ul {
        padding: 0px 0px 0px 0px;
        margin: 2px;
        background: darkgray;
        list-style:none;
        display: none;
    }
    #navmobile a {
        text-decoration: none;
        color:#fff;
    }
    #navmobile ul li a {
        font-weight: bold;
    }
    #feature-prod-left {
	    float: none;
    	margin-left: auto;
    	margin-right: auto;
	    width:95%;
	    background:#0a0a33; /* Dark Blue */
	    border:2px solid gray;	
	    color: #fff;
        padding:5px 5px 5px 5px;
        line-height:20px;
	    }
    #feature-prod-right {
	    float: none;
    	margin-left: auto;
    	margin-right: auto;
	    width:95%;
	    background: #f46905;
	    border:2px solid gray;	
	    color: #fff;
        padding:5px 5px 5px 5px;
        line-height:20px;
	    }
    #product-page-screen-shots {
        margin:0px 0px 0px 0px;
        }
    #prod-page-screen-shots img{
        width:100%;
        }
    #standard-text-display img {
        width:100%;
    	}	

}