// Defaults which you can freely override @column-width: 30; @gutter-width: 10; @columns: 24; // Utility variable — you should never need to modify this @_gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px; // Set @total-width to 100% for a fluid layout @total-width: @_gridsystem-width; ////////// // GRID // ////////// body { width: 100%; float: left; } .row(@columns:@columns) { display: inline-block; overflow: hidden; width: @total-width*((@gutter-width + @_gridsystem-width)/@_gridsystem-width); margin: 0 @total-width*(((@gutter-width*.5)/@_gridsystem-width)*-1); } .column(@x,@columns:@columns) { display: inline; float: left; overflow: hidden; width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @_gridsystem-width); margin: 0 @total-width*((@gutter-width*.5)/@_gridsystem-width); } ////////// // GRID // ////////// /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } // Specify the number of columns and set column and gutter widths @columns: 24; @column-width: 30; @gutter-width: 10; // Uncomment the definition below for a percentage-based layout // @total-width: 100%; //////////// // LAYOUT // //////////// // center the contents div.wrapper { width: 960px; margin: 0 auto; overflow: hidden; } // header header#top { .column(24); margin-bottom: 0; height: 103px; background-color:transparent; } div#logos{ position: relative; float: left; margin-top:7px; height: 86px; width: 176px; } a { outline: 0; color: #665041; font-family: 'Open Sans',sans-serif; font-size: 10px; text-transform: uppercase; } header#top a { text-align:right; } // main and sidebar div#maincolumn { .column(19); height: 651px; background:url(../images/calendar_frame.png)no-repeat; } div#content { margin: 63px 141px 0px 130px; height: 479px; } div#bottom-content { margin: 1px 0px 0px 0px; height: 108px; position:relative; } #arrowbox { } .post { height: 479px; width: 479px; position: relative; overflow: hidden; } div#imgdescription { position: absolute; bottom: 0px; right: 0px; width: 116px; height: 119px; margin: 21px 21px 21px 21px; } .ngg-galleryoverview { margin-top:0px !important; height: 479px; } .ngg-gallery-list li a { border:none !important; padding:8px 0px 0px 0px !important; } .ngg-galleryoverview .pic img { width: auto !important; height: auto !important; } div#sidebar { .column(5); height: 651px; } .imgdesc p { text-decoration: none; color: #665041; font-size: 10px; font-family: 'Open Sans', sans-serif; } p{ } .imgdesc h1 { text-decoration: none; color: #493E2C; font-size: 10px; font-family: 'Open Sans', sans-serif; padding-bottom: 5px; padding-top: 5px; } div#sideindent { margin: 62px 0px 62px 0px; } footer#bottom { .column(24); height: 101px; margin-top: 5px; background-color: transparent; } #menu-side li a { text-decoration: none; color: #665041; font-size: 11px; text-transform:uppercase; font-family: 'Open Sans', sans-serif; } #menu-side li { padding-bottom: 23px; } div#links { position: relative; float:right; text-align: right; width: 300px; margin-top: 78px; } #menu-side li ul li { padding-top:10px; padding-bottom:0px; padding-left: 20px; } #menu-side li ul { } #menu-side li ul li a { padding-bottom :8px; font-weight:normal; color:#665041; size:10px;font-family: 'Open Sans', sans-serif; } #menu-sid2 li a { text-decoration: none; color: #665041; font-size: 11px; text-transform:uppercase; font-family: 'Open Sans', sans-serif; } #menu-sid2 li { padding-bottom: 23px; } div#links { position: relative; float:right; text-align: right; width: 300px; margin-top: 78px; } .scroll-pane { overflow:hidden !important; position:relative !important; } #menu-sid2 li ul li { padding-top:10px; padding-bottom:0px; padding-left: 20px; } #menu-sid2 li ul { } select { width: 119px !important; overflow: hidden !important; height: 20px !important; font-size: 10px !important; font-family: 'Open Sans', sans-serif !important; color: #999; } #calendar p { color: #665041; font-size: 10px; font-family: 'Open Sans',sans-serif; } #calendar h1 { color: #49382c; font-size: 11px; font-family: 'Open Sans',sans-serif; } #menu-sid2 li ul li a { padding-bottom :8px; font-weight:normal; color:#665041; font-size:10px; font-family: 'Open Sans', sans-serif; } .sub-menu { display: none; } .current_page_item .sub-menu, .current_page_parent .sub-menu { display: block; } .current_page_parent .sub-menu .current_page_item {background: url(../images/right_arrow.png) no-repeat 0% 85%; } .current_page_parent .sub-menu .current_page_item li a {font-weight:normal; color:#665041; size:10px; font-family: 'Open Sans', sans-serif;} .current_page_parent a {font-weight:normal; color:#49382c !important; size:11px; font-family: 'Open Sans', sans-serif;} .current_page_item a { font-weight:normal; color:#49382c !important; size:11px; font-family: 'Open Sans', sans-serif;} .current_page_item .sub-menu a { font-weight:normal; color:#665041; size:10px;font-family: 'Open Sans', sans-serif; } .current_page_parent .sub-menu .current_page_item a {font-weight:normal; color:#49382c!important; size:11px; font-family: 'Open Sans', sans-serif;} .wpcf7-not-valid-tip { background: none repeat scroll 0 0 transparent !important; border: none !important; font-size: 10px !important; color: transparent !important; left: 80% !important; padding: 4px 0px 10px 28px !important; position: absolute; top: 0% !important; width: 280px !important; z-index: 100 ; font-family: 'Open Sans', sans-serif !important; } .wpcf7-mail-sent-ng { border: none !important; } .wpcf7-spam-blocked { border: none !important; } .wpcf7-validation-errors { border: none !important; } .wpcf7-response-output { border: none !important; font-family: 'Open Sans', sans-serif !important; font-size: 10px !important; color: #FF0000 !important; margin: 23px 1em 1em !important; padding: 0.2em 1em; } .reginput input { } .wpcf7-submit { float:right; font-size:10px; font-family: 'Open Sans', sans-serif; } .wpcf7-text { width:70px; } .wpcf7-validation-errors { border: none !important; } /*map locator*/ #map_search { float:left; width:520px; } .location_search_title { display:none; } #simplemap { width:400px; float:right; border:none !important; } #results { display:block; float:left ; width:100% !important; margin-right:20px; overflow:none !important; } .nocomments{ display:none; } #location_search_submit_field{ margin-top: 17px; width: 50px !important; height: 20px !important; font-size:10px; font-family: 'Open Sans', sans-serif; padding-bottom: 16px !important; } div.result:hover { background: #F1F1F1 !important; } div.result { line-height: 15px !important; padding: 5px 5px !important; border-bottom:none !important; } #results { margin-top:5px; height:200px; padding-bottom: 0 !important; background:white; } .location_search tbody { float:left; width: 100%; } .location_search { margin-left: 1px !important; height: 50px; width:100%; } #location_search_address_field{ font-size:10px; font-family: 'Open Sans', sans-serif; color: #999; float: left; width:365px; margin-top: 15px; height: 20px; padding-left: 3px; padding-right: 3px; border: 1px solid #999; border-radius: 2px; -moz-box-shadow: 0 2px 2px #F2F2F2 inset; -webkit-box-shadow: 0 2px 2px #F2F2F2 inset; -webkit-background-clip: padding-box; } #location_search_0_tr{ margin-left:3px !important; width:378px !important; float:left; } #location_search_0_tr label{ display:none; } #location_search_5_tr{ margin-left:2px; width:49px; float:left; } #location_search_distance_field{ margin-top:14px; margin-left:10px; } .location_search { height:45px; width:100%; background:#ccc; display:block; } #location_search_2_tr{ margin-left:5px; float:left;} /** store locator **/ div.result .result_name h3 { font-size: 10px; color: #493E2C; font-family: 'Open Sans', sans-serif; } div.result .result_name small { font-size: 9px; color: #999; font-family: 'Open Sans', sans-serif; } div.result .result_links a { text-decoration: none; font-size: 10px; color: #999; font-family: 'Open Sans', sans-serif; } div.result .result_address address { font-size: 10px; color: #665041; font-family: 'Open Sans', sans-serif; } div.result .result_phone { font-size: 10px; color: #665041; font-family: 'Open Sans', sans-serif; } #simplemap { width: 430px !important; } #results { width: 430px !important; } .ngg-gallery-list { width:100% !important; } .ngg-gallery-list .ngg-next { position: absolute !important; left : 51% !important; } .ngg-gallery-list .ngg-next a { margin-top :8px !important; background: url(../images/right_arrow.png) no-repeat; } .ngg-gallery-list .ngg-prev a { margin-top :8px !important; background: url(../images/left_arrow.png) no-repeat; } .ngg-gallery-list .ngg-prev { position: absolute !important; left : 45% !important; padding-left:1px; } #alo_easymail_page { width: 400px !important; } #opt_email { padding-left: 3px !important; width: 276px !important; height: 20px !important; border: 1px solid #999; border-radius: 2px; -moz-box-shadow: 0 2px 2px #F2F2F2 inset; -webkit-box-shadow: 0 2px 2px #F2F2F2 inset; -webkit-background-clip: padding-box; font-size: 10px; font-family: 'Open Sans', sans-serif; color: #999; } #opt_name { border: none !important; background-color: transparent !important; width: 0px !important; height: 0px !important; } .input-submit { font-size:10px; font-family: 'Open Sans', sans-serif; padding-bottom: 2px !important; } #login h1 { padding-top: 2px; font-size: 11px; font-family: 'Open Sans',sans-serif; color: #fff; background-color: #c3c1c0;height:15px; margin-bottom: 15px; padding-left: 5px; text-transform:uppercase; } #login input { font-size:10px; font-family: 'Open Sans', sans-serif; } .wpcf7-form { height: 200px !important; width: 440px !important; } .wpcf7-form p { float: left ; width: 212px ; height: 30px ; } .wpcf7 { padding-top: 15px !important; padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 65px !important; font-size: 10px !important; font-family: 'Open Sans', sans-serif !important; color: #999 !important; } .wpcf7-text { font-size: 10px; color: #999; font-family: 'Open Sans', sans-serif; margin-left: 30px !important; width: 140px !important; border-color: #999 !important; border-width:1px; float:right; padding-left: 3px; padding-right: 3px; border: 1px solid #999; border-radius: 2px; box-shadow: 0 2px 2px #f2f2f2 inset; -moz-box-shadow: 0 2px 2px #f2f2f2 inset; -webkit-box-shadow: 0 2px 2px #f2f2f2 inset; -webkit-background-clip: padding-box; } .wpcf7-select { width: 119px !important; overflow: hidden !important; height: 20px !important; font-size: 10px !important; font-family: 'Open Sans',sans-serif !important; } .wpcf7-select option { width: 90px !important; overflow: hidden !important; font-size: 10px; font-family: 'Open Sans',sans-serif; color: #999; } .states { width: 110px !important; } .entrytext { position: relative !important; overflow: hidden !important; height: 479px; width: 479px; } .entrytext a { color: ##665041; font-family: 'Open Sans',sans-serif; font-size: 10px; } .wpcf7-form-control-wrap textarea { font-size: 10px; color: #999; font-family: 'Open Sans', sans-serif; height : 75px !important; width: 370px !important; border-color: #999 !important; border-width:1px; float: right; padding-left: 3px; padding-right: 3px; border: 1px solid #999; border-radius: 2px; box-shadow: 0 2px 2px #f2f2f2 inset; -moz-box-shadow: 0 2px 2px #f2f2f2 inset; -webkit-box-shadow: 0 2px 2px #f2f2f2 inset; -webkit-background-clip: padding-box; } .ngg-gallery-list li { margine-left:0px !important; } .ngg-gallery-list li img { height:50px !important; width:50px !important; } .input-radio { margin-top: 5px !important; } .alo_easymail_form_table2 tbody tr td { font-size: 10px !important; font-family: 'Open Sans', sans-serif !important; color: #999 !important; line-height: 18px !important; vertical-align: middle !important; } .alo_em_widget_loading { font-size: 10px !important; font-family: 'Open Sans', sans-serif !important; color: #999 !important; } .alo_em_widget_loading img { font-size: 10px !important; font-family: 'Open Sans', sans-serif !important; color: #999 !important; } .alo_easymail_widget_ok { font-size: 10px !important; font-family: 'Open Sans', sans-serif !important; color: #999 !important; line-height: 18px !important; } input:-webkit-autofill { color: #fff !important; } #login { padding: 110px 24px 0 24px; font-size: 10px !important; font-family: 'Open Sans', sans-serif !important; color: #999 !important; position: relative; height: 369px; } #register { padding: 45px 20px 20px 20px; font-size: 10px !important; font-family: 'Open Sans', sans-serif !important; position: relative; height: 413px; } #loginuser { position: relative; margin-left: 20px !important; width: 125px !important; border-width:1px; float:left; margin: 0; padding: 3px; border: 1px solid #999; border-radius: 2px; -moz-box-shadow: 0 2px 2px #F2F2F2 inset; -webkit-box-shadow: 0 2px 2px #F2F2F2 inset; -webkit-background-clip: padding-box; } #contactpage p { line-height:14px !important; } #loginpassword { position: relative; margin-left: 20px !important; width: 125px !important; border-width:1px; float:left; margin: 0; padding: 3px; border: 1px solid #999; border-radius: 2px; -moz-box-shadow: 0 2px 2px #F2F2F2 inset; -webkit-box-shadow: 0 2px 2px #F2F2F2 inset; -webkit-background-clip: padding-box; } #login p { float: left; } #login a { font-size: 10px !important; font-family: 'Open Sans', sans-serif !important; color: #999 !important; position: relative; } #login input { float:left; } #cinfo { height: 120px; width: 100%; padding-top: 20px; } #cinfo h1 { padding-top: 2px; font-size: 11px; font-family: 'Open Sans',sans-serif; color: #fff; background-color: #c3c1c0;height:15px; margin-bottom: 15px; padding-left: 5px; text-transform:uppercase; } #binfo h1 { padding-top: 2px; font-size: 11px; font-family: 'Open Sans',sans-serif; color: #fff; background-color: #c3c1c0;height:15px; margin-bottom: 15px; text-transform:uppercase; padding-left: 5px; } #binfo { height: 157px; width: 100%; } #sinfo { height: 90px; width: 100%; } .entrytext p { font-size:10px; font-family: 'Open Sans', sans-serif; color:#999; line-height: 18px; } #sinfo input { margin-top: 10px; position: relative; float: right; font-size:10px; font-family: 'Open Sans', sans-serif; padding-bottom: 2px; } #finfo { height: 32px; width: 100%; } #finfo p, #finfo p a { height: 32px; width: 100%; font-size:8px !important; font-family: 'Open Sans', sans-serif; color:#999 !important; line-height:18px; } .reginput { width: 203px; height: 23px; float:left; position: relative; } .reginput p { margin-top: 2px; width:96px ; height: 20px; float:left; position: relative; } .reginput input { width: 110px !important; height: 13px; font-size: 10px; color: #999; font-family: 'Open Sans', sans-serif; float:right; position: relative; padding-left: 3px; padding-right: 3px; border: 1px solid #999; border-radius: 2px; -moz-box-shadow: 0 2px 2px #F2F2F2 inset; -webkit-box-shadow: 0 2px 2px #F2F2F2 inset; -webkit-background-clip: padding-box; } .result { background: url(../images/linesheets_dotted_line.png ) no-repeat; background-position: center bottom !important; } .scrollbuttons { margin: 0px 50px 0px 220px; } .scrollbuttons .sprev { padding-right: 7.5px; outline: 0; } .scrollbuttons .snext { padding-left: 7.5px; outline: 0; } #noprev { background: url(../images/left_arrow_dead.png) no-repeat center; left: 44% !important; position: absolute !important; width: 13px; height: 23px; margin-top: 3px; } #nonext { background: url(../images/right_arrow_dead.png) no-repeat center; left: 50% !important; position: absolute !important; width: 20px; height: 23px; margin-top: 3px; } .login #nav a, .login #backtoblog a { color: #493E2C; font-size: 10px; }