/* ---- Reset everything ---- */

* {
  	margin: 0;
  	padding: 0;
}

html {height:100%;
overflow-y: scroll;} /* fix for FF/Opera/Safari scrolbar jump*/

/*body {min-height:101%} /*another fix for Firefox, Opera scrollbar jump*/

body {
	font: 76%/1.6 Arial, Helvetica, sans-serif;
	background: url(../images/cork-background.jpg) repeat fixed left top;
	text-align: center;
}

/* body { overflow: -moz-scrollbars-vertical; } alternative fix for Firefox scrollbar jump*/

/* ---- Main layout elements ---- */

#wrapper {
	margin: 10px auto;
	min-width: 600px;
	text-align: left;
	background: #FFF;
	border-top: 1px dashed #CCC;
	border-right: 1px dashed #CCC;
	border-bottom: 1px dashed #DDD;
	border-left: 1px dashed #CCC;
}

#outerWrapper {
	margin: 0 auto; 
	max-width: 80em; /* see also ie6only.css */
} 

#header {
	height: 80px;
	padding: 10px 20px 0 15px;
	background: #69C url(../images/we-love-websites.gif) no-repeat 94% 100%;
	border-bottom: 1px solid #CCC;
}

#column1 {
	width: 25%;
	float: left;
	list-style: none;
	background: #FFF;
	margin-left: 0;
}

#content {
	width: 74%;
	float: right;
	background: #FFF;
}

#mainContent {
	width: 52%;
	margin: 0;
	float: left;
	padding-top: 10px;
	padding-bottom: 20px;
	background: #FFF;
}

#secondaryContent {
	width: 44%;
	display: inline; /* :IE double margin float bug */
	float: right;
	background-color:#FFF;
} 

#footer {
	clear: both;
	background:#FFF;
	padding: 1px 1px 20px 15px;
	border-top: 1px solid #DDD;
} 

/* ---- Two column pages ---- */

#contact #secondaryContent, #examples #secondaryContent {
	width: 4%;
}

#contact #mainContent, #examples #mainContent {
	width: 92%;
}

/* ---- Templates page ---- */

#templates #mainContent {
width: 70%;
}

#templates #secondaryContent {
	width: 26%;
}

/* ---- Link styles ---- */

a:link, a:visited {
	color: #36C;
	text-decoration: underline;
}

a:hover, a:focus {
	text-decoration: none;
}

a:active {
	text-decoration: none;
}

.cvw a:link, .cvw a:visited {
	color: #CCC;
	text-decoration: none;
}

/* ---- Navigation ---- */

#menu {
	width: 85%;
	overflow: hidden;
	margin: 0 0 1.5em;
	list-style-type: none;
}

#menu ul {
	list-style-type: none; 
	margin:0; 
	padding: 0; 
}

#menu li {
	float:left; 
	width: 100%; 
	margin:0; 
	padding: 0 
}

#menu a, #menu strong {
    display:block;
    width: 90%;
    padding: 3px 0 3px 20px;
    text-decoration: none;
    background-color:#FFF;
    color: #444;
    border-bottom: 1px #EEE solid;
}

#menu li span {
    display:block;
    width: 90%;
    padding: 3px 0 3px 20px;
    font-weight: bold;
    border-bottom: 1px #DDD solid;
}

  /* First level */
#menu li#active, #menu li strong {
    width: 90%;
    padding: 3px 0 3px 20px;
    font-weight: bold;
    color: #FFF;
    background-color:#AAB;
    border-bottom: 1px #EEE solid;
}

#menu li a {
	width: 90%; 
	padding-left: 20px; 
	background-color:#FFF; 
	color: #444;
}

#menu li a:focus, #menu li a:hover, #menu li a:active {
	background-color:#D8A15A;
	color: #FFF;
}

  /* Second level */
  #menu li ul li a,
  #menu li ul li#active,
  #menu li ul li strong,
  #menu li ul li span { width: 80%; padding-left: 40px; }

  #menu li ul li a { background-color:#f8f8f8; color: #666; }
  #menu li ul li a:focus,
  #menu li ul li a:hover,
  #menu li ul li a:active {
	background-color:#D8A15A;
	color: #FFF;
}

/* ---- Paddings ---- */

#secondaryContent {
  padding-top: 25px;
}

#column1 *, #secondaryContent * {
  padding-left: 15px;
  padding-right: 20px;
}

#column1 * *, #secondaryContent * * {
  	padding-left: 0;
  	padding-right: 0;
}

/* ---- Headings ---- */

h1, h2, h3 {
	font-weight: normal;
	border-bottom: 1px solid #EDEDE5;
	padding-bottom: 5px;
	color: #D8A15A;
	font-family: Georgia, "Times New Roman", Times, serif;
	letter-spacing: -1px;
}

h1, h2, h3, h4, p {
	margin: 1em 0 0.5em;
}

h1 {
	font-size: 200%;
	margin-top: 0;
}

h2 {
	font-size: 160%;
}

h3 {
	font-size: 140%;
}

h4 {
	font-size: 110%;
}

#slickbox h3 {
letter-spacing: normal;
}

/* ---- Main divs and other global styles ---- */

p, li {
	font-size: 1em;
}

#mainContent  .ul1 li {
	list-style: none;
}

#header h1 {
  	margin: 0;
}

#secondaryContent h2 {
  	font-size: 1.3em;
  	margin: 0;
}

#column1 h2 {
	color: #808080;
	font-size: 120%;
	margin-top: 0;
	line-height: 1.1em;
	border-bottom: 1px solid #EDEDE5;
	padding-bottom: 5px;
}

#mainContent p, #secondaryContent p {
	line-height: 1.4em;
	font-size: 100%;
}

#content li {
	margin-left: 20px;
	color: #3688BA;
	list-style: circle;
}

#mainContent li, #terms #secondaryContent li {
	list-style: disc;
	color: #3D76AF;
	margin-right: 10px;
}

#mainContent ul, #terms #secondaryContent ul {
	margin-top: 1.2em;
	margin-bottom: 1.2em;
}

#leftColInfo {
	border-top: 4px solid #EDEDE5;
	border-right: 1px solid #EDEDE5;
	border-bottom: 4px solid #EDEDE5;
	border-left: 1px solid #EDEDE5;
	padding-top: 10px;
	margin-bottom: 25px;
	width: 65%;
	margin-left: 20px;
	font-size: 90%;
	color: #7F7F7F;
}

/* ---- Paragraphs ---- */

.subdued {
	color: #7C7C7C;
}

/* ---- Images ---- */

img {
    border: none;
}

.featured {
	margin-top: 1em;
	border: 5px solid #EDEDE5;
}

#home .featureImage, #dreamweaver .featureImage, #price .featureImage, #webdesign .featureImage, #links .featureImage, #about .featureImage, #manage  .featureImage, #search .featureImage, #portfolio .featureImage  {
	height: 246px;
	width: 100%;
	display: block;
	background: url(../images/iStock_000009291672Small-450x299.jpg) no-repeat left top;
	border: 2px solid #F1DFC7;
	max-width:450px;
}

#dreamweaver .featureImage {
	background: url(../images/iStock_000003921899-450x300.jpg) no-repeat left top;
}

#price .featureImage{
	background: url(../images/iStock_000000182374_2-450x300.jpg) no-repeat 0px 60%;
}

#webdesign .featureImage{
	background: url(../images/iStock_000000834338-450x300.jpg) no-repeat left top;
}

#links .featureImage {
	background: url(../images/iStock_000002902405-450x300.jpg) no-repeat left top;
}

#about .featureImage {
	background: url(../images/iStock_000004266855-450x301.jpg) no-repeat left top;
}

#manage .featureImage {
	background: url(../images/iStock_000000963175-450x300.jpg) no-repeat left top;
}

#search .featureImage {
	background: url(../images/11469-org-450x300.jpg) no-repeat left top;
}

#portfolio .featureImage {
	background: url(../images/iStock_000006642495-450x299.jpg) no-repeat left top;
}

/*a img:hover {
	opacity: 0.8;
}*/

/* ---- Side boxes ---- */

#secondaryContent .sideBox, #secondaryContent .sideBox2, #secondaryContent .sideBox3, #secondaryContent .sideBox4  {
	background: #D1E0EF url(../images/sideBox-bottomright.gif) no-repeat right bottom;
	width: 90%;
	padding: 0 10px 0 0;
	margin-bottom: 15px;
}

#secondaryContent .sideBox2 {
	background: #B5E6CD url(../images/sideBox2-bottomright.gif) no-repeat right bottom;
}

#secondaryContent .sideBox3 {
	background: #FAF3EB url(../images/sideBox3-bottomright.gif) no-repeat right bottom;
}

.highlighted {
	background: #F1F0B4;
	padding: 10px;
}

#secondaryContent .sideBox4 {
	background: #F1F0B4 url(../images/sideBox4-bottomright.gif) no-repeat right bottom;
}

#secondaryContent .sideBox h2, #secondaryContent .sideBox2 h2, #secondaryContent .sideBox3 h2, #secondaryContent .sideBox4 h2, #secondaryContent .sideBox3 h3 {
	color: #4583C0;
	background: url(../images/sideBox-topleft.gif) no-repeat left top;
	padding: 10px 10px 0;
	border-bottom-style: none;
	font-size: 140%;
}

#secondaryContent .sideBox2 h2 {
	background: url(../images/sideBox2-topleft.gif) no-repeat left top;
}

#secondaryContent .sideBox3 h2 {
	color: #AC7428;
	background: url(../images/sideBox3-topleft.gif) no-repeat left top;
}

#secondaryContent .sideBox3 h3 {
	color: #AC7428;
	background: url(none);
	padding-top: 0;
	margin-top: 0;
}

#secondaryContent .sideBox4 h2 {
	background: url(../images/sideBox4-topleft.gif) no-repeat left top;
}

#secondaryContent .sideBox ul {
	padding: 10px 5px 10px 0;
	border-top: 1px solid #EDEDE5;
	margin-left: 10px;
}

#secondaryContent .sideBox2 ul {
	background: url(../images/closequote2.gif) no-repeat right center;
}

#secondaryContent .sideBox4 ul {
	padding: 10px 5px 10px 0;
	border-top: 1px solid #E3E06A;
	margin-left: 10px;
}

#secondaryContent .sideBox3 p, #secondaryContent .sideBox4 p {
	padding: 5px 5px 10px 0;
	border-top: 1px solid #EDEDE5;
	margin-left: 10px;
	color: #AC7428;
	margin-top: 5px;
}

#secondaryContent .sideBox4 p {
	border-top: 1px solid #E3E06A;
	color: #333;
}

/* ---- Definition list gallery ----- */

#gallery {
	float: left;
	width: 100%;
	padding: 10px 0;
	background: #FAF3EB;
	margin-bottom: 10px;
}

#gallery dl {
	overflow: auto; /* self-clears floats within */
	width: 85%;
	margin: 10px 5px 10px 10px;
	padding: 0 0 5px;
	border-bottom: 1px solid #EDEDE5;
}

#gallery dt {
	float: right;
	width: 70%;
	margin: 0;
	padding: 0;
	font-size: 130%;
	letter-spacing: 1px;
	color: #627081;
}

#gallery dd {
	margin: 0 0 0 30%;
	padding: 0;
	font-size: 90%;
	line-height: 1.5em;
	color: #666;
}

#gallery dl dd.img {
   	margin: 0;
}

#gallery dd.img img, #secondaryContent .sq {
  	float: left;
  	margin: 0 8px 3px 0;
  	padding: 4px;
  	border: 1px solid #D9E0E6;
  	border-bottom-color: #C8CDD2;
  	border-right-color: #C8CDD2;
  	background: #FFF;
}

/* reverse float */

#gallery .alt dt {
  	float: left;
}

#gallery .alt dd {
  	margin: 0 98px 0 0;
}

#gallery .alt dd.img img {
  	float: right;
  	margin: 0 0 0 8px;
}

#secondaryContent #gallery {
	width: 93%;
}

/* ---- Portfolio 'two-column' list ---- */

#mainContent  ul.portfolio {
	list-style: none;
}

#mainContent ul.portfolio li {
	list-style: none;
	float: left;
	width: 49%;
	margin-bottom: 5px;
	padding: 0;
	margin-right: 0;
	margin-left: 0;
}

/*--- List Gallery ---*/

#listGallery {
	list-style: none;
	margin-left: 0;
}

#listGallery li {
	margin-left: 5px;
	margin-bottom: 10px;
	float: left;
	font-size: 90%;
	margin-right: 5px;
	list-style: none;
}

#listGallery li a {
	outline: none;
}

#listGallery img {
	display: block;
	border: 3px #E1E1E1 solid;
	margin-bottom: 3px;
}

#listGallery img:hover {
	display: block;
	border: 3px solid #999;
	margin-bottom: 3px;
}

/*--- Others ---*/

.fleft {
	float: left;
	margin-right: 10px;
}

.fright {
	float: right;
	margin-left: 10px;
}

.name {
	color: #AC7428;
	letter-spacing: 1px;
}
.new {
	color: #FF3333;
}


hr {
	background:#A3CCE4;
	height:1px;
	color:#A3CCE4;
	border:none;
	margin-top: 1em;
	width: 100%;
	margin-bottom: 1em;
}

.clearleft {
	clear: left;
}

.clearright {
	clear: right;
}

.skype {
	border: 1px dashed #F1DFC7;
	margin-right: 5px;
	float: right;
	margin-top: 0;
	width: 30%;
	padding: 5px;
}

.skype img {
	vertical-align: text-top;
}
.img-top {
	margin-top: 15px;
}


.smaller {
	font-size: 90%;
}

.screenshot, .screenshot2 {
	border-top: 1px solid #CCC;
	border-right: 1px solid #666;
	border-bottom: 1px solid #666;
	border-left: 1px solid #CCC;
	padding: 4px;
	margin-left: 15px;
}

.screenshot2 {
	padding: 0;
}

.google-logo {
	vertical-align: middle;
}


.leftImage {
	overflow: hidden;
}

.skiplink {
	display: block;
	position: absolute;
	top:0;
	left: -9999px;
	height: 20px;
	padding: 10px 20px;
	background: #fff;
}

.skiplink:focus, .skiplink:active {
	position: static;
	left: 0;
}

/* ---- hCard ---- */

div.vcard {
	margin-left: 1px;
}

.street-address {
	display: inline;
}

.region  {
	display: block;
}

/* ---- Show-hide sections ---- */

#newer, #newer h3, #newer h2 {
	margin: 0;
	padding: 0;
}

#newer p {
	border-bottom: 1px solid #A3CCE4;
	padding-bottom: 10px;
}

/* ---- Lifestream/SimplePie ----*/

div.chunk {
	padding-bottom: 10px;
	padding-top: 10px;
	border-bottom: solid 1px #EDEDE5;
	}

div.chunk a{
	text-decoration: none;
	}
	
div.chunk h4 {
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 10px;
	text-indent: 25px;
}

/* ---- Tables ----*/

#mainContent table {
	border: 1px solid #EDEDEC;
	padding: 4px;
}

#mainContent table th {
	background: #F8F8F8;
	border-bottom: 1px solid #EDEDEC;
}

#mainContent table td {
	border-bottom: 1px solid #EDEDEC;
}