/*  

	CSS Last Updated				09/11/2010 
	© Copyright by Alex McDonald    http://alextmcdonald.com	
	
	============================================	*/

body {margin:0 auto; background: url(../images/bg.jpg) fixed; font-family:Helvetica Neue, Arial; color:#000; height:auto}
#wrapper { margin:0 auto; width:960px; clear:both;height:auto}
img {border:0;}
br {clear:all}
a { text-decoration:none !important; color:#000;}
p.small a:hover {border-bottom:1px dotted #000;}

/* Header */

#headerbg {background-color: #F2F2F2; height:auto;}
#header {width:960px; margin:0 auto; padding-top:66px; margin-bottom:0px}
#header a {text-decoration:none}
::selection { background: transparent; }
::-moz-selection { background: transparent; }

/* Navigation */

#navigation {margin-left: 188px; font-size:26px; letter-spacing:-1px; font-weight:600; top:34px; position:absolute; min-width:773px}
#navigation a {margin-right: 30px; color:#99D43E; text-decoration:none;}
#navigation a:hover {margin-right: 30px; color:#99D43E;} .work {background: url(../images/work-arrow.png) right 12px no-repeat; padding-right:12px;}
.checkmygrid {font-size:26px; letter-spacing:-1px; font-weight:600; display:inline;background: url(../images/grid-check.png) left center no-repeat; padding-left:25px; margin-left:90px}

#logo {float:left; width:170px; height:159px; background:url(../images/logo-bottom.png) bottom left no-repeat #000; color:#FFF; letter-spacing:-1px; font-size:28px; font-weight:bold; margin-top:34px; bottom: 0px;}
#vcard {float:right; color:#000;width: 120px;height: 120px; letter-spacing:-1px; font-size:20px; font-weight:bold; margin-top:53px; text-align:center;background: url(../images/heart.png) top right no-repeat; overflow:visible}
#vcard-about {float:right; color:#000;width: 120px;height: 120px; letter-spacing:-1px; font-size:20px; font-weight:bold; margin-top:53px; text-align:center;background: url(../images/heart.png) top right no-repeat; overflow:visible; margin-left:-40px; z-index:9999}
#vcard .inner, #vcard-about .inner { height: 83px; -moz-border-radius:60px; -webkit-border-radius: 60px;width: 120px; padding-top:37px; background:#99D43E; line-height:115%;}

/* Main Content */

.main a {text-decoration:none;}
.main-row {float:left; width:771px; margin-bottom:15px; margin-top:-1px; background:url(../images/large-loading.gif) center center repeat-x;}
#main-content {float:right;display:inline; width:770px; margin:0; padding:16px 0px 0px 20px; clear:both} #main-content ul {margin:0; list-style:none; display:inline} #main-content li {margin:0; display:inline; list-style:none;}  .arrow {height:58px; padding:33px 7px 0px 6px; display:block; float:left;}
 #main-content li.first {margin:0; display:inline; list-style:none; margin-left:-41px;} #main-content .last { background:#000; color:#fff; width:230px; height:100px; display:inline-block;font-size:42px; font-weight:bold; line-height:100%; letter-spacing:-4px; padding:101px 0px 20px 10px; margin-left:20px;text-decoration:none} #main-content li a img{ border-top:1px solid #ccc; border-left:1px solid #ccc;text-decoration:none} #main-content li a:hover img{ border-top:1px solid #000; border-left:1px solid #000;} .new {position: absolute; font-weight:600; padding:5px 12px; background:#99D43E; margin-top:10px; margin-left:190px;} 
 
/* Sidebar */ 

#sidebar {height:auto;float:left; display:inline; width:155px; margin-top:1px} .side {background:#000; width:158px; color:#fff; padding:10px 0px 10px 12px; margin-top:14px;} .side p {font:Helvetica Neue; font-weight:lighter; font-size:14px; margin-bottom:5px; width:145px} .links { background:url(../images/side-bottom.png) top right no-repeat; float:left; padding:20px 0px 0px 10px; width:160px;} .links p {margin-top:-5px; font-size:10px; color:#6F6F6F} .links a {color:#6F6F6F; border:none; text-decoration:none} .links a:hover {color:#6F6F6F; border:none; border-bottom:1px dotted #6f6f6f} #thumb { float:right; margin-top:-1px;} #thumb a:hover img { opacity: .75;border:1px solid #999;} .side a {color:#FFF; text-decoration:none} .side a:hover {color:#99D43E} #thumb img {border:1px solid #ccc;}

/* Footer */ 

#footer {clear:both; height:100px; padding-top:-2px} #footer p {margin:0; padding-top:1px} .left {float:left; font-size:10px; color:#6F6F6F; padding:10px 9px;} .left a {color:#6F6F6F; border:none; text-decoration:none} .left a:hover {color:#6F6F6F; border:none; border-bottom:1px dotted #6f6f6f} .right {float:right; font-size:10px; padding:11px 0px; width:770px; border-top:5px solid #000;} .right h1 {font-size:22px; margin:0; color:#000; letter-spacing:-1px;} .right p {font-size:13px; margin:0; color:#333;font-weight:lighter;} .right span.copyright a {font-size:54px; margin:0; color:#99D43E; line-height:100%; font-weight:500; text-decoration:none} .inner-left {float:left; margin:0; width:299px} .inner-left a {color:#333; text-decoration:none} .inner-left a:hover {color:#333; text-decoration:none; border-bottom:1px dotted #6f6f6f;} .inner-right {float:left; margin-top:-4px} .inner-right ul {list-style:none; display:inline; margin-left:-25px;} .inner-right li {display:inline; margin-right:16px;} li.html { display:inline; list-style:none; margin-right:11px; margin-left:7px;} li.css { display:inline; list-style:none; margin-right:0px;} li.divider {background:#ccc; height:40px; width:1px; display:inline-block; margin-right:13px} .inner-right a:hover {opacity:.75;} 

/* Homepage Thumbs */   

.thumbs li a { display:block; float:left; width:238px; height:218px; background-image:url(../images/thumbs.jpg); border:1px solid #ccc; color:#000; margin-bottom:6px; text-decoration:none}  .thumbs li a.aerialink { background-position:0 0; } .thumbs li a.robertson { background-position:-240px 0; margin-left:25px } .thumbs li a.brianquist { background-position:-480px 0; margin-left:25px;} .thumbs li a.mfss { background-position:-720px 0; } .thumbs li a.greentango { background-position:-960px 0; margin-left:25px } .thumbs li a.diversified { background-position:-1200px 0; margin-left:25px;} .thumbs li a.reach { background-position:-1440px 0; } .thumbs li a.scp { background-position:-1680px 0; margin-left:25px } .thumbs li a.project { background-position:-1920px 0; margin-left:25px; }  #image {margin-top:-1px;margin-left:-1px; width:640px; border:1px solid #CCC; background:url(../images/large-loading.gif) 185px 150px; background-repeat:no-repeat} .thumbs li.load { background:url(../images/loading.gif) center center no-repeat;} .thumbs li a:hover { border:1px solid #999;}

/* Text Specific Properties */

#header h1 {font-size:222px; line-height:98%;font-weight:bold; letter-spacing:-20px; display:inline; margin:0; margin-left:20px;}
#header h1.hello {font-size:222px; line-height:98%;font-weight:bold; letter-spacing:-20px; display:inline; margin:0; margin-left:5px;}
#header h1.contact {font-size:160px; line-height:137%;font-weight:bold; letter-spacing:-17px; display:inline; margin:0; margin-left:14px;}

h2.main {font-size:26px; letter-spacing:-1px; color:#99D43E;margin:9px 0px 0px 188px;}
h2.main a {font-size:26px; letter-spacing:-1px; color:#99D43E; text-decoration:none !important}
h2.main a:hover {font-size:26px; letter-spacing:-1px; color:#99D43E; text-decoration:overline !important} .red {color:#F00;}
h2.prev {font-size:26px; letter-spacing:-1px; color:#99D43E;margin:13px 0px 0px 188px; display:inline; float:left}
h2 a:hover, h2 a:hover { text-decoration:overline !important}
h2.next {font-size:26px; letter-spacing:-1px; color:#99D43E; display:inline; float:right;margin:13px 132px 0px 0px;text-decoration:none !important}
h2.sidetitle {font-size:26px; letter-spacing:-1px; color:#99D43E; margin:0px; margin-bottom:-5px}


.ghost { opacity: 1; /* -webkit-transition: opacity .2s linear; */ }
.ghost:hover { opacity: .75; }

span.amp {font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;font-weight: normal;font-style: italic;}
span.side-title {color:#99D43E}
span.level {font-size:22px; letter-spacing:-3px; font-weight:600; margin-left:-3px}
span.label {font-size:22px; letter-spacing:-1px; font-weight:600;float:left;}

p.bold {font:Helvetica Neue; font-size:18px; color:#333}
p.small {font:Helvetica Neue; font-weight:lighter; font-size:14px; color:#333; line-height:150%; max-width:460px}
p.quote {font:Helvetica Neue; font-weight:lighter; font-size:14px; color:#333; line-height:150%; max-width:460px; margin:0;}
h3.skills {font-size:26px; letter-spacing:-1px; font-weight:600; float:right; margin:0; padding-right:5px}
h3 {font-size:26px; letter-spacing:-1px; font-weight:600;margin:10px 0px;}


/* About Page Charts */

.services {height: 57px; -moz-border-radius:60px; -webkit-border-radius: 60px;width: 95px; padding-top:34px; background:#99D43E; line-height:115%; color:#000; letter-spacing:-1px; font-size:20px; font-weight:bold; text-align:center; float:left;}

#skills {width:275px; height:350px; float:right; display:block; margin-left:30px; margin-top:20px; margin-right:5px;}
.chart-web { height:153px; width:30px; display:block; float:left; background:#99D43E; margin-top:17px; text-align:center}
.chart-graphic {height:119px; width:30px; display:block; float:left; background:#99D43E; text-align:center; margin-top:51px; margin-left:10px}
.chart-html {height:170px; width:30px; display:block; float:left; background:#99D43E; text-align:center; margin-left:10px}
.chart-css {height:170px; width:30px; display:block; float:left; background:#99D43E; text-align:center; margin-left:10px}
.chart-jquery {height:102px; width:30px; display:block; float:left; background:#99D43E; text-align:center; margin-top:68px; margin-left:10px}
.chart-php {height:85px; width:30px; display:block; float:left; background:#99D43E; text-align:center; margin-top:53px; margin-left:10px}
.chart-flash {height:68px; width:30px; display:block; float:left; background:#99D43E; text-align:center; margin-top:70px; margin-left:10px}

.label-web {float:left;-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); display:inline; margin-top:55px; margin-left:-42px;}
.label-graphic { float:left;-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); display:inline; margin-top:70px; margin-left:-90px}
.label-html {float:left;-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); display:inline; margin-top:27px; margin-left:-63px}
.label-css {float:left;-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg); display:inline; margin-top:18px; margin-left:-17px}
.label-jquery {float:left;-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); display:inline; margin-top:31px; margin-left:-10px}
.label-php {float:left;-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); display:inline; margin-top:18px; margin-left:-14px}
.label-flash {float:left; width:15px;-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); display:inline; margin-top:3px; margin-left:10px}

#colophon {float:right; display:block; width:270px; height:300px; margin-left:30px; padding-right:10px;}

/* Tooltip */

.tooltip { background-color:#000; border:1px solid #fff; padding:10px 15px; width:150px; display:none; color:#fff; text-align:left; font-size:12px;
 /* outline radius for mozilla/firefox only */ -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000;
}

/* Contact Form */

.myform {margin-top:-5px}
.myform li {clear:both;font-size:14px; font-weight:lighter; padding-top:10px}
.myform input,
.myform textarea,
.myform select {  padding:5px; background: none;  border:none; border: 1px solid #aaa;  vertical-align:top; color: #aaa; font-size: 14px; font-family:Helvetica Neue; font-weight:200;}

.myform input:focus,
.myform textarea:focus,
.myform select:focus	{  background: none;  border-color: #000; border-style: solid; width: 278px; color: #666; font-family:Helvetica Neue;}

.myform textarea,
.myform input { width:278px;}
.myform select { width:278px; /* attempt to have equal length */} 
.myform input.sendbutton	{  width:107px; height: 22px;   padding:0px;  /* margin: 5px 3px 4px 0pt; */ font-size:1em; font-weight: bold; color: none; border: 0px solid white; } 

/* Drop-down Menu */ 

.link { height: 21px; width: 72px; margin: auto; display:inline; float:left; margin-right:30px;}
.link a:hover { border-top:1px solid #99D43E} 
ul.the_menu { margin:0;  padding:0;  list-style:none;}
.the_menu { display:none; width:250px; background-color: #000; opacity:.8;  -moz-box-shadow:0 0 10px #000; -webkit-box-shadow:0 0 10px #000; border:1px solid #FFF; z-index:9999;}
.the_menu li {  border-bottom:1px solid #FFF;}
.the_menu li a { text-decoration:none;  padding:5px;  display:block; font-size:18px; font-weight:100; letter-spacing:0px; color:#FFF; border:none !important;}
.the_menu li a:hover { font-weight:200; color: #FFF !important; background:#000 !important; opacity:1.0;}
.the_menu li.current a { font-weight:200; color: #FFF !important; background:#000 !important; opacity:1.0;}