@import url('reset.css');
@import url('text.css');

html {height:100%; -webkit-text-size-adjust: none;}
body {margin: 0; height: 100%;}

#wrap {position:relative; /* needed for footer positioning*/
	width:100%;
	height:auto !important; /* real browsers */
	height:100%; /* IE6: treaded as min-height*/
	min-height:100%; /* real browsers */}
   	
#mobile {
	background: url("../images/bgm.jpg") repeat center center fixed; 
	background-position: 0 0;
	height:100px;
	-webkit-box-shadow: 0 5px 2px -2px #BFBFBF;
   	-moz-box-shadow: 0 5px 2px -2px #BFBFBF;
   	box-shadow: 0 5px 2px -2px #BFBFBF
}
/* portfolio page has horiz scroll unlike other pages */
#mobile-port {
	background: url("../images/bgm.jpg") repeat center center fixed; 
	background-position: 0 0;
	height:100px;
	-webkit-box-shadow: 0 5px 2px -2px #BFBFBF;
   	-moz-box-shadow: 0 5px 2px -2px #BFBFBF;
   	box-shadow: 0 5px 2px -2px #BFBFBF;
	width: 1000px;
}

#main-content-mobile { 
	height:100%
	background-color: #fff;
	margin-top: 15px;
	padding-bottom: 30px
}

#main-content-mobileport {
	background-color: #fff;
	width: 1000px;
	height: 300px;
	-webkit-box-shadow: inset 0 10px 8px -8px #BFBFBF;
	-moz-box-shadow: inset 0 10px 8px -8px #BFBFBF;
	box-shadow: inset 0 10px 8px -8px #BFBFBF;
}
/* header nav */
nav {
	width: 292px;
	margin: 0 auto;
}
/*vertical lines*/
nav li {
	display: inline;
	position: relative;
}
nav li a {
    padding: 2px;
	top: -10px;
    left: 2px;
	position: relative;
}

/* portfolio nav and logo*/
#port {
	position: fixed;
	left: 15px;
	top: 60px;
}

#mobile-port h1 {position: fixed; top: 3px; left: 10px}
#mobile-port h2 {position: fixed; top: 30px; left: 50px}

#logo h1 {
	width: 302px;
	margin: 0 auto;
}

#logo h1 a{
	font-size: 28px;
	letter-spacing: 1px;
}

#logo h2{
	font-size: 32px;
	width: 230px;
	margin: 0 auto;
}

/*slideshow*/
#slideshow {
	width: 200px; 
	height: 200px; 
	margin: 0 auto;
	overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */
	position: relative; 
	z-index: 105;
	padding-bottom: 10px
}

#instagram {list-style: none}
#instagram li {margin: 0}
#instagram img {
	padding: 10px;
   	width: 190px;
   	height: 190px;
   	top: 0px;
   	left: 0px;
}

#slideshow p {font-size:8px; position:absolute; bottom:0; padding-left: 10px}

.scrollBox {
	width: 300px;
	margin:5px auto;
	padding: 5px
}

/*contact text*/
.contactInfo {
	height: 200px;
	width: 300px;
	margin:5px auto;
	padding: 5px;
	background-color: #fff;
}

.contactInfo p {
	text-align: center
}

/* images grid in portfolio - swipe one at a time */
.swipe {
  	list-style: none outside none;
    margin: 0;
    padding: 0; 
}
.swipe:after {
	clear: both;
	content: ".";
 	display: block;
	height: 100px;
	visibility: hidden;
}
.swipe li {
  	float: left;
    width: 100px;
	height: 100px;
}

.swipe li a {
    display: block;
    margin: 5px;
}

.swipe li img {
  	display: block;
    height: auto;
    width: 100%;
}
#PhotoSwipeTarget {
    height: 200px;
    width: 100%;
}
#Indicators {
    margin-top: 20px;
    text-align: center;
}
#Indicators span {
    background: none repeat scroll 0 0 #C5C5C5;
    border-radius: 5px 5px 5px 5px;
    display: inline-block;
    height: 10px;
    margin: 0 10px 0 0;
    overflow: hidden;
    padding: 0;
    width: 10px;
}
#Indicators span.current {
    background: none repeat scroll 0 0 #EEBF02;
}
/* social media icons */
footer {position: fixed;
	bottom: 0;
	left: 0;
	height:30px;
	width: 100%;
	padding-left: 2px}

.align-right { float:right; margin-right: 10px }
.align-left { float:left; margin-left: 5px }