/*=======================================================================

  michalkos.cz default.css style

  Author: MICHAL KOS
  E-mail: info@michalkos.cz
  Site:   http://michalkos.cz

=======================================================================*/


/* RESETS
=======================================================================*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }


/* DEFAULTS
=======================================================================*/

body { border-top: 4px solid #333; background-color: #fff; text-align: center; color: #333; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }

/* LAYUOT
=======================================================================*/

#page { width: 950px; margin: 0 auto; text-align: left; }

#header { position: relative; height: 125px; border-bottom: 1px solid #eee; }
#content { padding-top: 30px; }

#footer { clear: both; height: 100px; text-align: center; border-top: 4px solid #ddd; background: url(../bg-footer.jpg) repeat-x center top; }
#footer-in { width: 950px; margin: 0 auto; padding: 30px 0; font-size: 14px; text-align: left; }


/* HEADER
=======================================================================*/

#header h1 { position: absolute; left: 0; top: 35px; width: 200px; height: 66px; }
#header h1 a { display: block; width: 200px; height: 66px; background: url(../logo_.jpg) no-repeat center; text-decoration: none; }
#header h1 a span { display: none; }
#header h1 a:active { position: relative; top: 1px; }


/* MENU
=======================================================================*/

#header ul#menu { position: absolute; right: 0; top: 70px; }
#header ul#menu li { float: left; margin-left: 24px; font-size: 20px; text-transform: lowercase; letter-spacing: -1px;  font-weight: normal; }
#header ul#menu li a { color: #666; text-decoration: none; }
#header ul#menu li a:visited { color: #666; text-decoration: none; }
#header ul#menu li a:hover { color: #000; text-decoration: underline; }
#header ul#menu li a:active { color: #000; text-decoration: underline; position: relative; top: 1px; }
#header ul#menu li a.active { color: #2aa933 !important; text-decoration: none !important; }

#header ul#menu li a.photography { color: #aaa; text-decoration: none; }
#header ul#menu li a.photography:visited { color: #aaa; text-decoration: none; }
#header ul#menu li a.photography:hover { color: #000; text-decoration: underline; }
#header ul#menu li a.photography:active { color: #000; text-decoration: underline; position: relative; top: 1px; }
#header ul#menu li a.photography.active { color: #2aa933; text-decoration: none; }


/* HEADLINES
=======================================================================*/

#welcome { position: relative; height: 225px; border-bottom: 1px solid #eee; background: url(../welcome_.jpg) no-repeat right bottom; }
#welcome h2 { position: relative; margin-bottom: 15px; padding-top: 38px; font-size: 42px; font-weight: normal; letter-spacing: -1px; line-height: 120%; text-transform: lowercase; }
#welcome h2 span { position: absolute; bottom: 0px; left: 0; display: block; width: 340px; height: 100px; background: #fff url(../welcome-heading.jpg) no-repeat left 9px; }
#welcome h3 { font-size: 14px; width: 304px; line-height: 160%; font-weight: normal; }
#welcome .link { position: absolute; left: 540px; bottom: 0px; }
#welcome .link a { display: block; width: 232px; height: 172px; text-decoration: none; }
#welcome .link a span { display: none; }
  
#photography { border-bottom: 1px solid #eee; }
#photography h1 { position: relative; font-size: 42px; font-weight: normal; letter-spacing: -1px; line-height: 140px; text-transform: lowercase; }
#photography h1 span { position: absolute; top: 48px; left: 0; display: block; width: 380px; height: 50px; background: #fff url(../photography-heading.jpg) no-repeat left center; }

#webdesign { border-bottom: 1px solid #eee; }
#webdesign h1 { position: relative; font-size: 42px; font-weight: normal; letter-spacing: -1px; line-height: 140px; text-transform: lowercase; }
#webdesign h1 span { position: absolute; top: 48px; left: 0; display: block; width: 360px; height: 50px; background: #fff url(../webdesign-heading.jpg) no-repeat left center; }

#contact { border-bottom: 1px solid #eee; }
#contact h1 { position: relative; font-size: 42px; font-weight: normal; letter-spacing: -1px; line-height: 140px; text-transform: lowercase; }
#contact h1 span { position: absolute; top: 44px; left: 0; display: block; width: 370px; height: 50px; background: #fff url(../contact-heading.jpg) no-repeat left center; }


/* CONTENT
=======================================================================*/

#content p { line-height: 170%; }
#content h1 { font-size: 28px; margin-bottom: 15px; font-weight: normal; }

#content a,
#content a:visited { color: #2aa933; text-decoration: underline; }
#content a:hover { color: #8d0d8a; text-decoration: underline; }
#content a:active { color: #8d0d8a; text-decoration: underline; position: relative; top: 1px; }


/* PHOTOS
=======================================================================*/

.project { float: left; width: 100%; border-top: 1px solid #eee; padding-top: 50px; padding-bottom: 50px; }
.project.first { border-top: 0 none; padding-top: 20px; }

.project .description { float: left; width: 200px; }
.project .description h2 { font-size: 28px; font-weight: normal; margin-bottom: 10px; line-height: 140%; }
.project .description h3 { font-size: 12px; font-weight: bold; margin-bottom: 5px; }
.project .description p { margin-bottom: 20px; }
.project .description p.site { border-top: 1px solid #eee; padding-top: 20px; }
.project .description p.site a { background-color: #eee; padding: 6px 8px; font-weight: bold; text-decoration: none !important;  }
.project .description p.site a:hover { background-color: #2aa933; color: #fff !important; }

.project .showcase { float: right; width: 713px; }
.project .showcase p { line-height: normal !important; float: left; }
.project .showcase p img { border: 1px solid #eee; float: left; }

.projects { float: left; width: 100%; border-top: 1px solid #eee; padding-top: 50px; }
.project-02 { float: left; margin-right: 61px; margin-bottom: 50px; width: 276px; }
.project-02 .image { float: left; margin-bottom: 10px; }
.project-02 .image a img { display: block; }
.project-02 .image a { float: left; border: 1px solid #eee; }
.project-02 h2 { position: relative; width: 100%; font-size: 14px; font-weight: bold; margin-bottom: 10px; }
.project-02 h2 span { position: absolute; right: 0; bottom: 2px; font-size: 12px; font-weight: normal; }
.project-02 .description { text-align: center; font-size: 11px; margin-bottom: 4px; }


/* PHOTOS
=======================================================================*/

ul.photos { padding-top: 20px; }
ul.photos li { float: left; margin-right: 35px; margin-bottom: 50px; }
ul.photos li a img { display: block; }
ul.photos li a { float: left; border: 3px solid #fff; }
ul.photos li a:hover { border: 3px solid #333; }


/* SKILLS
=======================================================================*/

div.skills-col { float: left; width: 565px; }

ul.skills { margin-bottom: 40px; }
ul.skills li { display: block; position: relative; margin-bottom: 5px; padding: 6px 8px; font-weight: bold; color: #fff; background: #777; }
ul.skills li.light { background: #ddd; color: #333; }
ul.skills li span { position: absolute; right: 8px; bottom: 6px; }
ul.skills li.w100 { width: 100%; }
ul.skills li.w90 { width: 90%; }
ul.skills li.w85 { width: 85%; }
ul.skills li.w80 { width: 80%; }
ul.skills li.w75 { width: 75%; }
ul.skills li.w70 { width: 70%; }
ul.skills li.w60 { width: 60%; }
ul.skills li.w50 { width: 50%; }
ul.skills li.w40 { width: 40%; }
ul.skills li.w30 { width: 30%; }


/* HIRE
=======================================================================*/

div.hire-col { float: right; width: 305px; }
div.hire-col p { margin-bottom: 15px; }
div.hire-col ul { line-height: 180%; font-size: 16px; font-weight: normal; }
div.hire-col ul li em { font-size: 12px; }
div.hire-col ul li.chat { padding-left: 32px; background: url(../icons/c_chat.jpg) no-repeat left 2px; }
div.hire-col ul li.phone { padding-left: 32px; background: url(../icons/c_phone.jpg) no-repeat left center; }
div.hire-col ul li.email { padding-left: 32px; background: url(../icons/c_email.jpg) no-repeat left center; }
div.hire-col ul li.skype { padding-left: 32px; background: url(../icons/c_skype.jpg) no-repeat left 3px; }


/* SERVICES
=======================================================================*/

ul#services { padding-top: 10px; }
ul#services li { float: left; width: 450px; margin-bottom: 40px; }
ul#services li strong { color: #2aa933; }
ul#services li h2 { font-size: 20px; font-weight: bold; }
ul#services li.photography h2 { padding-left: 32px; background: url(../icons/camera.jpg) no-repeat left center; }
ul#services li.seo h2 { padding-left: 32px; background: url(../icons/seo.jpg) no-repeat left center; }
ul#services li.design h2 { padding-left: 32px; background: url(../icons/design.jpg) no-repeat left center; }
ul#services li.development h2 { padding-left: 32px; background: url(../icons/development.jpg) no-repeat left center; }
ul#services li p { margin-top: 15px; }


/* CONCACT
=======================================================================*/

.pre-text { padding-top: 10px; }

.contact-details { float: right; width: 300px; padding-top: 40px; padding-bottom: 40px; }
.contact-details h2 { font-size: 26px; margin-bottom: 15px; font-weight: normal; }
.contact-details p { margin-bottom: 35px; font-size: 18px; }
.contact-details p strong { font-weight: normal; }
.contact-details p em { font-size: 12px; }
.contact-details ul.write_speak { line-height: 180%; font-size: 16px; font-weight: normal; margin-bottom: 35px; }
.contact-details ul.write_speak li em { font-size: 12px; }
.contact-details ul.write_speak li.chat { padding-left: 32px; background: url(../icons/c_chat.jpg) no-repeat left 2px; }
.contact-details ul.write_speak li.phone { padding-left: 32px; background: url(../icons/c_phone.jpg) no-repeat left center; }
.contact-details ul.write_speak li.email { padding-left: 32px; background: url(../icons/c_email.jpg) no-repeat left center; }
.contact-details ul.write_speak li.skype { padding-left: 32px; background: url(../icons/c_skype.jpg) no-repeat left 3px; }

.contact-details ul.work { line-height: 180%; font-weight: normal; margin-bottom: 35px; }
.contact-details ul.work li span { float: left; display: block; width: 50px; }

.contact-details ul.social li { display: block; float: left; height: 40px; margin-bottom: 15px; line-height: 140%; }
.contact-details ul.social li a { display: block; width: 98px; height: 35px; padding-left: 52px; padding-top: 5px; text-decoration: none !important; }
.contact-details ul.social li a:hover strong { text-decoration: underline !important; }
.contact-details ul.social li a span { color: #666 !important; font-weight: normal !important; text-decoration: none !important; }
.contact-details ul.social li.fb a { background: url(../icons/facebook.png) no-repeat left center; }
.contact-details ul.social li.tw a { background: url(../icons/twitter.png) no-repeat left center; }
.contact-details ul.social li.fl a { background: url(../icons/flickr.png) no-repeat left center; }
.contact-details ul.social li.de a { background: url(../icons/deviantart.png) no-repeat left center; }
.contact-details ul.social li.lf a { width: 120px; background: url(../icons/lastfm.png) no-repeat left center; }

.contact-form { float: left; width: 570px; padding-top: 40px; padding-bottom: 40px; }
.contact-form h2 { font-size: 26px; margin-bottom: 15px; font-weight: normal; }
.contact-form form { display: block; width: 100%; }
.contact-form form p { margin-bottom: 20px; }
.contact-form form label { display: block; font-weight: bold; margin-bottom: 4px; }
.contact-form form .input-text { width: 350px; padding: 6px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; border: 1px solid #aaa; }
.contact-form form .input-textarea { width: 556px; padding: 6px; font-size: 12px; font-family: Arial, Helvetica, sans-serif; border: 1px solid #aaa; }
.contact-form form .input-submit { display: block; height: 31px; width: 102px; background: url(../form-submit.jpg) no-repeat; text-indent: -999em; }

.msg { width: 566px; margin-bottom: 15px; -moz-border-radius: 4px !important; -khtml-border-radius: 4px !important; -webkit-border-radius: 4px !important;	border-radius: 4px !important; }
.msg span {display: block; padding:10px; padding-left:35px;}
.msg.warning {border:2px solid #F2DD8C; background:#FFF5CC url("../ico-warning.gif") 10px 50% no-repeat;}
.msg.info {border:2px solid #B8E2FB; background: #E8F6FF url("../ico-info.gif") 10px 50% no-repeat;}
.msg.done {border:2px solid #BBDF8D; background: #EAF7D9 url("../ico-done.gif") 10px 50% no-repeat;}
.msg.error {border:2px solid #FFAEAE; background: #FEEBEB url("../ico-delete.gif") 10px 50% no-repeat;}

.msg.warning a {color:#df0000 !important;}
.msg.warning a:hover, .msg.warning a:active, .msg.warning a:focus {color:#303030 !important;}


/* FOOTER
=======================================================================*/

#footer p { float: left; }

#footer ul { float: right; }
#footer ul li { float: left; }
#footer ul li a { margin-left: 20px; }

#footer a,
#footer a:visited { color: #2aa933; text-decoration: underline; }
#footer a:hover { color: #8d0d8a; text-decoration: underline; }
#footer a:active { color: #8d0d8a; text-decoration: underline; position: relative; top: 1px; }


/* OTHER
=======================================================================*/

hr, .noscreen { display: none; }

.mt-none { margin-top: 0px !important;}
.mr-none { margin-right: 0px !important; }
.mb-none { margin-bottom: 0px !important; }
.ml-none { margin-left: 0px !important; }
.mb-10   { margin-bottom: 10px !important; }
.mb-20   { margin-bottom: 20px !important; }
.mb-25   { margin-bottom: 25px !important; }
.mb-28   { margin-bottom: 28px !important; }
.mb-30   { margin-bottom: 30px !important; }
.mb-40   { margin-bottom: 40px !important; }

.f-left  { float: left !important; }
.f-right { float: right !important; }

.t-left    { text-align: left !important; }
.t-justify { text-align: justify !important; }
.t-right   { text-align: right !important; }
.t-center  { text-align: center !important; }

.clear { float: none; clear: both; width: 0; height: 0; margin: 0; padding: 0; border: 0; line-height: 0; font-size: 0; }
.clear-02 { float: none; clear: both; width: 100%; height: 0; margin: 0; margin-bottom: 40px; padding: 0; border: 0; border-top: 1px solid #eee; line-height: 0; font-size: 0; }