/*   
	Theme Name: Precision - Premium vCard WordPress Theme
	Theme URI: http://themes.thememates.com/precision/
	Description: Precision - Premium vCard WordPress Theme is a small compact book style theme which can be used for resume like websites or a short bio website.
	Author: Theme Mates
	Author URI: http://thememates.com/
	License: Partial GNU General Public License, please reade license file for more details.
	License URI: license.txt
	Version: 1.5
	
-----------------------------------------------------------------------------------

	1.	CSS Reset
	2.	Fonts
	3.	Body, link and image common rules
	4.  Typography
	5.  General Layout
	6.  Left Pane Layout
	7.  Navigation
	8.  Right Pane Layout
	9.  Page Heading and Pager Layout
	10. Home Page Specific Rules
	11. Resume Page Specific Rules
	12. Portfolio Page Specific Rules
	13. Contact Page Specific Rules
	14. Vegas slideshow rules

-----------------------------------------------------------------------------------*/


/* === 1. CSS Reset - http://meyerweb.com/eric/tools/css/reset/ === */

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, font, 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 { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } :focus { outline: 0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; }


/* === 2. Fonts === */

@font-face {
    font-family: 'RalewayThin';
    src: url('fonts/raleway_thin-webfont.eot');
    src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/raleway_thin-webfont.woff') format('woff'),
         url('fonts/raleway_thin-webfont.ttf') format('truetype'),
         url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TitilliumText22LLight';
    src: url('fonts/TitilliumText22L002-webfont.eot');
    src: url('fonts/TitilliumText22L002-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/TitilliumText22L002-webfont.woff') format('woff'),
         url('fonts/TitilliumText22L002-webfont.ttf') format('truetype'),
         url('fonts/TitilliumText22L002-webfont.svg#TitilliumText22LLight') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TitilliumText22LBold';
    src: url('fonts/TitilliumText22L005-webfont.eot');
    src: url('fonts/TitilliumText22L005-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/TitilliumText22L005-webfont.woff') format('woff'),
         url('fonts/TitilliumText22L005-webfont.ttf') format('truetype'),
         url('fonts/TitilliumText22L005-webfont.svg#TitilliumText22LBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@import url(https://fonts.googleapis.com/css?family=Titillium+Web:200&subset=latin,latin-ext);


/* === 3. Body, link and image common rules === */

body {
	margin:0;
	padding:0;
	background:#111;
	font-family:'Titillium Web', Arial, sans-serif;
	line-height:16px;
	text-align:justify;
}

img{ 
	text-decoration:none;
	border:none; 

}
a:hover, a:active { outline: none; }

a:focus { 
    outline: none; 
}
:focus {outline:none;}
::-moz-focus-inner { border: 0; }

.alignleft {
	float:left;
	margin:0 10px 10px 0;
}

.alignright {
	float:right;
	margin:0 0 10px 10px;
}

.aligncenter {
	display:block;
	margin:10px 0;
}

.vegas-loading {
	background-image:  url(images/loading.gif);
 	background-position: center center;
	background-repeat: no-repeat;
	position:fixed;
	top:50%; 
	left:50%;
	width:90px;
	height:60px;
	margin:-30px 0 0 -45px; 
	z-index:0;
}

/* === 4. Typography === */

h1{
	font-family:'RalewayThin';
	font-size:72px;
	line-height:77px;
	margin:10px 0 10px 0;
	padding:0;
	font-weight:normal;
}


h2{
	font-family:'RalewayThin';
	font-size:48px;
	line-height:53px;
	margin:10px 0 10px 0;
	padding:0;
	font-weight:normal;
}

h3{
	font-family:'TitilliumText22LLight';
	font-size:24px;
	line-height:35px;
	margin:10px 0 10px 0;
	padding:0;
	font-weight:normal;
}

h4{
	font-family:'TitilliumText22LLight';
	font-size:18px;
	line-height:23px;
	margin:10px 0 10px 0;
	padding:0;
	font-weight:normal;
}

h5{
	font-family:'Titillium Web', sans-serif;
	font-size:16px;
	line-height:20px;
	margin:10px 0 10px 0;
	padding:0;
	font-weight:normal;
	border-bottom:1px solid #d1d1d1;
}

h6{
	font-family:'TitilliumText22LLight';
	font-size:13px;
	line-height:17px;
	margin:10px 0 10px 0;
	padding:0;
	font-weight:normal;
	

}

a:link {
	color:#0763c1; 
	text-decoration:none;
}

a:visited {
	color:#0763c1;
	text-decoration:none;
}

a:hover {
	color:#2ec5f9; 
	text-decoration:none;
}

a:active {
	color:#0000FF;
}

blockquote.bigquotes{
	background:url(images/quote-small.png);
	background-position: top left;
  	background-repeat: no-repeat;
	text-indent: 18px;
	padding: 5px;
  	margin: 0 0 5px 0;
	font-style:oblique;
}

::-moz-selection{ 
	background: #666; 
	color:#fff; 
	text-shadow:0px none; 
}

::selection { 
	background:#666; 
	color:#fff; 
	text-shadow: 0px none; 
} 

img.border{
	border: 1px solid #ddd;
	padding: 5px;
	background: #f0f0f0;	
}

.content hr{
	margin:-5px 0 5px 0;
	padding:0;
	border:1px dashed #d9d6d6;
}
span .bold{
	font-family:'TitilliumText22LBold';
}

.caps{
	display:block;
	font-family:'TitilliumText22LBold';
	font-size:12px !important;
	text-transform:uppercase;
}
.right{
	float:right;
}
.left{
	float:left;
}
p.center{
	text-align:center;	

}


/* === 5. General Layout === */

#wrapper{
	width:1024px;
	height:392px;
	position:absolute;
	left:50%;
	top:50%;
	margin:-196px 0 0 -512px;
	padding:0;
	background:url(images/dropshadow.png) no-repeat center center;
}

#innerleft{
	width:480px;
	height:360px;
	margin:0;
	padding:0;
	position:relative;
	left:31px;
	top:0;
	font-size:14px;
	color:#a1a0a0;
	background:#0e0e0e url(images/left-bg.jpg) no-repeat center center;
}

#innerright{
	width:480px;
	height:360px;
	overflow:scroll;
	margin:0;
	padding:0;
	position:absolute;
	left:511px;
	top:0;
	background:#f4f2f2 url(images/right-bg.jpg) no-repeat center center;
}

#innerright,#contactcard{
	font-size:12px;
	color:#666;
}

#innerright h1,#innerright h2,#innerright h4,#innerright h5,#innerright h6{
	color:#555;
}

#borderleft, #borderright{
	display:none;
}


/* === 6. Left Pane Layout === */

#header{
	width:440px;
	height:72px;
	text-align:center;
	margin:0;
	padding:30px 20px 10px 20px;
}

#mainslide {
  	width: 479px;
  	height: 133px;
  	overflow:hidden;
}

#mainimglight {
  	width: 480px;
  	height: 133px;
  	position:absolute;
 	left:0;
 	top:112px;
  	z-index: 200;
}

/* === 7. Navigation === */

#nav{
	margin: 25px 0 0 20px;
}

.ie7 #nav{
	padding:10px 0 0 20px;
}

#nav li{
        margin-right:20px;
	float:left;	
	list-style:none;
}
#nav li a{
	margin-right:20px;
	text-decoration:none;
	color:#a1a0a0;
}

#nav li a:hover{
	text-decoration:underline;
	
}

#nav li a:active{
	font-family:inherit;
	font-size:inherit;
	color:#fff;
}

/* === 8. Right Pane Layout === */
.page{
	width:480px;
	height:460px;
	margin:0;
	padding:0;
	overflow:hidden;
	position:absolute;
	top:0;
}

.page a img{
	text-decoration:none;
	border: 0 none;
}

.page a:hover img, #card a:hover img{
	opacity:0.9;
 	filter:alpha(opacity=90);
}

#home,#about,#resume,#portfolio,#contact{ 
	/*position:static;*/
}

.secondaryslide{
	display:none;
}

.js #innerright {
	overflow:hidden;
}
.js #borderleft img{
	position:absolute;
	top:0;
	left:0;
}

.js #borderleft{
	display:block;
	width:30px;
	height:358px;
	position:absolute;
	left:511px;
	top:0px;
	z-index:100;
	margin:0;
	padding:0;
	background:url(images/borderleft.png) repeat-y top left;
	
}

.js #borderright{
	display:block;
	width:30px;
	height:358px;
	position:absolute;
	left:960px;
	top:0;
	z-index:100;
	background:url(images/borderright.png) repeat-y top left;
}

.js #borderbottom{
	display:block;
	width:276px;
	height:30px;
	position:absolute;
	left:652px;
	bottom:53px;
	z-index:10;
	background: url(images/bordertopbottom.png) repeat-y top left;
}
.js #bordertop{
	display:block;
	width:276px;
	height:8px;
	position:absolute;
	left:652px;
	top:43px;
	z-index:10;
	background:url(images/bordertopbottom.png) repeat-y top left;
}

.js .secondaryslide {
	display:block;
}
.js .verticalline{
	display:block;
	width:2px;
	height:216px;
	position:absolute;
	left:93px;
	top:93px;
	background-color:#e7e4e4;
	overflow:visible;	
}

.js .scrollprevnext {
	width:16px;
	height:37px;
	position: absolute;
	bottom:0;
	left:-7px;
	background: url(images/scrollprevnext.png) no-repeat center bottom;	
}


/* === 9. Page Heading and Pager Layout === */

.pageheader{
	position:relative;
	color:#ffffff;
	left:63px;
	width:64px;
	height:77px;
	margin:0 0 -47px 0;
	padding:18px 0 0 0;
	text-align:center;
	text-shadow:1px 1px #454545;
	z-index:11;
	background-color:#444444;
	border-bottom: 1px dashed #e7e4e4;
	border-top:2px solid #555555
}

.verticalline{
	display:none;
}

.pageheader h3 span{
	display:block;
	font-family:'RalewayThin';
	font-size:48px;
	line-height:35px;
	margin:0;
	padding:0 0 0 0;
	font-weight:normal;
	color:#FFF;
	position:relative;
	font-style:normal;
}

.pageheader h3{
	font-family:"Times New Roman", Times, serif;
	color:#FFF;
	font-size:14px;
	line-height:22px;
	margin:10px 0 10px 0;
	padding:0;
	font-weight:normal;
	font-style:oblique;
}

.bx-pager{
	position:absolute;
	left:190px;
	bottom:-6px;
	z-index:11;
	padding:0;
	margin:0;
	width: 100px;
	text-align:center;
	font-family:"Times New Roman", Times, serif;
	font-style:oblique;
}
	
.bx-next{
	width:14px;
	height:14px;
	position:absolute;
	left:87px;
	bottom:29px;
	z-index:10;
}

.bx-prev{
	width:14px;
	height:14px;
	position:absolute;
	left:87px;
	bottom:50px;
	z-index:10;
}

.content{
	position:relative;
	width:276px;
	height:286px;
	position:relative;
	padding: 0 0 0 141px;
	overflow:hidden;
}

.content p,.content h4,.content h5{ 
	padding:0;
	margin:0 0 10px 0;
}


/* === 10. Home Page Specific Rules === */

.welcomeslide{
	text-align:center;
	width:480px;
	padding: 110px 0 0 0;/* CENTER HEADINGS/TEXT VERTICAL ADJUST FOR IMAGES ETC */
	height:360px;
	font-size:14px;
	color:#2c2c2c;
}

.welcomeslide img{
	margin:15px 0 0 0;
	padding:0;
	width:401px;
	height:240px;
}

.welcomeslide2{
	text-align:center;
	width:480px;
	padding: 20px 0 0 0;/* CENTER HEADINGS/TEXT VERTICAL ADJUST FOR IMAGES ETC */
	height:360px;
	font-size:14px;
	color:#2c2c2c;
}

.welcomeslide2 img{
	margin:15px 0 0 0;
	padding:0;
}


/* === 11. Resume Page Specific Rules === */

.skill dt{
	margin:0;
	padding:0;
	font-size:13px;
}

.skill dt img{
	vertical-align:bottom;
	padding:5px;
	}

.skill dd{
	border-bottom:1px solid #e1e1e1; 
	margin:0 0 10px 0;
	padding:0 0 1px 0;
}

.close{
	position:absolute;
	top:-10px;
	right:-10px;
}


/* === 12. Portfolio Page Specific Rules === */

ul.thumb {
	position: relative;
	list-style: none;
	margin:0; 
	padding: 0;
}

ul.thumb li {
	margin: 0; 
	padding:5px 0 0 5px;
	float: left;
	position: relative;
	width: 87px;
	height: 73px;
}

ul.thumb li img {
	width: 77px; height: 63px;
	-ms-interpolation-mode: bicubic;
	border: 1px solid #ddd;
	padding: 3px;
	background: #f0f0f0;
	position: absolute;
	left: 0; top: 0;
}

ul.thumb li img.hover {
	background: #f0f0f0;
	border: 1px solid #ddd;
	opacity:0.9;
 	filter:alpha(opacity=90);
}


/* === 13. Contact Page Specific Rules === */

#info{
	position:absolute;
	right:0;
	top:12px;
	width:16px;
	height:16px;
	text-indent:1000px;
	background: url(images/info.png) no-repeat top right;
}

#info:hover{			
	background-position: right -16px;
}

#info:active{	
	background-position: right -32px;
}

ul.social{
	float:right;
	margin:0;
	padding:0;
	list-style:none;	
}

ul.social li{
	float:left;
	margin: 0 0 0 5px;
	padding:0;	
}

address{
	font-style:normal;
}

#contactcard{
	position:absolute;
	right:5px;
	top:5px;
	width:328px;
	height:171px;
	padding:30px;
	margin:;
	z-index:300;
}

#card{
	opacity:0;
	filter:alpha(opacity=90);
	position:absolute;
	right:450px;
	top:-500px;
	width:1024px;
	height:392px;
	padding:0;
	margin:-216px 0 0 -512px;
	z-index:300;
	overflow:visible;
	background:url(images/card.png) no-repeat top right;
}

#contactcard h5{
	margin:0;
	padding:0;
}

#address dd{
	
	margin: 0 0 10px 70px;
	padding:0;
	width:135px;
}

#address dt{
	font-family:'TitilliumText22LBold';
	float:left;
	width:70px;
}

#address dt img{
	padding:0 5px 0 0;
	vertical-align:text-top;
}
#profile{
	float:right;
	padding:16px 0 0 0;
}
.loaderIcon{
	position:absolute;
	bottom:49px;
	right:-2px;	
}
#contactform{
	position:relative;
	top:5px;
	left:0;
	padding:0;
	margin:0;
}	

input#uname, input#uemail, textarea#ucomments { 
	padding: 4px;
	margin:0;
	border: solid 1px #cdcccc;
	outline: 0;
	font:inherit;
	width: 265px;
	max-width:265px;
	background: #ffffff url(images/formbg.png) left top repeat-x;
}

#contactform textarea { 
	height:97px;
	max-height: 97px;
	margin:0;
	
}

input:hover, textarea:hover{
	box-shadow:inset 0 3px 3px #eaeaea;

}
input:focus, textarea:focus{
	box-shadow:inset 0 6px 12px #eaeaea;
}

label.overlabel-apply {
  	position:absolute;
	top:5px;
	left:5px;
  	z-index:1;
  	color:#999;
}

p.name, p.email, p.text {
	position:relative;
	margin:0 0 5px 0;
	padding:0;
}

p.submit{
	
	height:42px;
	padding: 5px 0 0 0;
	margin:5px 0  0 0;
	text-align:center;
	background:url(images/buttonshadow.png) bottom no-repeat;	
}

p.success{
	
	height:16px;
	width:100px;
	display:block;
	text-align:left;
	font-size:10px;
	color:#f1f1f1;
	text-shadow:0 none;
	margin:0;
	padding:3px 10px;
	border: 2px solid #ffffff;
	background: -moz-linear-gradient(top, rgba(33,181,0,0.7) 0%, rgba(33,181,0,0.7) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(33,181,0,0.7)), color-stop(100%,rgba(33,181,0,0.7))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(33,181,0,0.7) 0%,rgba(33,181,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(33,181,0,0.7) 0%,rgba(33,181,0,0.7) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(33,181,0,0.7) 0%,rgba(33,181,0,0.7) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(33,181,0,0.7) 0%,rgba(33,181,0,0.7) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b321b500', endColorstr='#b321b500',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow:  4px 4px 10px 6px rgba(0, 0, 0, .5);
 	-moz-box-shadow:  4px 4px 10px 6px rgba(0, 0, 0, .5);
 	box-shadow:  4px 4px 10px 6px rgba(0, 0, 0, .5);
	z-index:111;
	position:absolute;
	top:176px;
	left:-127px;
}

p#error1, p#error2, p#error3{	
	height:16px;
	width:100px;
	display:block;
	text-align:left;
	font-size:10px;
	color:#f1f1f1;
	text-shadow:0 none;
	margin:0;
	padding:3px 10px;
	border: 2px solid #ffffff;
	background: -moz-linear-gradient(top, rgba(255,0,0,0.7) 0%, rgba(255,0,0,0.7) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,0,0,0.7)), color-stop(100%,rgba(255,0,0,0.7))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(255,0,0,0.7) 0%,rgba(255,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(255,0,0,0.7) 0%,rgba(255,0,0,0.7) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(255,0,0,0.7) 0%,rgba(255,0,0,0.7) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(255,0,0,0.7) 0%,rgba(255,0,0,0.7) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3ff0000', endColorstr='#b3ff0000',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow:  4px 4px 10px 6px rgba(0, 0, 0, .5);
 	-moz-box-shadow:  4px 4px 10px 6px rgba(0, 0, 0, .5);
 	box-shadow:  4px 4px 10px 6px rgba(0, 0, 0, .5);
	z-index:111;
}

p#error1{
	
	position:absolute;
	top:0;
	left:-127px;
}

p#error2{
	position:absolute;
	top:29px;
	left:-127px;
}

p#error3{
	position:absolute;
	top:58px;
	left:-127px;
}

.graybutton::-moz-focus-inner { 
	border: none;
}

.graybutton {			
	background: transparent url('images/button.png') no-repeat top right; 
	color:#4e4e4e;
	height: 24px; 
	width:245px;
	margin: 0; 
	padding: 0; 
	text-decoration: none; 
	font-size:12px;
	font-family:inherit; 
   	text-align:center;   	
	border:0; 
  	cursor:pointer;
}
.graybutton:hover{			
	background-position: right -24px;
}

.graybutton:active{	
	background-position: right -48px;
}

/* === 14. Vegas slideshow rules === */

.vegas-overlay {
	background:transparent url(overlays/01.png);
	opacity:0.5;
	z-index:-1;
}

.vegas-background {
	image-rendering: optimizeQuality;
	-ms-interpolation-mode: bicubic;
	z-index:-2;
}

js.body {
	background-image:none;
}