/**********************************************
* TABLE OF CONTENTS
**********************************************/
/*
1. COLOR NOTE
2. BASE STYLES (Reset, Fonts, Links, etc.)
3. CONTENT ELEMENTS (Image Frames, Boxes, Buttons)
4. HEADER (Logo, Navigation)
5. FOOTER (Copyright Notice)
6. SECTIONS
7. PORTFOLIO THUMBNAILS
8. PORTFOLIO LIGHTBOX (prettyPhoto)
9. ABOUT
10. SERVICES
11. TESTIMONIALS
12. CONTACT
13. DEMO (Color Switcher)
*/
/**********************************************
* 1. COLOR NOTE
**********************************************/
/*
See light.css and dark.css.
Edit section of index.html file to use the style you prefer.
*/
/**********************************************
* 2. BASE STYLES (Reset, Fonts, Links, etc.)
**********************************************/
/* html5doctor.com Reset v1.6.1 by Richard Clark (http://richclarkdesign.com) */
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{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}
/* Additional Reset */
img
{
vertical-align: bottom; /* remove gap from below ![]()
tags */
}
/**
* Body Font
*/
body,
input, textarea, select
{
font-family: Georgia, 'Bitstream Vera Serif', 'Times New Roman', Times, serif;
font-size: 17px;
line-height: 1.6em;
}
/**
* Heading and Button Font
* "Lato" by Lukasz Dziedzic
* SIL Open Font License (http://www.fontsquirrel.com/license/lato)
* Font kit from FontSquirrel (http://www.fontsquirrel.com/fonts/lato)
*/
@font-face {
font-family: 'LatoBlack';
src: url('../fonts/lato/Lato-Black-webfont.eot');
src: url('../fonts/lato/Lato-Black-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/lato/Lato-Black-webfont.woff') format('woff'),
url('../fonts/lato/Lato-Black-webfont.ttf') format('truetype'),
url('../fonts/lato/Lato-Black-webfont.svg#LatoBlack') format('svg');
font-weight: normal;
font-style: normal;
}
/* Links */
a
{
text-decoration: none;
}
/* Headings */
h1, h2, h3, h4, h5, h6,
.ppt /* lightbox title */
{
font-family: LatoBlack, Arial, Helvetica, sans-serif;
text-transform: uppercase;
}
h1
{
font-size: 25px;
}
h2,
.ppt /* lightbox title */
{
font-size: 22px;
}
h3
{
font-size: 19px;
}
h4
{
font-size: 17px;
}
h5
{
font-size: 15px;
}
h6
{
font-size: 13px;
}
/* Paragraph */
p,
h1, h2, h3, h4, h5, h6,
ul, ol,
.p /* manual application */
{
margin: 24px 0;
}
/* Lists */
ul, ol
{
padding-left: 20px;
}
/* Blockquote */
blockquote
{
margin-left: 30px;
font-style: italic;
}
/* Form Fields */
input[type=text],
input[type=email],
input[type=url],
input[type=search],
input[type=number],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
textarea,
select
{
padding: 5px 7px;
margin: 0;
border: 1px;
border-style: solid;
font-size: 0.9em;
/* Rounded Corners */
-moz-border-radius: 3px; /* FF */
-webkit-border-radius: 3px; /* Safari, Chrome */
border-radius: 3px; /* modern browsers */
}
input[type=radio],
input[type=checkbox]
{
margin-bottom: 7px;
}
/* Font Weight */
.bold
{
font-weight: bold;
}
.nonbold
{
font-weight: 400;
}
/* Clear */
.clear
{
clear: both;
visibility: hidden;
}
/* Hidden */
.hidden
{
display: none;
}
/* Hidden but active element, such as a hidden submit */
.invisible
{
width: 1px;
height: 1px;
visibility: hidden;
left: 30000px;
}
/**********************************************
* 3. CONTENT ELEMENTS (Image Frames, Boxes, Buttons)
**********************************************/
/* Loading Indicator */
#loading-screen
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 9999;
}
#loading-indicator
{
position: fixed;
top: 50%;
left: 50%;
margin-top: -16px; /* half of width */
margin-left: -16px;
width: 32px;
height: 32px;
background-repeat: no-repeat;
z-index: 99999;
}
/* Image Frames */
.portfolio-thumbs li,
.service-image,
#about-portrait,
#map-container
{
/* Border Width */
padding: 5px;
/* Shadow */
-moz-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.20);
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.20);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.20);
/* Rounded Corners */
border-top-width: 1px;
border-left-width: 1px;
border-style: solid;
-moz-border-radius: 3px; /* FF */
-webkit-border-radius: 3px; /* Safari, Chrome */
border-radius: 3px; /* modern browsers */
}
/* Add 4-sided border for browsers not supporting box-shadow (IE7/8) */
.no-boxshadow .portfolio-thumbs li,
.no-boxshadow .service-image,
.no-boxshadow #about-portrait,
.no-boxshadow #map-container
{
border-bottom-width: 1px;
border-right-width: 1px;
}
/* Rounded Corners for images inside frames */
.portfolio-thumbs img,
.portfolio-thumb-overlay,
#about-portrait img,
.service-image img
{
border: 0px;
-moz-border-radius: 2px; /* FF */
-webkit-border-radius: 2px; /* Safari, Chrome */
border-radius: 2px; /* modern browsers */
}
/* Transparent Box */
.box
{
padding: 22px;
/* Rounded Corners */
border-width: 1px;
border-style: solid;
-moz-border-radius: 3px; /* FF */
-webkit-border-radius: 3px; /* Safari, Chrome */
border-radius: 3px; /* modern browsers */
/* Shadow */
-moz-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.15);
}
/* Text Margin Adjustments */
.box p
{
margin: 18px 0 0 0;
}
.box p:first-child
{
margin-top: 0;
}
/* Link Buttons */
a.button
{
display: inline-block;
padding: 3px 16px;
min-width: 90px;
white-space: nowrap;
font-family: LatoBlack, Arial, Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.6);
text-align: center;
/* Rounded Corners */
border-width: 1px;
border-style: solid;
-moz-border-radius: 2px; /* FF */
-webkit-border-radius: 2px; /* Safari, Chrome */
border-radius: 2px; /* modern browsers */
/* Shadow */
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
/* Despress on Click */
a.button:active
{
position: relative;
top: 1px;
left: 1px;
/* Lesser Shadow */
-moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
/**********************************************
* 4. HEADER (Logo, Navigation)
**********************************************/
/* Header Bar */
#header
{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 98px; /* 18px bigger than #header-content height to allow for background's shadow */
z-index: 100; /* above section content, below headings */
background-position: bottom;
}
/* Hide header initially for page load effect (if JS is enabled) */
.js #header
{
visibility: hidden;
}
/* Center Logo / Navigation */
#header-content
{
width: 940px;
height: 80px; /* same as #header-content line-height below */
margin: 0px auto;
background-repeat: no-repeat;
background-position: left center; /* center logo vertically (method used to accommodate IE7) */
/* background-image for logo is specified in light/dark.css */
}
/* Hide H1 in lieu of logo image (HTML5 requires heading in ) */
#header-content h1
{
display: none;
}
/* Navigation */
#nav
{
float: right;
position: relative;
line-height: 80px; /* same as #header-content height above */
}
#nav ul
{
margin: 0;
padding: 0;
}
/* Links */
#nav li
{
float: left;
margin-left: 20px;
font-style: italic;
font-size: 18px;
letter-spacing: 0px;
}
#nav li:first-child
{
margin-left: 0;
}
#nav a
{
line-height: 22px;
}
/**********************************************
* 5. FOOTER (Copyright Notice)
**********************************************/
#footer
{
padding: 36px 0;
text-align: center;
}
/* Hide footer initially for page load effect (if JS is enabled) */
.js #footer
{
visibility: hidden;
}
/**********************************************
* 6. SECTIONS
**********************************************/
/* Sections Container */
#sections
{
width: 940px;
margin: 0 auto;
}
/* Single Section */
#sections > section
{
clear: both;
margin-bottom: 700px; /* space between sections to push next off screen */
padding-top: 125px; /* allow space for fixed nav bar */
position: relative;
}
/* Hide sections initially for page load effect (if JS is enabled) */
.js #sections > section
{
visibility: hidden;
}
/* Section Header */
#sections > section header
{
position: relative;
}
/* Section Headings */
#sections > section header h1,
#sections > section header h2
{
z-index: 200; /* above header */
position: relative;
margin: 0;
line-height: 1.2em;
letter-spacing: -1px;
display: inline;
}
/* Primary Heading */
#sections > section header h1
{
font-family: LatoBlack, Arial, Helvetica, sans-serif;
font-size: 50px;
text-transform: uppercase;
}
/* Introduction with Dual Headings */
#sections > section header.intro
{
text-align: center;
}
/* Side-by-side Headings */
#sections > section header.intro h1,
#sections > section header.intro h2
{
display: inline;
}
/* Primary Heading (Dual Headings) */
#sections > section header.intro h1
{
font-size: 50px;
}
/* Secondary Heading (Dual Headings) */
#sections > section header.intro h2
{
margin-left: 20px;
font-family: Georgia, 'Bitstream Vera Serif', 'Times New Roman', Times, serif;
font-weight: 400;
font-size: 52px;
letter-spacing: -2px;
font-style: italic;
text-transform: none;
}
/* Intro Line / Paragraph Beneath Headings */
#sections > section header.intro p
{
margin-top: 18px;
font-size: 22px;
line-height: 1.6em;
}
/* Section Content */
.content
{
position: relative;
}
/* Larger Intro */
p.intro
{
margin-top: 22px;
font-size: 26px;
font-style: italic;
line-height: 1.4em;
}
/**********************************************
* 7. PORTFOLIO THUMBNAILS
**********************************************/
/* Thumbnail List */
.portfolio-thumbs /* */
{
margin-top: 28px;
margin-bottom: 0;
margin-right: -20px; /* negative of .portfolio-thumbs li + a bit more for border/shadow insurance*/
padding: 0;
clear: both;
overflow: hidden; /* solves spacing glitch above portfolio in Opera */
z-index: 50; /* higher than controls */
position: relative; /* z-index doesn't work without this */
}
/* Thumbnail Container */
/* Rounded corners and shadows are applied via "Image Frames" above */
.portfolio-thumbs li
{
list-style: none;
float: left;
margin-right: 19px; /* negative of .portfolio-thumbs li, also adjust .no-boxshadow .portfolio-thumbs li */
margin-bottom: 19px;
}
/* Make space for 4-sided border for browsers not supporting box-shadow (IE7/8) */
.no-boxshadow .portfolio-thumbs li
{
margin-right: 18px; /* same as .portfolio-thumbs li but minus 1px for space for border on right side */
}
/* Remove Rounded Corners (before Quicksand filter effect for major performance increase) */
.portfolio-thumbs li.portfolio-square-corners /* applied w/jQuery */
{
-moz-border-radius: 0px; /* FF */
-webkit-border-radius: 0px; /* Safari, Chrome */
border-radius: 0px; /* modern browsers */
}
/* Image & Overlay Rounded Corners */
.portfolio-thumbs img,
.portfolio-thumb-overlay
{
width: 210px;
height: 140px;
}
/* Title Overlay (jQuery Fade In on Hover) */
.portfolio-thumb-overlay
{
display: table;
position: absolute;
cursor: pointer; /* helps IE7 */
}
.portfolio-thumb-overlay h2
{
display: table-cell; /* to assist w/vertical centering */
vertical-align: middle;
padding: 10px;
font-family: Georgia, 'Bitstream Vera Serif', 'Times New Roman', Times, serif;
font-size: 18px;
font-style: italic;
font-weight: normal;
line-height: 21px;
text-transform: none;
text-align: center;
}
/* Hide Description Container */
.portfolio-description
{
display: none;
}
/* Category Filters & Pagination */
#portfolio-controls
{
position: relative;
clear: both;
margin-top: 4px;
}
/* Hide Controls if JS Off */
.no-js #portfolio-controls
{
display: none;
}
/* Category Filter Controls */
#portfolio-filters /* */
{
display: inline-block; /* shrink box to fit */
margin: 0 150px 0 1px; /* guarantee room for page controls, especially browsers not supporting inline-block */
padding: 4px;
}
#portfolio-filters li
{
list-style: none;
display: inline;
margin-left: 5px;
font-family: LatoBlack, Arial, Helvetica, sans-serif;
font-size: 14px;
text-transform: uppercase;
}
#portfolio-filters li:first-child
{
margin-left: 0;
}
#portfolio-filters a
{
padding: 5px 10px;
border: 0px;
/* Rounded Corners for selected item */
-moz-border-radius: 2px; /* FF */
-webkit-border-radius: 2px; /* Safari, Chrome */
border-radius: 2px; /* modern browsers */
}
/* Page Numbers */
#portfolio-page-numbers
{
display: none; /* jQuery shows if more than 1 page */
position: absolute;
top: 2px;
right: 90px;
font-size: 15px;
}
/* Page Buttons (CSS Sprites) */
#portfolio-page-buttons
{
position: absolute;
top: -2px;
right: -7px;
display: none; /* jQuery shows if more than 1 page */
}
#portfolio-page-prev,
#portfolio-page-next
{
display: block;
float: left;
width: 39px;
height: 39px;
background-repeat: no-repeat;
text-indent: -10000px;
}
#portfolio-page-prev
{
background-position: 0 0;
}
#portfolio-page-prev:hover
{
background-position: 0 -39px;
}
#portfolio-page-prev:active
{
background-position: 0 -78px;
}
#portfolio-page-prev.page-button-disabled
{
background-position: 0 -117px;
cursor: default;
}
#portfolio-page-next
{
background-position: -39px 0;
}
#portfolio-page-next:hover
{
background-position: -39px -39px;
}
#portfolio-page-next:active
{
background-position: -39px -78px;
}
#portfolio-page-next.page-button-disabled
{
background-position: -39px -117px;
cursor: default;
}
/**********************************************
* 8. PORTFOLIO LIGHTBOX (prettyPhoto)
**********************************************/
/* Background Overlay */
.pp_overlay /* note: this is 100% transparent in prettyPhoto config so that background shows */
{
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 9500;
}
/* Loading Indicator */
.pp_loaderIcon
{
position: absolute;
top: 50%;
left: 50%;
display: block;
height: 32px;
width: 32px;
margin: -16px 0 0 -16px;
background-position: center center;
background-repeat: no-repeat;
}
/* Container Elements */
.pp_pic_holder
{
display: none;
position: absolute;
width: 100px;
z-index: 10000;
}
.pp_pic_holder a:focus
{
outline: none;
}
.pp_content_container
{
position: relative;
text-align: left;
width: 100%;
}
/* Image/Video Frame */
.pp_content
{
height: 40px;
min-width: 40px;
padding: 5px; /* border width */
border: 0px; /* prepare for rounded corners */
/* Shadow */
-moz-box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.10);
-webkit-box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.10);
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.10);
}
/* Rounded corners are removed before transition and applied after because performance is hindered while rounded corners are present */
.pp_content.rounded_corners
{
-moz-border-radius: 3px; /* FF */
-webkit-border-radius: 3px; /* Safari, Chrome */
border-radius: 3px; /* modern browsers */
}
* html .pp_content
{
width: 40px;
}
.pp_fade
{
display: none;
}
.pp_hoverContainer
{
position: absolute;
top: 0;
width: 100%;
z-index: 2000;
}
/* Image/Video */
#pp_full_res
{
line-height: 1 !important;
}
/* Rounded Corners (Images) */
#pp_full_res img
{
-moz-border-radius: 2px; /* FF */
-webkit-border-radius: 2px; /* Safari, Chrome */
border-radius: 2px; /* modern browsers */
}
/* Hover Controls (Over Image) */
.pp_next,
.pp_previous
{
display: block;
height: 100%;
text-indent: -10000px;
width: 49%;
}
.pp_next
{
float: right;
}
.pp_next:hover
{
background-position: center right;
background-repeat: no-repeat;
cursor: pointer;
}
.pp_previous
{
float: left;
}
.pp_previous:hover
{
background-position: center left;
background-repeat: no-repeat;
cursor: pointer;
}
.pp_expand,
.pp_contract
{
position: absolute;
top: 10px;
right: 20px;
display: none;
width: 39px;
height: 39px;
z-index: 20000;
cursor: pointer;
text-indent: -10000px;
}
.pp_expand
{
background-position: -117px 0;
}
.pp_expand:hover
{
background-position: -117px -39px;
}
.pp_expand:active
{
background-position: -117px -78px;
}
.pp_contract
{
background-position: -156px 0;
}
.pp_contract:hover
{
background-position: -156px -39px;
}
.pp_contract:active
{
background-position: -156px -78px;
}
/* Details Beneath */
.pp_details
{
position: relative;
float: right;
margin: 10px 0 17px 0;
}
/* Title */
.ppt /* same as H2 - look above */
{
display: none;
z-index: 9999;
margin: 13px 12px 0 18px;
}
/* Description */
.pp_description
{
display: none;
margin: 12px 12px 0 18px;
}
/* Navigation */
.pp_nav
{
width: 200px;
height: 40px;
position: absolute;
top: 6px;
right: 8px;
}
/* Item Numbering */
.currentTextHolder
{
position: absolute;
top: 6px;
right: 132px;
font-size: 15px;
}
/* Prev / Next Buttons */
.pp_arrow_previous,
.pp_arrow_next
{
display: block;
overflow: hidden;
position: absolute;
top: 0px;
height: 39px;
width: 39px;
text-indent: -10000px;
}
.pp_arrow_previous
{
right: 78px;
background-position: 0 0;
}
.pp_arrow_previous:hover
{
background-position: 0 -39px;
}
.pp_arrow_previous:active
{
background-position: 0 -78px;
}
.pp_arrow_next
{
right: 39px;
background-position: -39px 0;
}
.pp_arrow_next:hover
{
background-position: -39px -39px;
}
.pp_arrow_next:active
{
background-position: -39px -78px;
}
/* Close Button */
.pp_close
{
position: absolute;
top: 0px;
right: 0px;
display: block;
width: 39px;
height: 39px;
text-indent: -10000px;
cursor: pointer;
background-position: -78px 0;
}
.pp_close:hover
{
background-position: -78px -39px;
}
.pp_close:active
{
background-position: -78px -78px;
}
/**********************************************
* 9. ABOUT
**********************************************/
/* Portrait Image */
#about-portrait
{
float: right;
margin: 14px 0 10px 18px;
/* Rounded corners and shadow is applied via "Image Frames" above */
}
/* Skills & Experience */
#about-skills,
#about-experience
{
float: left;
position: relative;
top: 8px;
width: 405px; /* half of full width minus section padding/spacing/borders */
}
/* Heading */
#about-skills h2,
#about-experience h2
{
margin-top: 0;
margin-bottom: 20px;
}
/* Lists */
#about-skills ul,
#about-experience ul
{
margin: 0;
padding: 0;
list-style-type: none; /* prepare for check icon */
font-style: italic;
}
/* Check Icon */
#about-skills li,
#about-experience li
{
padding: 0 0 0 28px; /* make room for icon */
background-position: 1px 0;
background-repeat: no-repeat;
}
/* Skills */
#about-skills
{
margin-right: 38px; /* space between sections */
}
/* Two Columns (lists) side-by-side */
#about-skills ul
{
float: left;
width: 170px;
}
/**********************************************
* 10. SERVICES
**********************************************/
/* Quote Button */
#quote-button
{
position: absolute;
top: 15px;
right: 0px;
}
/* Service Columns */
.services /* */
{
margin-top: 30px;
margin-right: -20px; /* make right negative of ul.services li */
margin-bottom: 0px;
padding: 0;
clear: both;
overflow: hidden; /* solves a few glitches */
}
/* Single Column */
.services li
{
list-style: none;
float: left;
width: 220px;
margin-right: 20px; /* negative of margin-right ul.services li */
margin-bottom: 20px; /* in case a secodn row is added */
}
/* Image Container */
.service-image
{
list-style: none;
float: left;
margin-bottom: 25px;
}
/* Actual Image */
.service-image img
{
width: 210px;
height: 140px;
/* Rounded corners and shadows are applied via "Image Frames" above */
}
/* Heading */
.services h2
{
margin-bottom: 0;
padding-left: 2px;
}
/* Description */
.services p
{
margin: 18px 0;
padding-left: 2px;
}
/**********************************************
* 11. TESTIMONIALS
**********************************************/
/* Testimonials List */
#testimonials
{
margin-top: 34px;
margin-right: -28px; /* same as margin-right below */
}
/* Testimonial Box */
.testimonial /* .box is also applied in HTML */
{
margin-bottom: 28px;
margin-right: 28px;
width: 248px; /* one third of width minus margins, padding, borders */
float: left;
font-style: italic;
}
/* Name (and note) */
.testimonial-name
{
font-style: normal;
}
/* Bold Name */
.testimonial-name b
{
font-family: LatoBlack, Arial, Helvetica, sans-serif;
font-size: 16px;
text-transform: uppercase;
}
/* Prevent big negative right margin from extending document, causing 1024x* users to see Y scrollbar */
#section-testimonials
{
overflow: hidden;
}
/**********************************************
* 12. CONTACT
**********************************************/
#section-contact > header
{
margin-bottom: 28px;
}
/* Social Media Icons */
.social-media /* */
{
position: absolute;
top: 0px;
right: 0px;
margin: 14px 0 0 0;
padding: 0;
list-style: none;
z-index: 200; /* above header */
}
.social-media li
{
margin-left: 8px; /* space between icons */
float: left;
}
/* use on tags */
.icon-twitter,
.icon-facebook,
.icon-google-plus,
.icon-dribbble,
.icon-forrst,
.icon-flickr,
.icon-youtube,
.icon-vimeo,
.icon-skype,
.icon-linkedin
{
display: block;
float: left;
width: 38px;
height: 44px;
background-repeat: no-repeat;
text-indent: -10000px;
}
.icon-twitter
{
background-position: 0 0;
}
.icon-facebook
{
background-position: -50px 0;
}
.icon-google-plus
{
background-position: -100px 0;
}
.icon-dribbble
{
background-position: -150px 0;
}
.icon-forrst
{
background-position: -200px 0;
}
.icon-flickr
{
background-position: -250px 0;
}
.icon-youtube
{
background-position: -300px 0;
}
.icon-vimeo
{
background-position: -350px 0;
}
.icon-skype
{
background-position: -400px 0;
}
.icon-linkedin
{
background-position: -450px 0;
}
/* Location Map */
#map-container
{
margin: 0 0 32px 0;
}
#google-map
{
width: 929px;
height: 200px;
}
/* Contact Form (Left) */
#contact-form-container
{
width: 500px;
float: left;
padding-left: 2px;
}
/* Shown after failed submission */
#contact-form-message
{
display: none; /* filled/shown after AJAX submit */
}
/* Error List */
#contact-error ul
{
margin: 0;
padding: 0;
list-style: none;
font-style: italic;
}
#contact-error li
{
padding: 0 0 0 16px; /* make room for custom icon (in light/dark.css) */
background-position: 0 11px;
background-repeat: no-repeat;
}
/* Success Message */
#contact-success
{
font-style: italic;
}
/* Contact Form */
#contact-form
{
margin-top: 22px;
}
/* Name & E-mail Fields */
.contact-field
{
clear: left;
}
#contact-form label
{
width: 80px;
float: left;
padding-top: 5px;
font-style: italic;
}
#contact-form input
{
width: 250px;
height: 22px;
}
#contact-form input,
#contact-form select
{
margin: 3px 0;
}
/* Message Field */
#contact-form textarea
{
width: 99%;
height: 150px;
margin-top: 10px;
}
/* Submit Button */
#contact-button
{
margin-top: 18px;
}
/* Address & Phone Boxes (Right) */
#contact-info
{
width: 400px;
float: right;
}
/* Single Box */
#contact-info .box
{
margin-bottom: 32px;
}
/* Headings */
#contact-form-container h2,
#contact-info h2
{
margin: 0;
}
/* Content */
#contact-info p
{
margin-top: 20px;
}
/**********************************************
* 13. DEMO (Color Switcher)
**********************************************/
/* these styles are for the demo and can be removed for production (js/demo.js from as well) */
/* Color Switcher */
#color-switcher /* with .box applied */
{
position: fixed;
top: 215px;
left: -5px; /* hide those rounded corners on left */
padding: 0 0 0 5px;
margin: 0;
list-style: none;
}
/* Swatch Link */
#color-switcher li a
{
display: block;
margin: 7px;
width: 20px;
height: 20px;
/* Rounded Corners */
border: 1px solid #555;
-moz-border-radius: 2px; /* FF */
-webkit-border-radius: 2px; /* Safari, Chrome */
border-radius: 2px; /* modern browsers */
}