Wordpress Template CSS

gistfile1.css

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

	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;
}


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

body {
	margin:0;
	padding:0;
	background:url(images/mainBG.png) repeat;
	font-family:'TitilliumText22LLight', 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:'TitilliumText22LLight';
	font-size:16px;
	line-height:20px;
	margin:10px 0 10px 0;
	padding:0;
	font-weight:normal;
	color:#5d5e5d;
	border-bottom:1px solid #5d5e5d;
}

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;
}

#innerleft{
	width:480px;
	height:360px;
	margin:0;
	padding:0;
	position:relative;
	left:31px;
	top:0;
	font-size:14px;
	color:#a1a0a0;
	background:#fff;
	border-top-left-radius:10px;
	border-bottom-left-radius:10px;
	border:1px solid #8e4988;
}

#innerright{
	width:480px;
	height:360px;
	overflow:scroll;
	margin:0;
	padding:0;
	position:absolute;
	left:511px;
	top:0;
	background:#FFF;
	border-left:none;
	border-top-right-radius:10px;
	border-bottom-right-radius:10px;
	border:1px solid #8e4988;
}
#socialMedia{
	width:100%;
	text-align:center;
	margin:0 0 0 10px;
}
#socialMedia ul.social{
	padding:0;
	list-style:none;	
}
#socialMedia ul.social > li{
   display:inline-block;
   *display:inline; /* ie7 fix */
   zoom:1; /* hasLayout ie7 trigger */
   list-style:none;
}
#socialMedia ul.social a{
	margin:0 auto;
}
#footer{
	width:960px;
	height:35px;
	margin:15px 0 0 30px;
	background:#FFF;
	border-radius:5px;
	border:1px solid #8e4988;
}
#footer p{
	font-family: Arial, Helvetica, sans-serif;
	text-align:center;
	padding:5px 0 0 0;
	color:#a1a0a0;
}
#footer p a{
	color:#a1a0a0;
}
#footer p a:hover {
	color:#8e4988;
}

#innerright,#contactcard{
	font-size:12px;
	color:#fff;
	text-shadow:1px 1px #ffffff;
}

#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{
	width:100%;
	margin:50px 0 10px 25px;
	text-align:center;
}

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

#nav > li {
    display:inline-block;
    *display:inline; /* ie7 fix */
    zoom:1; /* hasLayout ie7 trigger */
    list-style:none;
    font-weight:bold;
}

#nav li a{
	margin-right:30px;
	text-decoration:none;
	color:#5d5e5d;
}

#nav li a:hover{
	color:#8e4988;
	
}

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

/* === 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:#FFF;
	
}

.js #borderright{
	display:block;
	width:25px; /*30 */
	height:340px; /*358 */
	position:absolute;
	left:960px;
	top:2px;
	z-index:100;
}

.js #borderbottom{
	display:block;
	width:276px;
	height:30px;
	position:absolute;
	left:652px;
	bottom:53px;
	z-index:10;
	background: #FFF;
}
.js #bordertop{
	display:block;
	width:276px;
	height:8px;
	position:absolute;
	left:652px;
	top:43px;
	z-index:10;
	background:#FFF;
}

.js .secondaryslide {
	display:block;
}
.js .verticalline{
	display:block;
	width:2px;
	height:216px;
	position:absolute;
	left:93px;
	top:93px;
	background-color:#5d5e5d;
	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:#8e4988;
	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;
}


/* === 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;
}

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:140px;
	padding:0;
	margin:0;
	color:#000;
}	

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;
}