/*********** nww-style bop35 web design studio nickswebworks nick sharpe 122310 -010611 ******/

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0b1 | 201101 
   NOTE: WORK IN PROGRESS
   USE WITH CAUTION AND TEST WITH ABANDON */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;font: inherit;vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;}
/* remember to define visible focus styles! 
:focus {outline: ?????;} */

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}del {text-decoration: line-through;}table {border-collapse: collapse;border-spacing: 0;}

/*************************************************** END RESET  ************************************************/

/*** © 2012 NicksWebWorks.com - css by Nick Sharpe updated 080113 *************/

body {margin:0;padding:0;width: 100%;height:100%;font-family: Arial, helvetica, sans serif;color:#323232;}
strong, th, h1,h2,h3,h4,h5,h6 {font-weight: bold;}
em{font-style:italic;font-weight:500;}
h1{font-size:152%;margin:0;padding:0px;}			
h2{font-size: 32px;line-height: 2em;font-family: 'Open Sans', arial, helvetica, sans-serif;color: #444;margin: 10px 0;}
h3{font-size:112%;margin:10px 0 5px 0;padding:0;font-weight:bold;}
h4{font-size:95%;padding:0;font-weight:bold;}
h4 em{font-style:oblique;}
p{font-size:1em;margin:2% 0;padding:0;}
.cca{margin:0;padding:0;color:#19bfff;font-weight:bold;font-size:122%;}
.ccablue{color:#00aeff;}
.bold{font-weight:bold;}
 @font-face {font-family: avenir ; src: url( 'http://www.nickswebworks.com/fonts/avenir_65_medium.otf' ) format("opentype"); }      
    /* Then use it like you would any other font */  
.avenir{font-family: Avenir, Arial, helvetica, sans-serif;  }
.quote{font-size: .9em;font-style: italic;font-family: Georgia, serif;}
.dateline{font: 200 .85em/.8em Georgia, Serif;}
/*************************** LAYOUT *********************************/

#container{position:relative;top:0;margin:0 auto;width:1024px;height:auto;background-color:#fff;}		
#wrapper {position:relative;width:1024px;height:auto; top:0;margin:0 auto;padding:0;}

#header{position:relative;width:100%;height:100px;top:0px;margin:0 auto;padding:0;background-color:transparent; }
.logo{position:relative;top:20px;left:5%;margin:0;padding:0;}/*height:100px;*/
.logo img{width:220px;height:60px;}/*height:60px;*/
.logo h1{position:absolute;top:160px;left:5%;color:#6699ff;font-weight:200;text-indent:-9999px;}
.logo h2{position:absolute;top:150px;right:5%;margin:10px 0 20px;font-style:oblique;font-weight:200;color:#fff;text-indent:-9999px;}

 /* Web Design with SEO in Mind */
.tagline em{position:absolute; top:55px;left:50px;*left:120px;width:220px;height:18px;margin:0;padding:0;color:#424242;font-family:trebuchet;font-weight:100;font-style:oblique;font-size:.8em;display:none;}
.phonebox{position:absolute;top:10px;right: 0;width:480px;height:60px;margin:0 auto;color:#00ccff;font-size:1.5em;font-weight: 700;padding:5px 0px;}


#phone{position:absolute;top:20px;right:10px;color:#1498dc;font-weight: 700;}

ul {list-style-type:none;}
ul.socials{position:relative;top:0px;left:0px;margin:0;padding:0;width:430px;height:40px;}
ul.socials li{display:inline;margin:0 10px 0 0;padding:0;}
ul.socials li a{float:left;text-decoration:none;margin:0 10px 0 0;padding:0;border: none;}
ul.socials li a:hover{color:orange;}

/***************************** TOP NAV UL ******************************** */
ul {list-style-type:none;}
ul#topnav{position:absolute;top:70px;right: -35px;margin:0;padding:0;width:780px;height:20px;}
ul#topnav li{display:inline;margin:0;padding:0 0 3px 0;color:#e8e8e8;font-family:Arial; text-transform:uppercase;font-size:1em;}
ul#topnav li a{float:left;text-decoration:none;padding:0 30px 10px 10px;color:#666;}
ul#topnav li a:hover{color:orange;}						
ul#topnav li.current a{color:#00aeff;font-weight:bold;font-size:1.1em;} 


#valueprop{width: 100%;height:360px;padding: 20px 0px 0px;margin-bottom: 0px;border: 1px solid;background-image:url("http://www.nickswebworks.com/images/blue-vp-bg.png");background-color: #0090CC;}
#slider-wrap{position:relative;top:0;width:1024px;height:340px;margin:0 auto;padding:0;}
#slider-wrap a{color: #fff;text-decoration: none;}
h2{font-size: 32px;font-family: 'Open Sans', arial, helvetica, sans-serif;color: #444;margin: 10px 0 0 0;}

div.laptopBg{position: absolute;top: 0px;left:460px;width: 640px;height: 480px;margin-top: 0px;}

/*************** SLIDER IN LAPTOP CSS *****/

#slider-in-laptop {
  width: 70%;
  height: 200px;
  padding: 2% 15% 7%;
}
#slider-in-laptop .rsOverflow,
#slider-in-laptop .rsSlide,
#slider-in-laptop .rsVideoFrameHolder,
#slider-in-laptop .rsThumbs {
  background: #151515;
}
#slider-in-laptop .rsPreloader {
  background-image:url(../preloaders/preloader-white.gif);
}
.imgBg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
#slider-in-laptop .rsBullets {
  bottom: -25px;
}
.laptopBg {
  position: relative;
  width: 100%;
  height: auto;
}
@media screen and (min-width: 0px) and (max-width: 500px) {
  #slider-in-laptop .rsBullets {
    bottom: -30px;
  }
}

/********* VP Buttons   ********************/
    #slider-wrap h2.vplearn{position: absolute;top:240px;left: 0px;width: 130px;font-style: italic;font-size: 1em;font-weight: 500;}

    #slider-wrap h2.vpstarted{position: absolute;top:240px;left: 200px;width: 180px;font-style: italic;font-size: 1em;font-weight: 100;} 
	
/**************** MAIN *******************/

#main{position:relative;top:0;margin:0 auto;padding:0;width:1024px;height:auto;font-size:1em;line-height:1.2em;background-repeat:no-repeat;}
/*#value-prop{position:relative;top:0;left:0;width:1024px;height:320px;margin:0;padding:8px 0 0 0;}*/
section{width: 100%;height:auto;padding: 0;overflow: hidden;}
section h2{margin-left: 10%;}

#content{position:relative;top:0px;left:0px;margin:0;padding:10px 0;width:1024px;height:auto;font-family:tahoma, sans serif;color:#424242;font-size:.9em;line-height:1.2em;}
#content h1{margin:0px 0 10px 25px;color:#00bffe;}

article.feature-home{width:80%;height:auto;margin:0px auto 30px;padding:5% 0px;}

#box3{position:relative;top:0;left:0;width:1024px;height:380px;margin:0;padding:0;color:#666;text-align:left;}
#box3 h3{font-size: 1.8em;margin-bottom: 20px;color: #0071ef;font-family:Avenir, Arial,Helvetica,sans-serif;font-weight: 600;}
#box3 hr{height:1px;background-color:#0e3c51;}                        
#boxa{position:absolute;top:0;left:10px;}        
#boxb{position:absolute;top:0;left:365px;}        
#boxc{position:absolute;top:0;right:10px;}                                      
#boxa, #boxb, #boxc{width:300px;height:380px;margin:0;padding:0;} 
.orange{margin:0;padding:5px 0 0 5px;height:15px;color:#424242;font-size:1.07em;font-weight:bold;text-transform: uppercase;text-shadow:1px 1px 1px #fff;}

#box3 p{ margin-top:10px;font-size: 1em;line-height: 1.5em;}

#fancy-quote{position:relative;top:30px;margin:30px auto 60px;width:940px;height:60px;padding:30px;}
#fancy-quote p{width:820px;margin: 0 auto;font-size:1.3em;line-height: 1.6em;text-align:center;font-family:Georgia;font-style: italic;}
.fancy-quote{width:80%;margin: 0 auto;font:italic 700 1.3em/1.1em Georgia, serif;}

.feature-home h2{font-weight: 100;}
p.featuretxt{color:#444;text-align:justify;margin:10px 0;padding: 0;font:1em/1.5em Open Sans, Arial, Helvetica, sans-serif;font-weight: 100;}
p.home-txt{font-size: 48px;color: rgb(102, 102, 102);}
.feature-home h3{padding:0 0 0 10px;}
.feature-home h4{padding:0 0 0 10px;}
.feature-home h5{margin-top: 10px;padding:0 0 0 10px;}
.featuretxt{padding:0 0 0 10px;}
.post-img{float:right;width: 50%;margin:0;padding:0;}
.post-img img{width: 100%;}

.post-cnt{width: 50%;height: auto;margin:0 20px 0 0;padding:0 20px;}
.post-cnt p {font-size: .9em;color: #666;margin:20px 0;line-height: 1.3em;}

/************************ LEARN and QUOTE BUTTONS *********************/

p.learn{float:left; font-size:1.2em;margin: 10px;padding:10px;width: auto;height:auto;text-align:center;background-color: #00b52a;box-shadow: 2px 2px 4px #666;border: 1px solid green;}
p.learn a{text-decoration:none;color:#fff;}            
p.learn a:hover{color: orange;}

p.getstarted{float:right; font-size:1.2em;margin: 10px;padding:10px;width: auto;height:auto;text-align:center;background-color: #00b52a;box-shadow: 2px 2px 4px #666;border: 1px solid green;}
p.getstarted a{text-decoration:none;color:#fff;}            
p.getstarted a:hover{color: orange;}
/* ******** END MAIN DIV ****************/

/******************CSS3 BUTTONS ****************
.getstarted a{color: #fff;text-decoration: none;font-size:14px;padding:10px;margin:30px 0;width: auto;height:auto;text-align:center;background-color: #00b52a;}	
.getstarted a:hover{box-shadow: 4px 4px 8px #999;}*/
.getstarted{float:right; font-size:1.2em;margin: 10px;padding:10px;width: auto;height:auto;text-align:center;background-color: #00b52a;box-shadow: 2px 2px 4px #666;border: 1px solid green;}
.getstarted a{text-decoration:none;color:#fff;}            
.getstarted a:hover{color: orange;}

	
div#footer{position:relative;top:20px;left:0;width: 100%;height:200px;padding:0;background-color:#e1e1e1;}			
#footer p{color:#24749f;margin:5px;font-size: .75em;letter-spacing: 2px;text-align:center;padding: 10px 2px 10px 2px;}
#footer a:link{color:#24749f;}			
#footer a:visited{color: #0060ff;}
#footer a:hover{color: #00FFFF;}
#footer p img{vertical-align:sub;}
footer{position:relative;top:20px;left:0;width: 100%;height:200px;padding:0;background-color:#e1e1e1;}			
footer p{color:#24749f;margin:5px;font-size: .75em;letter-spacing: 2px;text-align:center;padding: 10px 2px 10px 2px;}
footer a:link{color:#24749f;}			
footer a:visited{color: #0060ff;}
footer a:hover{color: #00FFFF;}
footer p img{vertical-align:sub;}
/************************************** QUICK-LINKS *******************************************/

#quick-links{margin:0 auto;font:9px Verdana,Arial,Helvetica,sans-serif;color:#4f5773;text-decoration:none;vertical-align:top;text-align:center;width:840px;height:40px;}
#quick-links a,#quick-links a:hover,#quick-links a:active,#quick-links a:visited{color:#4f5773;}

/*************************************** FOOTNAV  ********************************************/
		
ul{list-style-type:none;}
ul#footnav{position:relative;top:10px;margin:0 auto;width:80%;height:auto;padding:0;overflow: hidden;}
ul#footnav li{float:left;margin:0;padding:0 0 3px 0;color:#3d73b3;font-family:Arial; text-transform:uppercase;font-size:.8em;}
ul#footnav li a{text-decoration:none;padding:0 10px 10px 10px;}
ul#footnav li a:hover{color:#ffc19f;text-shadow:1px 1px 1px #000;}						
ul#footnav li.current a{color:#6699ff;font-weight:bold;} 
ul#footnav li a:visited {color: #24749f;}
			
/* #Media Queries
================================================== =====================================================================================*/

@media only screen and (max-width:767px) {body { width: auto; }
	.shell { width: 100%; margin: 0 auto;  }
        #container{position:relative;top:0;margin:0 auto;width:90%;height:auto;background-color:#fff;}		
        #wrapper {position:relative;width:100%;height:auto; top:0;margin:0 auto;padding:0;}
        
	#header{position: relative; top: 0;left: 0;margin: 0;padding:0; width:100%;height: 30px;}
	.logo {position: relative;top: 0;left: 0; display: block; margin: 0; padding: 0 0 0 0;height:30px;width: 200px;}
        .logo img{width:200px;height:30px;}/*height:60px;*/
        .logo h1{display: none;}
        .logo h2{display: none;}
        #tagline{display: none;}
/**/    .phonebox{display: none;}

	/*.search { display: none; }*/
/*.search{position: relative;top: 0;left:40px;width: 240px;}
.search .addy{display: none;}*/
        ul#topnav{display: none;}

	/*#navigation { padding: 0 0 0 0; height: 36px; }
	#navigation a.nav-btn { display: block; font-size: 13px; line-height: 36px;  padding-top: 0px; height: 28px; padding-left: 22px; text-transform: uppercase; color: #2b9208; font-size: 13px; font-family: 'Ubuntu', sans-serif; font-weight: 700; }
	#navigation a.nav-btn:hover { text-decoration: none; }
	#navigation a.nav-btn span.arr { background: url(images/nav-arr.png) no-repeat 0 0; width: 13px; height: 9px; position: absolute; right: 14px; top: 12px; }
	#navigation a.nav-btn span.arr.active { background: url(images/nav-arr.png) no-repeat 0 bottom; }

	#navigation { position: relative; z-index: 1000; }
	#navigation ul { display: none; position: absolute; top: 36px; left: 0;  width: 100%;}
	#navigation ul li { display: block; line-height: 36px !important; float: none; background: url(images/navigation.png) repeat 0 0;  }
	#navigation ul li a { padding: 0 22px; }
	#navigation ul li.first a { padding-left: 26px; display: none;}*/
        
        
        #valueprop{width: 100%;height:300px;padding: 0px 0px 0px;margin-bottom: 0px;border: 1px solid;background-image:url("http://nickswebworks.com/images/blue-vp-bg.png");background-color: #0090CC;}
        #slider-wrap{position:relative;top:0;width:100%;height:280px;margin:0;padding:0;}
        h2{font-size: 36px;font-family: Avenir, arial, helvetica, sans-serif;color: #0071ef;margin: 10px 0 0 0;}
        #slider-wrap h3{display: none}
        div.laptopBg{float:none;width: 320px;height: 160px;margin-top: 5px}
        h2.vplearn{width: 80px;}
        section.box3{height: auto;}
       #box3{position:relative;top:0;left:0;width:100%;height:auto;margin:0;padding:0;color:#666;text-align:left;}
        #box3 h3{font-size: 1.8em;margin-bottom: 20px;color: #0071ef;font-family:Avenir, Arial,Helvetica,sans-serif;font-weight: 600;}
        #box3 hr{height:1px;background-color:#0e3c51;}                        
        #boxa{position:relative;top:0;left:10px;}        
        #boxb{position:relative;top:0;left:10px;}        
        #boxc{position:relative;top:0;left:10px;}                                      
        #boxa, #boxb, #boxc{width:300px;height:350px;margin:0;padding:0 0 30px 0;}
        
        /************ FEATURE HOME *******************************/
        
        .feature-home{width:100%;height:auto;margin:0 0 30px;padding:50px 10px 10px;}
      /* #fancy-quote{position:relative;top:20px;margin:30px auto 60px;width:240px;height:60px;padding:30px;}*/
	article.feature-home{width:90%;height:auto;margin:0px auto 5%;padding:5% 0px;}

        div.feature-home h2{font-weight: 100;}
        p.featuretxt{color:#666;text-align:left;margin:10px 0;padding: 0px 27px 20px 0px;font:18px/24px Arial, Tahoma, sans-serif;font-weight: 100;}
        p.home-txt{font-size: 48px;color: rgb(102, 102, 102);}
        .feature-home h3{padding:0 0 0 10px;}
        .feature-home h4{padding:0 0 0 10px;}
        .feature-home h5{margin-top: 10px;padding:0 0 0 10px;}
        .featuretxt{padding:0 0 0 10px;}
        .feature-home p{color:#666;text-align:left;margin:10px 0;padding:0;font:normal 300 1em/1.1em 'Open Sans', Arial, Tahoma, sans-serif;}

            .post-img{float:none;width: 90%;margin: 0 auto;padding: 0;}
            .post-img img{width: 80%;}
            .post-cnt{width:90%;}
	    
	.testimonial h2 { font-size: 21px; }
	.testimonial p.author { text-align: center; }

	.socials { background: url(images/socials-bg.png) repeat-x 0 0;  padding-bottom: 20px;  height: 100%; }
	.socials-inner { padding-left: 10px; }
	.socials h3 { float: none; display: block; }
	.socials ul li { display: block; float: none; line-height: 30px;  }
	.socials ul li a { display: block; float: none; }
	.socials ul li a span { top: 4px; }
	
	ul#footnav{width:80%;height:auto;padding:0;border: 1px solid;overflow: hidden;}

	#footer h2 { padding-bottom: 12px; }

}

@media only screen and ( max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi)  { 

	#navigation a.nav-btn span.arr { background: url(images/nav-arr@2x.png) no-repeat 0 0; -webkit-background-size: 13px 18px; -moz-background-size: 13px 18px; background-size: 13px 18px; }
	#navigation a.nav-btn span.arr.active { background: url(images/nav-arr@2x.png) no-repeat 0 bottom; -webkit-background-size: 13px 18px; -moz-background-size: 13px 18px; background-size: 13px 18px; }
	.search{position: relative;top: 0;margin: 0 auto;text-align: center;}
	.logo {left: 0%; background: url(images/nicksww-logo-hip1-180x46.png) no-repeat 0 0; -webkit-background-size: 81px 23px; -moz-background-size: 81px 23px; background-size: 81px 23px;  }
}