* { margin: 0; padding: 0; outline: 0; }

html                {background-image:url(../img/tilebg.jpg); background-repeat:repeat-y; background-position:top center; margin-top:0px; height:100%; background-color:#000;}
body                {font-size:16px; font-family:'roboto', sans-serif; font-weight:300; color:#FFC; line-height:22px; min-width:100%; background-image:url(../img/background.jpg); background-repeat:no-repeat; background-position:top center; margin-top:0px;}
html>body           {min-height: 1300px; height: 100%;}

/* === Fonts === */
h1 { font-size: 28px; color:#FF9; font-family: 'Roboto', sans-serif; font-weight:300; padding-bottom:10px; }
a { color: #3671a9; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a img { border: 0; }
a.more { background: url(images/green-arr.png) no-repeat 0 5px; padding-left: 11px; color: #72ae13; text-decoration: underline; font-size: 12px; }
a.more:hover { text-decoration: none;  }

.subtext	{font-size:10px; font-family:'PT Sans', sans-serif; font-weight:normal; color:#555555; line-height:13px; min-width:100%;}

article, aside, details, footer, header, menu, nav, section { display: block; }
input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

.shell { width: 1100px; margin: 0 auto; }

.header { padding-bottom:0px;}
.header .shell { padding: 0; width: 1100px; }
.header-top { height: 450px;  }

/* === Menu === */
#navigation { margin-top:28px; padding-top:13px; padding-bottom:13px; margin-left:65px; }
#navigation ul { list-style: none; list-style-position: outside;  }
#navigation ul li { display: inline; padding-right:310px; }
#navigation ul li.last { display: inline; padding-right: 0px; }
#navigation ul li a { font-size:24px; color:#fff; font-family: 'Roboto', sans-serif; font-weight:300; }
#navigation ul li a:hover {text-decoration:none; font-weight:300; color:#FF9 }
#navigation ul li.active a {color:#fff; }
#navigation ul li.active a {color:#fff; }

/* === Graphics === */
#logo 		{ width:561px; font-size:0; line-height:0;}
#logo a 	{ height:353px; display: block; background:url(../img/musin-n-schmoozin.png) no-repeat 0 0; text-indent: -4000px; }
#stephpic	{ width:177px; height:260px; float:left; padding-right:10px; border:0px; }
#sharipic	{ width:177px; height:260px; float:right; padding-left:10px; border:0px; }

/* === Layout === */
#hub		{ width:320px; height:25px; float:right; margin-top:5px; margin-right:10px; }
#socialbox	{ width:100px; height:40px; margin-top:10px; margin-left:46%; }
#stephbox	{ width:100%; max-width:1040px; min-height:260px; height:auto; margin-left:7px; margin-right:50px; padding:20px; background-color:#000; border-radius:15px; margin-bottom:20px; }
#sharibox	{ width:100%; max-width:1040px; min-height:260px; height:auto; margin-left:7px; margin-right:50px; padding:20px; background-color:#000; border-radius:15px; }

.main { padding: 25px 0 0px 0; }
.main section { padding-bottom: 10px; margin-bottom: 20px;  }
.main .content { margin-top:0px; }
.main .content span { text-decoration: underline; }

#footer { background-color:none; }
#footer .shell { padding: 26px 0; }
#footer .footer-cols { padding: 0 32px 26px;  }
#footer .col p { font-size:12px; color:#000; font-family: 'Roboto', sans-serif; font-weight:300;  } 

#footer .footer-bottom { padding: 0px 32px 0;  }

#footer .footer-bottom p.copy { font-size:12px; color:#000; font-family: 'Roboto', sans-serif; font-weight:300; }
#footer .footer-bottom p.copy span { padding: 0 8px; }
#footer .footer-bottom p.copy a { font-size:12px; color:#000; font-family: 'Roboto', sans-serif; font-weight:300; }
#footer .footer-bottom p.copy a:hover { font-size:12px; color:#000; font-family: 'Roboto', sans-serif; font-weight:300; }

.footertext 			{font-size:12px; color:#000; font-family: 'Roboto', sans-serif; font-weight:300;}
.footertext a			{font-size:12px; color:#000; font-family: 'Roboto', sans-serif; font-weight:300;}
.footertext a:hover 	{font-size:12px; color:#000; font-family: 'Roboto', sans-serif; font-weight:300; }

#navigation a.nav-btn { display: none;  }


/* #Media Queries
================================================== */

/* tablet portrait */
@media only screen and ( min-width: 768px) and ( max-width: 980px ) {

html                {background-image:url(../img/tilebg-t.jpg); background-repeat:repeat-y; background-position:top center; margin-top:0px; height:100%; background-color:#000;}
body                {font-size:16px; font-family:'roboto', sans-serif; font-weight:300; color:#FFC; line-height:22px; min-width:100%; background-image:url(../img/background-t.jpg); background-repeat:no-repeat; background-position:top center; margin-top:0px;}
html>body           {min-height: 1300px; height: 100%;}
.shell 		{max-width:748px; }
.header-top { height: 325px;  }

/* === Menu === */
#navigation { margin-top:25px; padding-top:13px; padding-bottom:13px; margin-left:15px; }
#navigation ul { list-style: none; list-style-position: outside;  }
#navigation ul li { display: inline; padding-right:190px; }
#navigation ul li.last { display: inline; padding-right: 0px; }
#navigation ul li a { font-size:24px; color:#fff; font-family: 'Roboto', sans-serif; font-weight:300; }
#navigation ul li a:hover {text-decoration:none; font-weight:300; color:#FF9 }
#navigation ul li.active a {color:#fff; }
#navigation ul li.active a {color:#fff; }

/* === Graphics === */
#logo 		{ width:400px; font-size:0; line-height:0;}
#logo a 	{ height:252px; display: block; background:url(../img/musin-n-schmoozin-t.png) no-repeat 0 0; text-indent: -4000px; }
#stephpic	{ width:177px; height:260px; float:left; padding-right:10px; border:0px; }
#sharipic	{ width:177px; height:260px; float:right; padding-left:10px; border:0px; }

/* === Layout === */
#hub		{ width:320px; height:25px; float:right; margin-top:5px; margin-right:10px; }
#socialbox	{ width:100px; height:40px; margin-top:10px; margin-left:44%; }
#stephbox	{ width:100%; max-width:748px; min-height:260px; height:auto; margin-left:-20px; margin-right:50px; padding:20px; background-color:#000; border-radius:15px; margin-bottom:20px; }
#sharibox	{ width:100%; max-width:748px; min-height:260px; height:auto; margin-left:-20px; margin-right:50px; padding:20px; background-color:#000; border-radius:15px; }

.main section { padding-bottom: 50px; margin-bottom: 20px; }
.main .content { padding-left: 20px; padding-right: 20px; margin-top:20px; }
.main .aboutcontent { padding-left: 20px; padding-right: 20px; margin-top:140px; }

#servicesmain	{background-color:#dedede; margin-top:32px; }
#servicescontent{margin-top:-25px; }

#aboutmain		{background-color:#dedede; margin-top:32px; }
#aboutcontent	{margin-top:-25px; }

#formbox	{width:320px; float:right; margin-top:-40px; margin-right:0px; }

#footer .footer-cols { padding-left: 20px; padding-right: 20px;  }
#footer .footer-cols .col { width: 165px; }
#footer .footer-cols .col + .col { padding-left: 16px; }
#footer .footer-bottom { padding-left: 20px; padding-right: 20px; }
}

/* mobile phone */
@media only screen and ( max-width: 767px) { 
body {min-width:320px; height: 100%; background: url(../img/background-m.jpg) no-repeat top center; -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; background-size:800px;  }
.shell { max-width: 320px; }

/* Layout */
.header .shell { padding: 0 0 0 0; } 
.header-top { padding: 12px 0 0px 0; }
.header-top { height: 230px;  }
#hub	{ display:none; visibility:hidden; }
#socialbox	{ width:100px; height:40px; margin-top:10px; margin-left:35%; }

/* Graphics */
#logo { width:300px; font-size: 0; line-height: 0; float: none; margin:0 auto; margin-top:-10px; margin-left:0px; }
#logo a { height: 189px; display: block;  background:url(../img/musin-n-schmoozin-m.png) no-repeat 0 0; text-indent: -4000px;  margin-top:0px;}
#stephpic	{ width:177px; height:260px; float:left; padding-right:10px; border:0px; }
#sharipic	{ width:177px; height:260px; float:right; padding-left:10px; border:0px; }

/* === Layout === */
#stephbox	{ width:100%; max-width:300px; min-height:260px; height:auto; margin-left:-20px; margin-right:50px; padding:20px; background-color:#000; border-radius:15px; margin-bottom:20px; }
#sharibox	{ width:100%; max-width:300px; min-height:260px; height:auto; margin-left:-20px; margin-right:50px; padding:20px; background-color:#000; border-radius:15px; }

#navigation { float: none; display: block; position: relative; background: url(images/m-navigation.png) no-repeat 0 0; z-index: 1000; margin: 30px 0px 0 10px; height: 32px; padding-top: 0; border:0px; }
#navigation a.nav-btn { display: block; height: 32px; padding-left: 13px; line-height: 32px; width: 286px; margin: 0 auto; background: url(images/nav-btn.png) no-repeat right 0; font-size: 15px; color: #fff; font-size: 17px; font-family: 'Roboto'; font-weight: 400; position: relative; z-index: 100;}
#navigation a.nav-btn:hover { text-decoration: none; }
#navigation a.nav-btn span { background: url(images/nav-arr.png) no-repeat 0 0; width: 10px; height: 7px; position: absolute; top: 13px; right: 13px; } 
#navigation a.nav-btn span.active { background-position: 0 bottom;  }
#navigation ul { display: none; position: absolute; width: 298px; background: #100f11; top: 22px; left: 0px; padding-top: 20px; border-radius: 0 0 7px 7px; -moz-border-radius: 0 0 7px 7px; -webkit-border-radius: 0 0 7px 7px; -o-border-radius: 0 0 7px 7px; }
#navigation ul li { float: none; display: block; padding-left: 0; padding-bottom: 7px; }
#navigation ul li a { display: block; padding-left:10px; font-size:18px; color:#fff; font-family: 'Roboto', sans-serif; font-weight:300;}
#navigation ul li.home { display: none;  } 
	
.main section { padding-bottom: 30px; margin-bottom: 20px; }
.main .content { padding-left:10px; padding-right:10px; margin-top:0px; }

#footer .footer-cols { padding-left: 10px; padding-right: 10px; }
#footer .footer-cols .col { width: 100%; float: none; display: block; padding-bottom: 20px;  }
#footer .footer-cols .col + .col { padding-left: 0px; }

#footer .footer-bottom p.copy { float:right; line-height:16px; font-size:13px; color:#aaa7a7; text-align:center; }
#footer .footer-bottom p.copy span { padding: 0 8px; }
#footer .footer-bottom p.copy a { color: #aaa7a7; text-decoration: none; }
#footer .footer-bottom p.copy a:hover { color: #fff; text-decoration: none; }

#footer .footer-bottom { padding-left: 10px; padding-right: 10px; }
#footer .footer-nav { float: none; display: block; padding-bottom: 12px; margin-left:0px; }
#footer .footer-nav ul { padding-bottom: 12px; }
#footer .footer-nav ul li { padding: 0 3px; border-right: 0; font-size: 11px; line-height: 11px; }
#footer .footer-bottom p.copy { float: none; display: block; clear: both; }
}