/*
Author: Matt Rheault
Description: This is for the Homepage and Contact Page
*/

/*---------============HOMEPAGE ID===========---------*/
#home_page {height: 200px;background: url(../images/texture_header.jpg) repeat-x center;text-align: center;font-size: 22pt;color: #bbb;text-shadow: 1px 1px #000;}
#home_page div.wrapper {padding: 30px 0;}
#home_page span.me {border-bottom: 1px dotted #bbb;}
#home_page div.wrapper:hover span.me {color: #ddd;border-bottom: 1px dotted #ddd;}
#home_page div.right {margin: 30px 0 0 0;}
#home_page a.about_me, a.modx {float: left;width: 156px;height: 38px;line-height: 35px;text-align: center;text-decoration: none;margin: 0 0 10px 10px;font-size: 10pt;color: #222;}
#home_page a.about_me {background: url(../images/about_me_button.png) no-repeat;text-shadow: 1px 1px #70c5cd;}
#home_page a.about_me:hover {background: url(../images/about_me_button_hover.png) no-repeat;}
#home_page a.modx {background: url(../images/modx_button.png) no-repeat;text-shadow: 1px 1px #cbd56a;}
#home_page a.modx:hover {background: url(../images/modx_button_hover.png) no-repeat;}

/*---------============HOME PAGE ICONS===========---------*/
div.home_1, div.home_2, div.home_3, div.home_4 {width: 145px;margin: 0 6px;float: left;}
div.home_1 h1, div.home_2 h1, div.home_3 h1, div.home_4 h1 {height: 32px;line-height: 32px;font-size: 12pt;color: #000;padding: 5px 0 0 35px;border-bottom: 1px dotted #000;}
div.home_1 h1 {background: url(../images/home_1.png) no-repeat left;}
div.home_1:hover h1 {background: url(../images/home_1_hover.png) no-repeat left;}
div.home_2 h1 {background: url(../images/home_2.png) no-repeat left;}
div.home_2:hover h1 {background: url(../images/home_2_hover.png) no-repeat left;}
div.home_3 h1 {background: url(../images/home_3.png) no-repeat left;}
div.home_3:hover h1 {background: url(../images/home_3_hover.png) no-repeat left;}
div.home_4 h1 {background: url(../images/home_4.png) no-repeat left;}
div.home_4:hover h1 {background: url(../images/home_4_hover.png) no-repeat left;}

/*---------============ABOUT PAGE ICONS===========---------*/
div.about_1 h1 a, div.about_2 h1 a {display: block;width: 575px;height: 32px;line-height: 36px;font-size: 12pt;color: #000;padding: 5px 20px 0 40px;border-bottom: 1px dotted #000;text-decoration: none;}
div.about_1 a:hover {color: #850E0E;border-bottom: 1px dotted #850E0E;}
div.about_1 h1 {background: url(../images/about1.png) no-repeat left;}
div.about_2 h1 {background: url(../images/about2.png) no-repeat left;}

/*---------============Portfolio Styles===========---------*/
#portfolio ul {margin: 25px 0;}
#portfolio li {width: 110px;float: left;padding: 10px 25px 25px 25px;}
#portfolio li:hover {background: url(../images/burn.png) repeat;}
#portfolio a {display: block;padding: 2px;margin: 10px 0 10px 0;width: 110px;height: 80px;border: 1px solid #333;filter: alpha(opacity=75);opacity: .75;}
#portfolio a:hover {border: 1px solid #850E0E;filter: alpha(opacity=100);opacity: 1;}
#portfolio li p {color: #aaa;text-shadow: 1px 1px #000;width: 110px;height: 16px;line-height: 16px;margin: 3px 0;padding: 0 0 0 20px;}
#portfolio li:hover p {color: #fff;}
#portfolio li p.title {background: url(../images/title.png) no-repeat left center;}
#portfolio li p.title a {display: inline !important;border: none !important;color: #fff;}
#portfolio li p.medium {background: url(../images/medium.png) no-repeat left center;}
#portfolio li p.created {background: url(../images/calender.png) no-repeat left center;}

/*---------============CONTACT PAGE ICONS===========---------*/
div.contact_1, div.contact_2, div.contact_3, div.contact_4 {width: 145px;margin: 0 6px;float: left;}
div.contact_1 h1, div.contact_2 h1, div.contact_3 h1, div.contact_4 h1 {height: 32px;line-height: 32px;font-size: 12pt;color: #000;padding: 5px 0 0 35px;border-bottom: 1px dotted #000;}
div.contact_1 h1 {background: url(../images/contact_1.png) no-repeat left;}
div.contact_1:hover h1 {background: url(../images/contact_1_hover.png) no-repeat left;}
div.contact_2 h1 {background: url(../images/contact_2.png) no-repeat left;}
div.contact_2:hover h1 {background: url(../images/contact_2_hover.png) no-repeat left;}
div.contact_3 h1 {background: url(../images/contact_3.png) no-repeat left;}
div.contact_3:hover h1 {background: url(../images/contact_3_hover.png) no-repeat left;}
div.contact_4 h1 {background: url(../images/contact_4.png) no-repeat left;}
div.contact_4:hover h1 {background: url(../images/contact_4_hover.png) no-repeat left;}

/*---------============CONTACT PAGE ERROR ID===========---------*/
#contact_table tr:hover {background: url(../images/div_hover.png) repeat;}
#contact_error {text-align: center;font-size: 18px;margin: 10px 0;border-top: 1px dotted #444;}

/*---------============Client Login===========---------*/
#client_login {width: 600px;margin: 50px auto;padding: 100px 25px;background-color: #f0f0f0;border: 6px solid #c0c0c0;background: -moz-linear-gradient(100% 100% 90deg, #e0e0e0, #f5f5f5);
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e0e0e0), to(#f5f5f5));}
#client_login p {text-align: center;margin: 25px 0;}
#client_login h2 {color: #404040;font-size: 18px;}
#client_login hr {background: #c0c0c0;color: #c0c0c0;border-color: #c0c0c0;}
#logout {float: right;}
#logout a {display: inline;border: none;width: auto;height: auto;}
#logout a:hover {border: none;}