@charset "utf-8";/*********************************************************************************************************************************************************//*********************************************************************************************************************************************************//*** ***//*** GHOSTS CV HTML Template, Version 1.0. Made by Alex Cowley, www.duskydolphin.co.uk ***//*** ***//*********************************************************************************************************************************************************//*********************************************************************************************************************************************************//*********************************************************************************************************************************************************//*** CONTENTS OF THIS CSS FILE ***//*********************************************************************************************************************************************************//*** 1.0 - CSS RESET ***//*** 2.0 - PAGHE LAYOUT ***//*** 3.0 - FIXED SIDEBAR ***//*** 4.0 - PAGE HEADINGS ***//*** 5.0 - PRINT & DOWNLOAD LINKS ***//*** 6.0 - COLUMNS ***//*** 6.1 - COLUMN CONTENT ***//*** 7.0 - SOCIAL ICONS ***//*********************************************************************************************************************************************************//*********************************************************************************************************************************************************//*** 1.0 - CSS RESET ~ You don't need to touch this ***//*********************************************************************************************************************************************************/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;}ol,ul { margin:20px 30px;}ol ol,ul ul { margin:0px 30px;}ins { text-decoration: none }del { text-decoration: line-through }table { border-collapse: collapse; border-spacing: 0;}caption,th,td { text-align: left; font-weight: normal;}table,td,th { vertical-align: middle }blockquote:before,blockquote:after,q:before,q:after { content: ""; content: none;}blockquote,q { quotes: "" "" }a img { border: none }abbr,acronym { border-bottom-width : 0 }strong { font-weight : bold }em { font-style : italic }body::-webkit-scrollbar{width:10px;height:auto;}body::-webkit-scrollbar-track:enabled{background-color:#EEE; box-shadow: inset #AAA 0px 0px 10px;}body::-webkit-scrollbar-thumb:vertical{height:20px;background-color:rgba(0,0,0,.3);}body::-webkit-scrollbar-thumb:vertical:hover{height:20px;background-color:rgba(0,0,0,.4);}/*********************************************************************************************************************************************************//*** 2.0 - PAGE LAYOUT ~ The tags that organize the layout of the page ***//*********************************************************************************************************************************************************/body { background: url(../images/bg_stripes.png) #FFF top left repeat; padding-top: 40px; padding-bottom: 160px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #666;}#width_constraint { width: 900px; position: relative; margin: 0px auto;}.content_holder { padding-left: 230px; line-height: 20px; margin-bottom: 30px;}/*********************************************************************************************************************************************************//*** 3.0 - FIXED SIDEBAR ~ The profile image and personal details that stay fixed to the left hand side of the page ***//*********************************************************************************************************************************************************/#profile_image { width: 180px; height: 270px; background-color: #000; position: fixed; top: 40px; margin-left: 20px; outline: #222 1px solid; overflow: hidden;}#contact_details { width: 140px; padding: 20px; padding-bottom: 40px; background: url(../images/bg_contact_details_bottom.png) #E1E1E1 bottom left no-repeat; position: fixed; top: 330px; margin-left: 20px; outline: #D1D1D1 1px solid; overflow: hidden; font-size: 11px; color: #888;}#contact_details a { color: #5C9FD6; text-decoration: none;}#contact_details a:hover { text-decoration: underline }h6 { font-size: 12px; padding-left: 14px; color: #333; margin-bottom: 4px; margin-top: 14px;}h6:first-child { margin-top: 0px }h6.heading_address { background: url(../images/icon_address.png) left 2px no-repeat }h6.heading_phone { background: url(../images/icon_phone.png) left 2px no-repeat }h6.heading_email { background: url(../images/icon_email.png) left 2px no-repeat }h6.heading_website { background: url(../images/icon_website.png) left 2px no-repeat }h6 img { display: none }/*********************************************************************************************************************************************************//*** 4.0 - PAGE HEADINGS ~ The styled black bars that break up the content of the page ***//*********************************************************************************************************************************************************/#your_name { width: 900px; height: 100px; background: url(../images/bg_pattern.png) #333 top left no-repeat; margin-bottom: 20px;}.heading { width: 900px; height: 60px; background: url(../images/bg_pattern.png) #333 top left no-repeat; margin-bottom: 20px;}h1 { margin-left: 230px; padding-top: 30px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 32px; color: #FFF; text-transform: capitalize; letter-spacing: -1px; text-shadow: #222 2px 2px 0px;}h2 { height: 43px; margin-left: 230px; padding-top: 17px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 22px; color: #FFF; text-transform: capitalize; letter-spacing: -1px; text-shadow: #222 2px 2px 0px;}h2.heading_work { background: url(../images/icon_work.png) left 16px no-repeat; padding-left: 40px; }h2.heading_skills { background: url(../images/icon_skills.png) left 14px no-repeat; padding-left: 40px; }h2.heading_education { background: url(../images/icon_education.png) left 15px no-repeat; padding-left: 40px; }h2.heading_social { background: url(../images/icon_social.png) left 16px no-repeat; padding-left: 40px; }/*********************************************************************************************************************************************************//*** 5.0 - PRINT & DOWNLOAD LINKS ~ The links above the main header to let you download and print the CV ***//*********************************************************************************************************************************************************/#print_download_links { width: auto; text-align: right; font-size: 11px; color: #BBB; margin-bottom: 4px;}#print_download_links a { color: #999; text-decoration: none;}#print_download_links a:hover { color: #777; text-decoration: underline;}/*********************************************************************************************************************************************************//*** 6.0 - COLUMNS ~ The columns that appear in the different sections of the CV - you shouldn't need to change any of this ***//*********************************************************************************************************************************************************/.columns { width: auto; margin-left: -10px;}.columns:after { content: "If you can see this, you broke the columns!"; width: auto; display: block; text-indent: -10000000px; height: 1px; clear: both; margin-bottom: -20px;}.column_left { width: 288px; float: left; padding: 20px; background: url(../images/bg_columms_bottom.png) #E1E1E1 bottom center no-repeat; border: #D1D1D1 1px solid; margin-bottom: 20px;}.column_right { width: 288px; float: right; padding: 20px; background: url(../images/bg_columms_bottom.png) #E1E1E1 bottom center no-repeat; border: #D1D1D1 1px solid; margin-bottom: 20px;}.social { width: 700px; margin-left:0px; } /*****************************************************************************************************************************************************/ /*** 6.1 - COLUMN CONTENT ***/ /*****************************************************************************************************************************************************/ h3 { color: #333; font-size: 16px; text-transform: capitalize; margin-bottom: 10px; } h4 { color: #999; font-size: 15px; font-style: italic; text-transform: capitalize; margin-bottom: 10px; margin-top: -12px; } .column_footer { margin: -21px; margin-top: 20px; padding: 10px 20px 13px; background-color: #666; font-size: 14px; font-weight: bold; color: #FFF; text-shadow: #444 1px 1px 0px; border-top: #444 4px solid; } .column_splitter { margin: 20px -21px; padding: 10px 20px 13px; background-color: #666; font-size: 14px; font-weight: bold; color: #FFF; text-shadow: #444 1px 1px 0px; border-top: #444 4px solid; } a { color: #5C9FD6; text-decoration: none; } a:hover { text-decoration: underline }/*********************************************************************************************************************************************************//*** 7.0 - SOCIAL ICONS ~ The social icons in the Social section of the CV ***//*********************************************************************************************************************************************************/.social_image { width: 56px; float: left; margin-bottom: 20px; margin-right: 20px;}.social_image a img { opacity: 1 }.social_image a img:hover { opacity: .7 }