body {
	background: #000;
}

.border-image {
border:5px solid #000;
}

.divider-clothes {
	background: url(http://www.emeraldsurfwear.com/assets/images/divider-clothes.png) center center no-repeat;
        height:240px;
        width:25px;
}


#bgimg {
	position:absolute;
	z-index: -100;
	margin: 0;
}

.toggle-text {cursor:pointer;}


#content-body{
}

html>body #content-body {
}

#emerald { 
/*this is the area defined to toggle show-hide and also hook for padding the content area from the nav and footer*/
	padding: 25px 0 25px 0;
position: relative; z-index: 1;
display:block;

}



.top-margin { 
	margin-top: 25px;
}


.inner { /*creates 5 pixels of padding to space in black blocks*/
	padding: 8px;
}


.logo {
	margin: 10px 0 0 0;
}


#mastheadWrapper {
	background:  #000;
	padding: 0 0 15px 0;
        width:100%;
}

ul.top-links {
	margin: 0;
	background: #1f1f1f;
	float: right;
	clear: right;
	font-size: 9px;
	text-transform: uppercase;
	height: 30px;
	line-height: 30px;
	padding:0 15px 0 15px;
}

ul.top-links li {
	padding: 0 5px 0 3px;
	list-style: none;
	display: inline;
	border-right: 1px solid #00a985;
}

ul.top-links li.last {
	border: none;
}

ul.top-links li a, ul.top-links li a:visited {
	color: #00a985;
	text-decoration: none;
}

ul.top-links li a:hover, ul.top-links li a.active {
	color: #00a985;
	text-decoration: underline;
}



.toggle-text {
	float:right; 
	color:#000; 
	margin-top: 0
        cursor:pointer;
}



#navWrapper {
	/*background:#66bb99;*/
	background:#333;
	filter: alpha(opacity=85);
	-moz-opacity: 0.85;
	opacity: 0.85;
        width:100%;
position: relative; z-index: 2;

}

#navigation {
	background: url(http://www.emeraldsurfwear.com/assets/images/surf-flag.png) right center no-repeat;;
	float: right;
    
}

#navWrapper ul {
	list-style: none;
	text-transform: uppercase;

	font-size: 0.8em;
	width: 950px;
	margin: 0;
	padding: 10px;
float:left;
}


#navWrapper ul li {
	display: inline;
	padding: 0 0 0 0;
	margin: 0 5px 0 0;
        position:relative;
}

#navWrapper ul li.last {
	border: none;
}


#navWrapper ul li a, #navWrapper ul li a:visited  {
	text-decoration: none;
	color: #fff;
}

#navWrapper ul li a:hover, #navWrapper ul li.active a  {
	text-decoration: none;
	color: #fff;
	border-bottom: 3px solid #fff;
}


#footerWrapper {
	min-height: 200px;
	background: #000;
	margin: 100px 0 0 0;
	padding: 15px;
}



#scroll-container {
	background-color: #000;
	width: 900px;
	padding: 25px;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
	margin: 50px 0 0 0;

        }
        
        /* slider specific CSS */
        .sliderGallery {
            overflow: hidden;
            position: relative;
            padding: 10px;
            height: 350px;
            width: 900px;
            margin: 0;
        }
        
        .sliderGallery ul {
            position: absolute;
            list-style: none;
            overflow: none;
            white-space: nowrap;
            padding: 0;
            margin: 0;
            height: 350px;
        }
        
        .sliderGallery ul li {
            display: inline;
            height: 350px;
        }
        
         .sliderGallery ul li div {
            display: inline;
            height: 350px;
            width: 200px;
        }
        
        .slider {
            width: 450px;
            height: 17px;
            margin: 325px 225px 0 225px;
            position: relative;
            background: url(../images/stripe.png) repeat;
            border: 1px solid #666;
        }
        
        .sliderGallery ul li img {
			margin-bottom: 10px;

        }
        
        .sliderGallery ul li div.caption {
			height: 40px;
			display: none;
			clear: both;
        }
        
        .sliderGallery ul li:hover > div.caption {
			color: #fff;
			text-align: center;
			text-transform: uppercase;
			display: inline;
}
        
        .handle {
            position: absolute;
            cursor: move;
            height: 17px;
            width: 35px;
            top: 0;
            background: #000;
            z-index: 100;
        }
        
        .slider span {
            color: #bbb;
            font-size: 80%;
            cursor: pointer;
            position: absolute;
            z-index: 110;
            top: 3px;
        }
        
        



.change-image {
	float: right;
	margin: 10px 0 0 100px;
}

.change-image a img {
	border: 2px solid #fff;
}

/*Special Font Headings*/

h5.style-heading { 
	color: #fff;
	font-style: italic;
	font-family:"Georgia", Times, serif;
	font-weight: normal;
	font-size: 1em;
	margin-bottom: 3px;
	text-align: right;
}

h5.style-heading span { 
	color: #00a985;
	font-style: normal;
}

h5.style-heading-left { 
	color: #fff;
	font-style: italic;
	font-family:"Georgia", Times, serif;
	font-weight: normal;
	font-size: 1em;
	margin-bottom: 0;
	text-align: left;
}

h5.style-heading-left span { 
	color: #00a985;
	font-style: normal;
}

.black90 h1 { 
	color: #00a985;
	font-style: italic;
	font-family:"Georgia", Times, serif;
	font-weight: normal;
	font-size: 1.2em;
	margin-bottom: 0.5em;
}





/*GLOBAL BLACK OPACITIES*/

.black90 {
	background: #000;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
}

.black100 {
	background: #000;
	filter: alpha(opacity=100);
	-moz-opacity: 1.0;
	opacity: 1.0;
}


/* Easy Slider */

#slider {
	border: 5px solid #000;
}


	#slider ul, #slider li,
	#slider2 ul, #slider2 li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider2{margin-top:1em;}
	#slider li, #slider2 li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:940px;
		height:355px;
		overflow:hidden; 
		}	
			
	/* numeric controls */	

	ol#controls{
		position: relative;
		z-index: 9999;
		top:-40px;
		padding:0;
		height:15px;
		font-size: 9px;
		background: transparent;
		float: right;	
		}
	ol#controls li{
		margin:0 10px 0 0; 
		padding:0;
		float:left;
		list-style:none;
		height:15px;
		line-height:15px;
		}
	ol#controls li a{
		float:left;
		height:28px;
		line-height:28px;
		background:#000;
		color:#fff;
		padding:0 10px;
		text-decoration:none;
		}
	ol#controls li.current a{
		background:#333;
		color:#fff;
		}
	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
	
/* // Easy Slider */


/*Lower Home Slider*/


#navicon-slider {
	height: 240px;
}


	#navicon-slider ul, #navicon-slider li,
	#navicon-slider ul, #navicon-slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#navicon-slider{margin-top:1em;}
	#navicon-slider li, #navicon-slider li{ 
		/* 
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/ 
		width:940px;
		height:355px;
		overflow:hidden; 
		}	
			
#navicon-slider img {
	border: 5px solid #fff;
	margin:11px;
}


/*Scroll Panes*/

.scroll-pane {
	width: 350px;
	height: 250px;
	overflow: auto;
}



.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #666;
}
.jScrollPaneDrag {
	position: absolute;
	background: #333;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}

a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	/*background-color: #666;*/
	height: 9px;
}
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}





/*Button Links Sliders*/







/*FOOTER*/



#footer {
	margin: 25px 0 10px 0;
	padding: 5px 0 5px 0;
background:url(http://www.emeraldsurfwear.com/assets/images/celtic-cross.png) center right no-repeat #000;
}

.footer-links {
	margin: 5px;
	float: left;
	width: 175px;
}
.news-feed{
	margin-top: 5px;
}

.footer-links ul {
	margin: 0;
	list-style: none;
	text-transform: uppercase;
	font-size: 0.9em;
}

.footer-links li {
	list-style: none;
}

.footer-links li a, .footer-links li a:visited  {
	color: #fff;
	text-decoration: none;
	padding: 3px 0 3px 0;
}


.footer-links h4 { 
	color: #fff;
	font-style: italic;
	font-family:"Georgia", Times, serif;
	font-weight: normal;
	font-size: 1.1em;
	margin-bottom: 0.5em;
}

.footer-links h4 span { 
	color: #00a985;
	font-style: normal;
	margin-left: -2px;
}


.news-feed h4 { 
	color: #fff;
	font-style: italic;
	font-family:"Georgia", Times, serif;
	font-weight: normal;
	font-size: 1.1em;
	margin-bottom: 0.5em;
}

.news-feed h4 span { 
	color: #00a985;
	font-style: normal;
	margin-left: -2px;
}

.news-feed ul {
	margin: 0;
	list-style: none;
	text-transform: uppercase;
	font-size: 0.9em;
}


.news-feed ul li {
	list-style: none;

}

.news-feed ul li a, .news-feed ul li a:visited  {
	color: #fff;
	text-decoration: none;
	padding: 3px 0 3px 0;
}



#footer .colborder {padding-right:24px;margin-right:25px;border-right:1px solid #00a985;}





/*========================
 blog styles
*/

/*Blog Entry Typography and Block*/


.blog-entry { 
	background: #000;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
	margin: 0 0 10px 0;
	padding: 8px;
}

.blog-entry h1, .blog-entry a h1 { 
	color: #00a985;
	font-style: italic;
	font-family:"Georgia", Times, serif;
	font-weight: normal;
	font-size: 1.4em;
	margin-bottom: 0.2em;
	text-decoration: none;
}

.blog-entry h4 { 
	color: #fff;
	font-style: normal;
	font-family:"Georgia", Times, serif;
	font-weight: normal;
	font-size: 1.0em;
	margin-bottom: 0.5em;
}

.blog-entry a.read-more { 
	text-transform: uppercase;
	color: #000;
	background: #fff;
	padding: 2px;
	font-size: 0.8em;
	text-decoration: none;
	float: right;
}

.blog-entry a.read-more:hover { 
	text-transform: uppercase;
	color: #fff;
	background: #00a985;
	padding: 2px;
	font-size: 0.8em;
	text-decoration: none;
	float: right;
}

.blog-entry img.main {
	float:left;
	clear: right;
	margin: 4px 10px 0 0;
	border: 3px solid #fff;
}


/*Blog Subnav*/

#subnav h3 {
	font-family: "Arial Black", Arial, sans-serif;
	font-size: 1.0em;
	text-transform: uppercase;
	color: #00a985;
	margin-bottom: 0.5em;
}

#subnav ul {
	margin: 0 0 5px 0;
	list-style: none;
	text-transform: uppercase;
}


#subnav ul li {
	list-style: none;
	padding: 3px;
}

#subnav ul li a, #subnav ul li a:visited  {
	color: #fff;
	text-decoration: none;
}

#subnav ul li a:hover, #subnav ul li a.active  {
	color: #00a985;
	text-decoration: none;
}

/*PAGINATION*/

ul.pagination {
        margin:15px 0 0 0;
	background: #000;
	filter: alpha(opacity=90);
	-moz-opacity: 0.9;
	opacity: 0.9;
        padding:5px;
display:inline;
}

ul.pagination li {
list-style:none;
display:inline;
margin-right:10px;
}

ul.pagination li a, ul.pagination li a:visited  {
        text-decoration:none;
	color: #fff;
	font-family:"Georgia", Times, serif;
	font-weight: normal;
	font-size: 1em;
	margin-bottom: 3px;
	text-align: right;
}

ul.pagination li a:hover  {
        text-decoration:none;
	color: #00a985;
	font-family:"Georgia", Times, serif;
	font-weight: normal;
	font-size: 1em;
	margin-bottom: 3px;
	text-align: right;
}



/*SINGLE PRODUCT STYLES*/

.product-images {
margin:10px;
float:left;
clear:right;
width:350px;
}

.product-info {
margin:10px;
float:right;
clear:left;
width:350px;
}


#product-info h1 {
font-size:1.3em;
text-transform:uppercase;
border-bottom:1px dotted #fff;
margin-bottom:10px;
}

a.more-info {
text-transform:uppercase;
color: #00a985;
text-decoration:none;
}

#moreinfo {display:none;}

#product-info h4 {
font-size:1em;
text-transform:uppercase;
margin-bottom:10px;
}

.styles {
padding:3px 0 3px 0;
}



.listing-gallery {
margin:10px 0 10px 0;
padding:10px 0 5px 0;
border-top:1px dotted #666;
border-bottom:1px dotted #666;
}

.listing-gallery a img  {
border:2px solid #fff;
}





ul.footer-nav {
margin:5px;
width:500px;
}

ul.footer-nav li {
list-style:none;
display:inline;
font-size:0.8em;
text-transform:uppercase;
margin: 0 5px 0 0;
border-right:1px solid #fff;
padding: 0 10px 0 0;
}

ul.footer-nav li.last {border-right:none;}


ul.footer-nav li a, ul.footer-nav li a {text-decoration:none;}



.credits {
color:#fff;
margin:10px 0 10px 0;
font-size:9px;
text-align:right;
text-shadow: 2px 2px 2px #000;
font-family: "Geneva", Tahoma, sans-serif;
text-transform:uppercase;
}


.credits a, .credits a:visited {text-decoration:none;}



p.copyright {
text-align:right;
font-size:0.9em;
color:#666;
}


.grey100 {background:#292023;}





/*SINGLE PRODUCT VIEW*/

.product-images{
text-align:center;
width:350px;
float:left;
}

.product-information {
float:left;
margin:10px;
width:280px;
}


.product-information h3 {
text-transform:uppercase;
margin-bottom:15px;
border-bottom:1px dotted #333;
display:block;
}


.cartbut {
padding:4px;
background:#fff;
color:#000;
cursor:pointer;
text-transform:uppercase;
font-size:0.85em;
border:none;
text-decoration:none;
}


.cartbut:hover {
padding:4px;
background:#00A985;
color:#fff;
cursor:pointer;
text-transform:uppercase;
font-size:0.85em;
border:none;
}

.product-name {text-transform:uppercase;}

.thumb{cursor:pointer;}






.hide-bg {
height:70px;
text-align:right;
}


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

.contact {
  min-height:150px;
  height:auto !important;
  height:150px;
width:280px;
margin:10px;
float:left;
}