/*
Template Name: Vivid Photo
Theme URI: http://www.priteshgupta.com/templates/vivid-photo
Description: Free Photography Template
Author: Pritesh Gupta
Author URI: http://www.priteshgupta.com/
Version: 1.2
License: New BSD License
License URI: license.txt
*/
/**
 * Vivid Photo | Free Photography Template Version 1.2
 * By PriteshGupta.com 
 * Download for free at http://www.priteshgupta.com/templates/vivid-photo
 
	Released under New BSD License
	http://www.opensource.org/licenses/bsd-license.php
	 
	Copyright (c) 2011, PriteshGupta.com
	All rights reserved.
	
	Redistribution and use in source and binary forms, with or without modification,
	are permitted provided that the following conditions are met:
	
		* Redistributions of source code must retain the above copyright notice,
		  this list of conditions and the following disclaimer.
	
		* Redistributions in binary form must reproduce the above copyright notice,
		  this list of conditions and the following disclaimer in the documentation
		  and/or other materials provided with the distribution.
	
		* Neither the name of PriteshGupta.com nor the names of its
		  contributors may be used to endorse or promote products derived from this
		  software without specific prior written permission.
	
	THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
	ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
	WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
	DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR
	ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
	(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
	LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
	ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
	(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
	SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/

/* Reset */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, 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;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	content: none;
}
.clearfix:before, .clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1;
}
* {
	margin: 0;
	padding: 0;
}
body {
	font-size: 16px;
	color: #fff;
	background-color: #fff;
	overflow: hidden;
	font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
/* Typography */
h1 {
	font-size: 50px;
}
h2 {
	font-size: 45px;
}
h3 {
	font-size: 40px;
}
h4 {
	font-size: 35px;
}
h5 {
	font-size: 30px;
}
h6 {
	font-size: 25px;
}
h1, h2, h3, h4, h5, h6 {
	margin: 20px;
}
p {
	margin-bottom: 300px;
}
a {
	color: #FFF;
}
a .cufon {
	border-bottom: dashed 1px #FFF;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
a:hover .cufon {
	background: rgba(0, 0, 0, 0.50);
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
nav a .cufon {
	border-bottom: none;
}
nav a:hover .cufon {
	background: none;
}
.nomargin {
	margin-bottom: 0px;
}
.overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
	background: url(../images/dotted.png);
	opacity: 0.3;
}
.main img.preview {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left bottom, left top, from(white), to(transparent));
}
ul.navigation {
	position: absolute;
	width: 100%;
	top: 140px;
	left: 0px;
	list-style: none;
}
ul.navigation li {
	float: left;
	clear: both;
	margin-bottom: 8px;
	position: relative;
	width: 100%;
}
ul.navigation li span.arrow_down, ul.navigation li span.arrow_up {
	background-color: rgba(0, 0, 0, 0.75);
	position: absolute;
	width: 40px;
	height: 50px;
	cursor: pointer;
	-webkit-box-shadow: 0px 0px 2px #000;
	-moz-box-shadow: 0px 0px 2px #000;
	box-shadow: 0px 0px 2px #000;
}
ul.navigation li span.arrow_down {
	background: rgba(0, 0, 0, 0.75) url(../images/icons/down.png) no-repeat center center;
}
ul.navigation li span.arrow_up {
	background: rgba(0, 0, 0, 0.75) url(../images/icons/up.png) no-repeat center center;
}
.wrapper {
	display: none;
	position: absolute;
	width: 100%;
	height: 126px;
	-ms-overflow-y: hidden;
	overflow-y: hidden;
	top: 50px;
	left: 0px;
	-webkit-box-shadow: 1px 1px 5px #000;
	-moz-box-shadow: 1px 1px 5px #000;
	box-shadow: 1px 1px 5px #000;
}
.thumbs {
	height: 126px;
	margin: 0;
}
.thumbs img {
	float: left;
	margin: 3px 3px 0px 0px;
	cursor: pointer;
	-webkit-box-shadow: 1px 1px 5px #000;
	-moz-box-shadow: 1px 1px 5px #000;
	box-shadow: 1px 1px 5px #000;
	opacity: 0.7;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.loading {
	position: fixed;
	top: 10px;
	right: 0px;
	background: rgba(0, 0, 0, 0.75) url(../images/icons/loader.gif) no-repeat 10px 50%;
	padding: 15px 40px 15px 60px;
	-webkit-box-shadow: 0px 0px 2px #000;
	-moz-box-shadow: 0px 0px 2px #000;
	box-shadow: 0px 0px 2px #000;
	opacity: 0.6;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.about {
	display: none;
	position: absolute;
	top: 50px;
	left: 0px;
	opacity: 0.6;
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
.subcontent {
	background: #000;
	padding: 30px;
	-webkit-box-shadow: 0px 0px 10px #000;
	-moz-box-shadow: 0px 0px 10px #000;
	box-shadow: 0px 0px 10px #000;
}
ul.menu {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	width: auto;
}
ul.menu a {
	text-decoration: none;
	outline: none;
}
ul.menu li {
	float: right;
	width: 170px;
	height: 85px;
	position: relative;
	cursor: pointer;
}
ul.menu li > a {
	position: absolute;
	top: 0px;
	right: 0px;
	width: 170px;
	height: 85px;
	z-index: 12;
	background: transparent url(../images/overlay.png) no-repeat bottom right;
	background-color: rgba(0, 0, 0, 0.75);
	-webkit-box-shadow: 0px 0px 2px #000 inset;
	-moz-box-shadow: 0px 0px 2px #000 inset;
	box-shadow: 0px 0px 2px #000 inset;
}
ul.menu li a img {
	border: none;
	position: absolute;
	width: 0px;
	height: 0px;
	bottom: 0px;
	left: 85px;
	z-index: 100;
	-webkit-box-shadow: 0px 0px 4px #000;
	-moz-box-shadow: 0px 0px 4px #000;
	box-shadow: 0px 0px 4px #000;
}
ul.menu li span.wrap {
	position: absolute;
	top: 25px;
	left: 0px;
	width: 170px;
	height: 60px;
	z-index: 15;
}
ul.menu li span.active {
	position: absolute;
	background: rgba(0, 0, 0, 0.75);
	top: 85px;
	width: 170px;
	height: 0px;
	left: 0px;
	z-index: 14;
	-webkit-box-shadow: 0px 0px 4px #000 inset;
	-moz-box-shadow: 0px 0px 4px #000 inset;
	box-shadow: 0px 0px 4px #000 inset;
	-webkit-border-bottom-right-radius: 15px;
	-webkit-border-bottom-left-radius: 15px;
	border-bottom-right-radius: 15px;
	-moz-border-radius-bottomright: 15px;
	border-bottom-left-radius: 15px;
	-moz-border-radius-bottomleft: 15px;
}
ul.menu li span span.link, ul.menu li span span.descr, ul.menu li div.box a {
	margin-left: 15px;
	text-transform: uppercase;
	text-shadow: 1px 1px 1px #000;
}
ul.menu li span span.link {
	color: #fff;
	font-size: 22px;
	float: left;
	clear: both;
}
ul.menu li span span.descr {
	color: #0B75AF;
	float: left;
	clear: both;
	width: 155px;
	/*For dumbass IE7*/
	font-size: 10px;
	letter-spacing: 1px;
}
ul.menu li div.box {
	display: block;
	position: absolute;
	width: 170px;
	overflow: hidden;
	height: 170px;
	top: 85px;
	left: 0px;
	display: none;
	background: #000;
}
ul.menu li div.box a {
	float: left;
	clear: both;
	line-height: 30px;
	color: #0B75AF;
}
ul.menu li div.box a:first-child {
	margin-top: 15px;
}
ul.menu li div.box a:hover {
	color: #fff;
}
ul.menu {
	margin-top: 150px;
}
.thumbs_wrapper {
	padding-top: 30px;
	padding-bottom: 30px;
	background-color: rgba(0, 0, 0, 0.75);
}
.image {
	border: 5px solid rgba(255, 255, 255, 0.30);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	float: right;
	-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
/* Pop Up */
#popupAbout, #popupProjects, #popupContact, #popupBlog {
	height: 600px;
	width: 900px;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.75);
	border: 2px solid #cecece;
	z-index: 15;
	padding: 20px;
	color: #FFF;
	-webkit-box-shadow: 0px 0px 4px #000 inset;
	-moz-box-shadow: 0px 0px 4px #000 inset;
	box-shadow: 0px 0px 4px #000 inset;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
	-ms-border-radius: 10px;
	-khtml-border-radius: 10px;
	border-radius: 10px;
	margin-top: -50px;
	visibility: hidden;
}
#popupAbout p, #popupProjects p, #popupContact p, #popupBlog p {
	padding-left: 10px;
	font-size: 18px;
	line-height: 20px;
}
#popupAbout h1, #popupProjects h1, #popupContact h1, #popupBlog h1 {
	text-align: left;
	font-size: 30px;
	letter-spacing: 1px;
	border-bottom: 1px dotted #D3D3D3;
	padding-bottom: 2px;
	margin-bottom: 20px;
}
#popupAboutClose, #popupProjectsClose, #popupContactClose, #popupBlogClose {
	right: 6px;
	top: 6px;
	position: absolute;
	display: block;
}
*:focus {
	outline: none;
	/* Prevents blue border in Webkit */
}
form {
	margin-top: -275px;
	width: 350px;
	margin-left: 25px;
}
input, textarea {
	background-color: #fff;
	border: 1px solid #ccc;
	width: 300px;
	min-height: 30px;
	display: block;
	margin-bottom: 16px;
	margin-top: 8px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	color: #fff;
}
textarea {
	min-height: 200px;
}
input:focus, textarea:focus {
	-webkit-box-shadow: 0 0 25px #ccc;
	-moz-box-shadow: 0 0 25px #ccc;
	box-shadow: 0 0 25px #ccc;
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
}
/* The interesting bit */
input:not(:focus), textarea:not(:focus) {
	opacity: 0.5;
}
input:required, textarea:required {
	background: url("../images/asterisk_orange.png") no-repeat 280px 7px;
}
input:valid, textarea:valid {
	background: url("../images/tick.png") no-repeat 280px 5px;
}
input:focus:invalid, textarea:focus:invalid {
	background: url("../images/cancel.png") no-repeat 280px 7px;
}
input[type=submit] {
	padding: 10px;
	background: none;
	opacity: 1.0;
}
#social-network img {
	float: right;
	margin-left: 20px;
	opacity: 0.6;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
}
#social-network img:hover {
	opacity: 1;
	-webkit-transition: all 1s ease-out;
	-moz-transition: all 1s ease-out;
	-o-transition: all 1s ease-out;
	-ms-transition: all 1s ease-out;
	transition: all 1s ease-out;
	}
#social-network {
	float: right;
	margin-top: -450px;
	float: left;
	margin-left: 375px;
}
.map {
	margin-top: -500px;
	margin-right: 25px;
	border: 5px solid rgba(255, 255, 255, 0.30);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
	-ms-border-radius: 5px;
	-khtml-border-radius: 5px;
	border-radius: 5px;
	float: right;
}
/*
 * CSS Styles that are needed by jScrollPane for it to operate correctly.
 *
 * Include this stylesheet in your site or copy and paste the styles below into your stylesheet - jScrollPane
 * may not operate correctly without them.
 */

.jspContainer
{
	overflow: hidden;
	position: relative;
}

.jspPane
{
	position: absolute;
}

.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 16px;
	height: 100%;
	-webkit-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
	margin-right: 2px;

}

.jspVerticalBar *,
.jspHorizontalBar *
{
	margin: 0;
	padding: 0;
}

.jspCap
{
	display: none;
}

.jspHorizontalBar .jspCap
{
	float: left;
}

.jspTrack
{
	position: relative;
}

.jspDrag
{
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}

.jspArrow
{
	text-indent: -20000px;
	display: block;
	cursor: pointer;
}

.jspArrow.jspDisabled
{
	cursor: default;
}

.jspVerticalBar .jspArrow
{
	height: 16px;
}

.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}

.jspVerticalBar .jspArrow:focus
{
	outline: none;
}

.jspCorner
{
	float: left;
	height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}



.jspDrag
{
	background:  rgba(255, 255, 255, 0.50);
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.jspArrow
{
	background-image: url('../images/ui-icons_888888_256x240.png');
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

.jspVerticalBar>.jspDisabled,
.jspVerticalBar>.jspDisabled:hover,
.jspHorizontalBar>.jspDisabled,
.jspHorizontalBar>.jspDisabled:hover
{
	background-color: transparent;
	background-image: url('../images/ui-icons_888888_256x240.png');
}

.jspVerticalBar .jspArrow
{
	height: 15px;
}

.jspHorizontalBar .jspArrow
{
	width: 15px;
}

.jspArrowUp
{
	background-position: 0 0;
}

.jspArrowDown
{
	background-position: -64px 0 !important; 
}