/* -------------------- Base Style --------------------- */
body,html{height:100%;}
body{background-color: White; background-image: url(../images/gradbg.jpg); background-repeat: repeat-x; }

div .noMargin{ margin: 0;}
div .noBorder{ border: 0;}
div .clearLeft{ clear: left;}
div .clearRight{ clear: right;}
div .clearBoth{ clear: both;}

a{font-size:1em;color: #016295;text-decoration: none;background: url(../images/bluedot.gif) repeat-x bottom;  }
a:hover{color:#fff; background-color: #CC0033; text-decoration:none; }
p{font-size:1.6em; line-height:1.6em;}
img { border: none; }
.floatleft { float: left; 
margin: 0 1em 1em 0; }

/* -------------------- Typography --------------------- */
h2{ font-size:1.7em;font-variant: normal; color: #004489;font-weight: bold; padding:0;font-family: Georgia, "Times New Roman", Times, serif; }
h3{ font-size:1.6em;font-variant: normal; color: #21bede;font-weight:normal; padding:0.8em 0 0.4em 0;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
h4 {padding:0.1em 0 0.1em 0.4em; margin:0.5em 0 0.7em 0; color:#004489; font-size:1.4em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; border-top: #21bede solid 1px; border-bottom: #21bede solid 3px; background-color: #E9F0FF}

/* -------------------- gradient --------------------- */
.grad img {  height: 100%;  left: 0px;  position: absolute;  top: 0px;  width: 100%; }
* html .grad {  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/grad_white.png', sizingMethod='scale');}
* html .grad img {  display: none;}

/* -------------------- Page Container --------------------- */
.bg{height:50%;	width: 25%; top:0; right:0;position: absolute;background: url(../images/flake.png) -2em -3em no-repeat;}

#borderCtr { margin:auto; width: 100em;min-height:66%;height: auto !important;height: 66%; background: url(../images/middlesection.png) repeat-y; position: relative;z-index:1;}

/* -------------------- Border Container --------------------- */
#topBorder,#logo{	width:100em;	height:2.5em; }
#topBorder{margin:auto; width: 100em; background: url(../images/topsection.png) no-repeat;position: relative;z-index:1; }
#middleBorder{float:left;margin:auto; padding:0 3em 0 4em; width:91em;position:relative;z-index:1; }
#logo{margin:0em auto 0 auto;height:8em;width:98em;background: url(../images/ydlogonew4.png) 4em 1em no-repeat; }
#logo a{height:7em;width:30em;display:block; background: none;}

/* -------------------- Header --------------------- */
#header{float:left;width:75em;margin:1.2em 0 1em 1.5em;}
#header a{float:left;margin: 0em 3.5em 0 0em; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:1em; color:#004489;; background:none;}
#header a:hover{background-color: #CC0033;color: white; text-decoration:none; padding:0 0.3em 0 0.3em;}
#header a.current{ border-bottom: 3px solid #CC0066;}

#header li{display: inline;list-style-type: none; font-variant: small-caps; font-size: 1.8em; font-weight: bold;}

/* -------------------- HOME  - homeContent --------------------- */
#homeContent{float:left; width:60em;height:100%;margin:3em 0 1em 1.5em;display:inline;}
#homeContent h1{font-size:2.6em; font-weight: normal;font-variant: normal;color: #CC0033;margin-bottom:0.5em; font-family: Georgia, "Times New Roman", Times, serif;}
#homeRImage{float:right;position:relative;right:2em;top: 3.2em;}

.homeCol{ float:left;margin:2em 0 0 0;width:26em;background-color: #c1dde8; position: relative;  z-index: auto;}
.homeCol h2{padding: 0.6em 1em 0em 1.1em; font-family: Georgia, "Times New Roman", Times, serif; }
.homeCol p{padding: 0em 1.5em 1em 1.5em;position: relative;  z-index: auto;}
.hc2{margin-left:4em;}

/* -------------------- WHAT I DO / Resourses - Content --------------------- */
#whatContent{float:left; width:90em;height:100%;margin:3em 0 3em 1em;display:inline;}	 
#resourcesContent{float:left; width:90em;height:100%;margin:3em 0 3em 1em;display:inline;}

#whatContent h1,#resourcesContent h1{font-size:2.5em; font-weight: normal;font-variant: normal;color: #0099cc;margin-bottom:0.5em; font-family: Georgia;}
#whatContent h2,#resourcesContent h2{font-size:1.7em; font-variant: small-caps; letter-spacing: 0.1em; margin-top: 0.8em; border-top: #21bede solid 1px; border-bottom: #21bede solid 1px; background-color: #E9F0FF}
#whatContent ul,#resourcesContent ul{margin-left: 0;padding-left: 0;list-style: none;}
#whatContent li,#resourcesContent li{font-size:1.3em;padding-left: 1.2em; background-image: url(../images/arrow.gif);background-repeat: no-repeat;background-position: 0 0.3em;display:block;}

#whatWebDesign{float:left; width:26em;height:22em; background-color: #ECECEC;margin-right:3em;padding:1em;}
#whatPhotography{float:left; width:26em;height:23em; background-color: #ECECEC;margin:3em 3em 0 0 ;padding:1em;clear:both;}
#whatWebSkills{float:left; width:26em;height:22em; background-color: #ECECEC;padding:1em;}
#whatPrintDesign{float:left; width:26em;height:100%; background-color: #ECECEC;margin-left:3em;padding:1em;}

#resourceColor{float:left; width:26em;height:100%; margin-right:3em;padding:1em;}
#resourceDirectories{float:left; width:26em;height:100%; margin-right:3em;padding:1em;}
#resourcecategory{float:left; width:26em;height:100%; padding:1em;}
#resourceWebDev{float:left; width:26em;height:18em;margin-top:3em;padding:1em;}
#resourceCategories{float:left; width:26em;height:100%; background-color: #ECECEC;margin:3em 3em 0 0 ;padding:1em;}

/* -------------------- Portfolio  - portSampler --------------------- */
.portSampler{float:left; width:63em;height:100%;margin:1.1em 0 2em 0em;padding-bottom:2em; display:inline; border-bottom: 2px solid  #21bede;}
.portSampler img{padding:0.4em; margin-bottom:0.4em; background-color: #A4A4A4;}
.portSampler a{float:left;font-size: 1.2em;}
.portSampler h2{font-size: 1.3em; color:#0099cc; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}

.portSampler .goTop{float:right;padding:0;margin:0; }

.portDetails{float:left; width:29.5em;height:100%;margin:1em 0 0em 0em;padding-right:2em;}

.portRole{float:right; width:31.5em;height:100%;margin:1em 0 0em 0em;}
.portRole ul{margin-left: 0;padding-left: 0;list-style: none;}
.portRole li {font-size: 1.3em;padding-left: 1.2em;background-image: url(../images/arrow.gif);background-repeat: no-repeat;background-position: 0 0.3em;display:block;}

.portLinks{float:left; width:100%;}

/* -------------------- Portfolio side Menu --------------------- */
#portMenu{float:right;width: 20em;margin-top:13em;}
#portMenu a{padding: 0 0 0 0.5em;cursor: pointer; margin:0 0 0.3em 0; color:#CC0033;vertical-align: bottom;line-height:1.5em; height:1.5em;font-size:1.7em; font-weight: bold;font-variant: small-caps; background-color: #DCE1E7;display:block; background-image: none; }

#portMenuContent a{  display:block;  color:#444; font-weight: normal; font-variant: normal; padding:0.3em 0 0.3em 1em;font-size:1.2em; background: url(../images/arrow.gif) 0 0.9em no-repeat; }
#portMenuContent a:hover{  color: #CC0033; text-decoration:underline;  }

/* -------------------- About Page --------------------- */
.aboutCol{float:left; width: 23em; margin: 0 3em 1em 0em ; padding: 1em 1.4em 1.4em 1.4em;}	
.aboutCol ul{margin-left: 0;padding-left: 0;list-style: none;}
.aboutCol li {padding-left: 1.2em;background-image: url(../images/arrow.gif);background-repeat: no-repeat;background-position: 0 0.3em;font-size:1.2em;display:block;}

/* -------------------- Footer --------------------- */
#footer{ float:left;width:100%; height: 20em; background-color: #21bede;margin-top: 0px}
#footerContents{margin:auto; width:96em; }
#footer a{color: #004489; }
#footer a:hover{color:#fff; background-color:#CC0033}
.fcCtr{ float:left; margin: 1.1em 2em 0 2em; width:26em; text-align: left; }
.fcCtr p{ font-size:1.4em; color:white; font-weight: normal; }
.fcCtr h1{ color:#004489; font-size:2em; font-weight: bold;text-align: left;}

#copyright{float:left;width:30em;height:3em;margin: 0 0 0 2em;}
#copyright span{float:right;width:6em;height:4em; }
#copyright p{font-size:1.1em;float:left;width:100%;clear:both;color:white;}

/* -------------------- Contact form --------------------- */

.form_wrapper{ width:58em; margin:1em 0 0 0;float: left; padding: 1.1em;background-color:#D4E8EF; clear: left;}

fieldset {border: none;margin: 0;padding: 0;}

form ul{list-style-type: none;padding: 0.8em 0; margin: 0;}
form ul li{list-style-type: none;padding: 0.3em 0;margin: 0;line-height: 2.5em;}

form label {display: block; width: 160px; text-align: right; float: left; color: #004489;padding-right: 0.8em;}
form .text_field{width: 30em;}
form .select_field { width: 16em;}

form ul li.submit {
	padding: 15px 0 0 162px;
}