/*___________________________________________________________________________________________
DianesCorner.com Style Sheet 

version:   2.0
author:    Diane Tremblay
email:     dtremblay@multimedia-designs.com
website:   http://www.multimedia-designs.com/
_____________________________________________________________________________________________*/




/*  General
-----------------------------------------------------------------------------*/

/* Remove padding and margin */
* {
	margin: 0;
	padding: 0;
}

/* Puts margin back on certain elements */
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, fieldset, table, ul {
    margin: 1em 0;
}

/* Class for clearing floats */
.clear {
	clear:both;
}

/* mac hide \*/
html,body{height:100%;}
/* end hide*/


body {
	font-family: Verdana, Geneva, Helvetica, Arial, sans-serif;
	font-size: 0.7em;
	color: #000;
	text-align:center;
	background: url(images/leaf_back.gif) repeat left top;
}

div,p  {margin-top:0}/*clear top margin for mozilla*/



/*  Wrapper
-----------------------------------------------------------------------------*/

#wrapper{
	min-height:100%;
	width:960px;
	margin-left:auto;
	margin-right:auto;
	background:transparent url(images/3_col_back.gif) repeat-y center top;
	text-align:left;
	border-left:10px solid #680000;
	border-right:10px solid #680000;
	position:relative;
}


/*  Links
-----------------------------------------------------------------------------*/

a:link, a:visited {
	text-decoration:none;
	color:#172400;
}

a:hover {
	text-decoration:underline;
	color:#3E000F;
}


/*for highlight current page nav category */
body#webdesign a#webdesignnav,
body#applications a#appnav,  
body#designresources a#designnav,
body#multimedia a#multinav,
body#inspiration a#inspirenav,
body#other a#othernav {
	color: #7D9432;
}

/* For "go to top" link */
#col_2 .gototop {
	float:right;
	font-weight:bold;
	color:#4C591B;
	text-decoration:underline;
	background-image: url(images/leaf_bullet.gif);
	background-repeat: no-repeat;
	background-position: 0 0.2em;
	padding-left: 1.8em;
	margin-right: 0.5em;
}


/*  Header
-----------------------------------------------------------------------------*/

#header {
	border-top:1px solid #680000;
	height:185px;
	padding-left:300px;
}

#homelink a {
	background:url(images/logo_back.jpg) no-repeat 0 0;
	display:inline;
	position:absolute;
	height:185px;
	width:300px;
	margin-top:1px; /*clear border top */
	
}

#homelink a:hover {
	background-position:0px -185px; 
}



	
/*  Drop Menu
-----------------------------------------------------------------------------*/

.L1nav { background:url(images/L1_nav_back.jpg) no-repeat left top; width:960px; height:32px; position:relative; z-index:100; }

/* remove all the bullets, borders and padding from the default list styling */
.L1nav ul { padding:0; margin:0; list-style-type:none; }
.L1nav ul ul {width:105px; }

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.L1nav ul li {float:left; width:105px; position:relative; margin-left:36px;}

/* for first category, Web Design/Development*/
.L1nav li#first, .L1nav li#first a { width:180px;}
.L1nav li#first ul li a { width:120px; } 

/* for third category, Design Resources*/
.L1nav li#thirdcategory { width:140px;}
.L1nav li#thirdcategory a { width:115px;}

/* style the links for the top level */
.L1nav a, .L1nav a:visited {display:block; font-size: 1.2em; letter-spacing:-1px; text-decoration:none; font-weight:bold; color:#273E00;  height:32px;  padding-top:3px; line-height:29px;}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.L1nav ul ul{ visibility:hidden; position:absolute; height:0; top:29px; left:0; margin-left:-38px; }

/* style the table so that it takes no part in the layout - required for IE to work */
table {position:absolute; top:0; left:0; margin-left:-31px;}


/* style the second level links */
.L1nav ul ul a, .L1nav ul ul a:visited {font-weight:normal; font-size:11px; background:#d4d8bd; height:auto; line-height:1em; padding:5px 10px; width:105px; border:1px solid #fff; border-bottom:none;}
.L1nav ul ul li a.lastlink{border-bottom:1px solid #fff;}


/* style the top level hover */
.L1nav a:hover {color:#6A7B39; background:none;}
.L1nav :hover > a {color:#6A7B39;background:none;}

.L1nav ul ul a:hover {color:#fff; background:#949e7c;}
.L1nav ul ul :hover > a {color:#fff;background:#949e7c;}


/* make the second level visible when hover on first level list OR link */
.L1nav ul :hover ul{ visibility:visible; }


/*  L2 nav
-----------------------------------------------------------------------------*/

#L2nav {margin:10px 0px 10px 36px; width:885px; letter-spacing:-1px;}


#L2nav h1 {
	font-size:1.1em;
	color:#7D9432;
	padding-right:10px;
	float:left;
	margin-top:3px;
}

/* Used for long list of L2 nav subcategories like on the designer page */
#L2nav h1.longlist {
	margin-bottom:60px;
}

#L2nav ul {
	list-style-type:none;
	line-height:1.8em;
	margin:0;
}

#L2nav li {
	display:inline;
	background-image: url(images/leaf_bullet.gif);
	background-repeat: no-repeat;
	background-position: 0 0.3em;
	padding-left: 2.0em;
	margin-right:0.5em;
}


#L2nav a:link, #L2nav a:visited  {
	font-size:1.0em;
	color:#4C591B;
	font-weight:bold;
}




/*  Col_1 and Col_2
-----------------------------------------------------------------------------*/

 #col_1, #col_2{
	float:left;
	width:370px;
}

#col_1{margin-left:36px;}

#col_1 h2, #col_2 h2  {
	color:#870000;
	letter-spacing:-1px;
	font: normal 24px/0px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	padding-top:7px;
}

#col_1 h2.topcategory, #col_2 h2.topcategory {
	padding-top:0px;
}

#col_1 ul li, #col_2 ul li{
	line-height:1.9em;
	list-style-type:none;
}

#col_1 ul li img, #col_2 ul li img { /* for icons for Key */ 
	padding-top:0.4em;
	z-index:200;
}

#col_1 ul li a, #col_2 ul li a {
  background: #fff;
  position:relative;
  display: block;
  vertical-align: bottom; /* This fixes the IE5 Win gap! */
  width: 300px;
  border-bottom:1px solid #E3E7D1;
}

#col_1 ul li a:hover, #col_2 ul li a:hover {
 background: #EDF0E2;
 text-decoration:none;
 border-bottom: 1px solid #680000;
}

/*  Icons - float to right of link
-----------------------------------------------------------------------------*/

/* for third-party application list that costs money */
#col_1 ul.paidcategory li, #col_2 ul.paidcategory li, #col_1 .paidcategory li, #col_2 .paidcategory li {clear:both;}
#col_1 ul.paidcategory li a, #col_2 ul.paidcategory li a, #col_1 .paidcategory li a, #col_2 .paidcategory li a {float:left;}

/* for sections that have a lot of icons from the key */
#col_1 ul.iconcategory li, #col_2 ul.iconcategory li, #col_1 .iconcategory li, #col_2 .iconcategory li {clear:both;}
#col_1 ul.iconcategory li a, #col_2 ul.iconcategory li a, #col_1 .iconcategory li a, #col_2 .iconcategory li a {float:left;}

/* for the Inspiration page that has a lot of icons */
body#inspiration #col_1 ul li, body#inspiration #col_2 ul li, body#inspiration #col_1 li, body#inspiration #col_2 li {clear:both;}
body#inspiration #col_1 ul li a, body#inspiration #col_2 ul li a, body#inspiration #col_1 li a, body#inspiration #col_2 li a {float:left;}
body#inspiration #col_1 ul li.lastlink a, body#inspiration #col_2 ul li.lastlink a, body#inspiration #col_1 li.lastlink a, body#inspiration #col_2 li.lastlink a {float:none;}

/*  Gutter - Key
-----------------------------------------------------------------------------*/

 #key {
	width:154px;
	border:3px dotted #870000;
	margin-bottom:20px;
	padding-bottom:12px;
	background-color:#EDF0E2;
}

#key h3 {
	text-align:center;
	font-size: 1.5em;
	color:#870000;
	/*font-family:"Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;*/
	margin:0;
	padding:5px 0px 5px 0px;
}

#key h5 {
	text-align:center;
	font-size: 0.9em;
	font-family:"Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
	margin:0px;
	padding:0px 0px 5px 0px;
}

#key h3#secondtitle {
	padding:20px 0px 0px 0px;
}

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

#key ul li {
	padding:4px 0px 0px 8px;
}

#key img {
	vertical-align:middle;
	padding-right:2px;
}


/*  Gutter - Google Ads
-----------------------------------------------------------------------------*/

 #gutter {
	float:left;
	padding: 20px 0px 10px 7px;
}



/*  Footer
-----------------------------------------------------------------------------*/

#clearfooter {
	clear:both;
	height:78px;
	padding-bottom:30px;
}
	
#footer{
	position:absolute;
	bottom:0;
	left:0;	
	width:960px;
	height:78px;
	background:url(images/footer_back.jpg) no-repeat 0 0;
	border-bottom:1px solid #680000;
}


#footer p {
	padding: 30px 0px 0px 30px;
}

#footer a {
	text-decoration:underline;
}



/*  Typography
-----------------------------------------------------------------------------*/

li.linethrough {
 	text-decoration:line-through;
}



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

/* Remove border around linked images */
img {
	border: 0;
}

.floatleft {
	float:left;
}

.clear {
	clear:both;
}