/*
 *  StoneRock Construction Inc.
 *  Master CSS
 *  Author : MJAD Advertising + Design, http://masarjohnston.com/
 *  rev 20110918, MJAD - msl
 *  rev 20220901, MJAD - upgraded code, msl
 *
 */
 
 
/*  RESET  */
* { margin:0; padding:0; list-style-type:none; }
html { width:100%; height:100%; margin:0; padding:0; background:#412b25 url(bg.jpg) repeat-y center 0px; font-weight:400; font-family:Helvetica, Arial, sans-serif; }
body { margin:0; padding:0; }
a, object, :focus { border:none; -moz-outline-style:none; outline:none; }
a, a:link, a:visited { text-decoration:none; }
	a:hover, a:active { text-decoration:underline; }
h1 { font-size:24px; padding:0 0 6px 0; text-align:left; }
h2 { font-size:20px; padding:0 0 6px 0; text-align:left; }
h3 { font-size:18px; padding:0 0 6px 0; text-align:left; }
h4 { font-size:16px; padding:0 0 4px 0; text-align:left; }
h5 { font-size:13px; padding:0 0 4px 0; text-align:left; }

p, blockquote, ul, .Bullets { font-size:12px; line-height:1.8em; text-align:left; }
p { margin-bottom:1.625em; }
ul, ol { margin:0 0 1.625em 2.5em; }
ul { list-style:square; }
ol { list-style-type:decimal; }
ol ol { list-style:upper-alpha; }
ol ol ol { list-style:lower-roman; }
ol ol ol ol { list-style:lower-alpha; }
ul ul, ol ol, ul ol, ol ul { margin-bottom:0; }
dl { margin:0 1.625em; }
dt { font-weight:bold; }
dd { margin-bottom:1.625em; }
strong, b { font-weight:bold; }
cite, em, i { font-style:italic; }
blockquote em, blockquote i, blockquote cite { font-style:normal; }
blockquote cite { color:#666; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; }
pre { background: #f4f4f4; font:13px "Courier 10 Pitch", Courier, monospace; line-height:1.5; margin-bottom:1.625em; overflow:auto; padding:0.75em 1.625em; }
code, kbd { font:13px Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; }
abbr, acronym, dfn { border-bottom:1px dotted #eee; cursor:help; }
address { display:block; margin:0 0 1.625em; }
ins { background:#fff9c0; text-decoration:none; }
sup, sub { font-size:10px; height:0; line-height:1; position:relative; vertical-align:baseline; }
sup { bottom:1ex; }
sub { top:0.5ex; }
hr { background-color:#ccc; border:0; height:1px; margin-bottom:1.625em; }
img, a img { border:none; -moz-outline-style:none; outline:none; }


/*  Embed webfonts  */
@font-face {
	font-family:'Abel';
	font-weight:400;
	src:url('fonts/Abel-Regular.eot'); /* EOT = proprietary IE format */
 	src:local('Abel'), url('fonts/Abel-Regular.ttf') format('truetype'); /* Everybody else */
}
@font-face {
	font-family: 'Oswald';
 	font-weight:400;
	src: url('fonts/Oswald.eot'); /* EOT = proprietary IE format */
	src:local('Oswald'), url('fonts/Oswald.ttf') format('truetype'); /* Everybody else */
}


/*  COLORS  */
.gold    { color:#f4A428; }
.orange  { color:#f2882c; }
.brown   { color:#412b25; }
.black   { color:#000000; }
.grey    { color:#444444; }
.white   { color:#ffffff; }
::selection  { background:#f2882c; color:#ffffff; }
::-moz-selection { background:#f2882c; color:#ffffff; }
::-webkit-selection { background:#f2882c; color:#ffffff; }


/*  FONTS  */
h1, h2, h3, h4, h5 { font-family:'Oswald', Helvetica, Arial, sans-serif; font-weight:400; clear:both; }
.nav { font-family:'Oswald', Helvetica, Arial, sans-serif; font-weight:400; letter-spacing:3px; }
p, blockquote, form, ul, ol, li, .ftr { font-family:Helvetica, Arial, sans-serif; font-weight:400; }


/*  PAGE  */
#wrapper { width:100%; height:100%; vertical-align:top; text-align:center; }
	#livearea { width:960px; margin:0 auto; padding:0;  }
		p a, p a:link, p a:visited { color:#444; text-decoration:underline; }
			p a:hover, p a:active { color:#f2882c; text-decoration:underline; }
		.hdr { width:960px; text-align:center; background-color:#f4A428; margin:36px 0 0 0; padding:0; }
			.logo { width:195px; height:85px; padding:9px; border:none; outline:none; }
		.content { position:relative; width:960px; height:500px; margin:10px 0 0 0; padding:0; background:#666; }
		.nav { width:940px; color:#72635f; text-align:center; margin:0; padding:10px; }
			.nav a { margin:0 10px; }
				.nav a:link, .nav a:visited { color:#72635f; text-decoration:none; }
				.nav a:hover, .nav a:active { color:#f2882c; text-decoration:underline; }
				.nav a.active:link, .nav a.active:visited { color:#fff; }
		.ftr { width:940px; color:#cccccc; font-size:9px; text-align:right; margin:0; padding: 0 10px 10px 10px; }
			.ftr a:link, .ftr a:visited { color:#cccccc; text-decoration:none; }
			.ftr a:hover, .ftr a:active { color:#f2882c; text-decoration:underline; }
	#StoneRockConstructionServices { width:940px; height:48px; display:block; text-align:left; text-indent:960px; white-space:nowrap; overflow:hidden; }


/*  SLIDESHOWS  */
#holder { position:relative; width:960px; height:500px; margin:0; padding:0; overflow:hidden; }
#slider { position:absolute; left:0; top:0; width:960px; height:500px;  }
	#slider img { position:absolute; top:0; left:0; opacity:0.0; outline:none; border:none; }
		#slider img.actv { opacity:1.0; z-index:900; }
		#slider img.last-active { z-index:800; }

/* Tiny Scrollbar */
#scrollbar1 { width:950px; padding:0px; margin:0px 0px 0px 10px}
	#scrollbar1 .viewport { width:900px; height: 480px; overflow:hidden; padding:10px 0px; position:relative; }
	#scrollbar1 .overview { list-style:none; position:absolute; left:0; top:0; margin:20px 0px;  }
	#scrollbar1 .scrollbar{ background:#CCC; position:relative; background-position:0 0; float:right; width:15px; }
	#scrollbar1 .track { background:#CCC; height: 100%; width:13px; position:relative; padding:0 1px; }
	#scrollbar1 .thumb { background:#666; height:20px; width:15px; cursor:pointer; overflow:hidden; position:absolute; top:0; left:0px; }
		#scrollbar1 .thumb .end { background:#666; overflow:hidden; height:5px; width:15px; }
	#scrollbar1 .disable { display:none; }

/* FORMS */
input[type=text], input[type=password], textarea { background:#fafafa; -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1); -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.1); box-shadow:inset 0 1px 1px rgba(0,0,0,0.1); border:1px solid #ddd; color:#888; }
	input[type=text]:focus, textarea:focus { color:#373737; }
textarea { padding-left:3px; width:98%; }
input[type=text] { padding:3px; }
input#s { background:url(images/search.png) no-repeat 5px 6px; -moz-border-radius:2px; border-radius:2px; font-size:14px; height:22px; line-height:1.2em; padding:4px 10px 4px 28px; }
input#searchsubmit { display:none; }


/**
* The dimensions of the gallery components are gathered here for easy modification.
* Other styles for these elements can be found below.
* Edit this part after having a look at the help file.
*/
.vion-gallery { height: 500px; width: 960px; } /* The dimensions of the main gallery */
.vion-gallery div.slide { width: 960px; }
.vion-gallery div.slide .image-holder { width: 960px; height: 391px; } /* The dimension of your images. */
.vion-gallery div.thumbnails { height: 56px; width: 960px; } /* The dimensions of the thumbnail scroller. */
.vion-gallery div.thumbnails ul li img { height: 50px; width: 75px; } /* The dimension of your thumbnails. */

/**
* Reset gallery components.
*/
.vion-gallery img,
.vion-gallery h2,
.vion-gallery p,
.vion-gallery ul,
.vion-gallery ul li {
    margin: 0;
    padding: 0;
}

/**
* Styles for the main gallery frame. Edit this to change the background color, 
* paddings etc.
*/
.vion-gallery {
    position: relative;
    background: #000;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
}

/**
* Styles for the slides DIV.
*/
.vion-gallery div.slides {
    width: 999999px; /* A temporary large value for the startup to avoid the layout problems in some browsers. This value will be updated when the JS file is loaded. Do not modify.*/
    float: left;
}

/**
* Styles for the gallery mask.
*/
.vion-gallery div.gallery-mask {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/**
* Edit margin-left to adjust the spacing between slides.
*/
.vion-gallery div.slide {
    position: relative;
    float: left;
    margin-left: 10px;
}

/**
* Reset the margin-left for the first slide.
*/
.vion-gallery div.slide:first-child {
    margin-left: 0;
}

    /**
    * Styles for the image-holder. The image background color can be set here.
    */
    .vion-gallery div.slide .image-holder {
        background: #303030;
        opacity: 1; /* Do not edit. */
        filter: alpha(opacity=100); /* Do not edit */
        overflow: hidden;
        cursor: pointer;
    }
    
    .vion-gallery div.slide .image-holder img { margin-top:-54px; }
    
    /**
    * Set the cursor to default for the selected slide.
    */
    .vion-gallery div.slide.selected .image-holder {
        cursor: default;
    }
    
    /**
    * Styles for the img element.
    */
    .vion-gallery div.slide img {
        opacity: 0; /* Do not edit. */
        filter: alpha(opacity=0); /* Do not edit. */
        float: left;
    }
    
    /**
    * Styles for the info section.
    */
    .vion-gallery div.slide .info {
        clear: both;
        opacity: 0;
        filter: alpha(opacity=0);
        padding: 5px 10px 10px 5px;
    }

        .vion-gallery div.slide .info h2 {
            font: bold 12px Helvetica, Arial, sans-serif;
            color: #FFFFFF;
            margin-bottom: 2px;
			text-align: left;
        }

        .vion-gallery div.slide .info p {
            font: 11px Arial, Helvetica, Arial, sans-serif;
            color: #FFFFFF;
            line-height: 13px;
			text-align: left;
        }
        
/**
* Styles for the thumbnails section. The dimensions of the thumbnail scroller
* can be found at the top of the styles file. Edit the dimensions if you need
* a different thumbnail size.
*/
.vion-gallery div.thumbnails {
    position: relative;
    clear: both;
    overflow: hidden;
    margin: auto;
    margin-top: 0px;
}

    .vion-gallery div.thumbnails ul {
        position: relative;
        float: left;
        padding: 3px; /* This should be equal to the indicator's border size. See below. */
        list-style: none;
        width: 999999px; /* A temporary large value for the startup to avoid the layout problems in some browsers. This value will be updated when the JS file is loaded. Do not modify.*/
    }

        .vion-gallery div.thumbnails ul li {
            margin-left: 3px; /* Spacing between the thumbnails. */
            float: left;
            cursor: pointer;
            opacity: 0; /* Do not edit. */
            filter: alpha(opacity=0); /* Do not edit. */
        }

        .vion-gallery div.thumbnails ul li.selected {
            cursor: default;
        }

        .vion-gallery div.thumbnails ul li:first-child {
            margin-left: 0;
        }
        
    /**
    * Styles for the indicator. You can change the border size and color here.
    * See the instructions below.
    */
    .vion-gallery div.thumbnails .indicator {
        position: absolute;
        border: 2px solid #f2882c; /* Update the padding for the ul above after modifying the size. */
        margin: -2px 0 0 -2px; /* These margins should be equal to the border size. */
        z-index: 1;
    }

/*  Local styles set for project galleries */
.vion-gallery div.slides { z-index:999998; }
	.slide .info h5 { color:#f2882c; }
	.slide .info p, .slide .info a { color:#fff; }
	.slide .info a, .slide .info a:link, .slide .info a:visited { text-decoration:none; cursor:pointer; }
	.slide .info a:active, .slide .info a:hover { color:#c8834c; text-decoration:underline; }
.new-project { position:absolute; bottom:132px; left:20px; margin:0; padding:6px; opacity:0.8; z-index:999999; color:#fff; }
.back { position:absolute; top:404px; right:6px; margin:0; padding:3px; }
		.back a, .back a:link, .back a:visited { display:block; color:#fff; font: 0.7em / 1.2em Arial, Helvetica, sans-serif; text-decoration:none; cursor:pointer; }
			.back a:active, .back a:hover { color:#c8834c; text-decoration:underline; }
.shadowed { -webkit-text-shadow:2px 2px 6px #000; -moz-text-shadow:2px 2px 6px #000; text-shadow:2px 2px 6px #000;}