@import "mixins"; @sprite: url("../img/sprite.png") no-repeat; @orange: #E98121; @red: #8A0015; @yellow: #fdf7d9; @font-face { font-family: 'MyriadProRegular'; src: url('../font/myriadpro-regular.eot'); src: url('../font/myriadpro-regular.eot') format('embedded-opentype'), url('../font/myriadpro-regular.woff') format('woff'), url('../font/myriadpro-regular.ttf') format('truetype'), url('../font/myriadpro-regular.svg#MyriadProRegular') format('svg'); } /* Bootstrap defaults ------------------------------------------------------------------------ */ .form-horizontal { .control-label { text-align: left; } } label { font-weight: normal; } .form-control, .miles { border-radius: 0; border-color: #929292 #D7D7D7 #D7D7D7 #929292; padding: 3px; height: 30px; border-width: 1px; } textarea.form-control { resize: vertical; } .help-block { font-family: Arial, Verdana, Geneva; font-style: italic; font-size: 13px; margin-top: 0; } .panel-primary { border-color: @orange; .panel-heading { border-color: @orange; background-color: @orange; } } /* Common styles ------------------------------------------------------------------------ */ ul { padding-left: 15px; } fieldset { border-top: 2px solid #CCC; padding-top: 20px; h2 { margin-top: 0; } } table { width: 100%; } .label-info { text-decoration: none !important; } /* Main styles ------------------------------------------------------------------------ */ html { height: 100%; } body { font-family: Arial, Verdana, Geneva; color: #333; padding-bottom: 30px; #gradient.vertical(#D1D1D1, #FFF, 0%, 33%); background-attachment: fixed; } a { color: #336da7 } .orange { color: @orange !important; } .red { color: @red !important; } .footer { background: #FFF; box-shadow: 0 15px 30px #CCC; } .row.home-banner.fivecolumns img { max-height: 194px } @media (min-width: 1200px) { .container { width: 1024px; } } .header { background: #8A0015; height: 100px; .logo { background: @sprite; width: 660px; height: 68px; float: left; margin: 17px 0 0 30px; } } @media (max-width: 700px) { .header { height: 80px; .logo { background-position: 0 -333px; width: 293px; height: 50px; margin-left: 10px } } } .navbar { padding: 0; margin-bottom: 0; background: #443D41; border-top: 2px solid #CACACA; border-bottom: 2px solid #CACACA; box-shadow: 0 10px 15px #999; border-radius: 0; position: relative; z-index: 1; .nav { & > li { padding-right: 8px; margin-right: 5px; &:not(:last-child):after { content: "|"; color: #636363; position: absolute; right: 0; top: 10px; } &.active:before { content: ""; position: absolute; bottom: -2px; left: 50%; margin-left: -9px; width: 18px; height: 10px; background: @sprite; background-position: -740px 0; } & > a { color: #FFF; text-transform: uppercase; padding: 13px 0; &:hover { background: none; color: @orange; } } &.dropdown:hover .dropdown-menu { display: block; } } } .dropdown-menu { top: 45px; background-color: #FDF7D9; li { & > a { padding-left: 10px; padding-right: 10px; text-transform: uppercase; font-weight: bold; font-size: 13px; color: #333; &:before { content: "•"; color: @orange; font-size: 16px; display: inline-block; margin-right: 10px; } } } } div.dropdown-menu { width: 585px; .clearfix(); li { list-style: none; & > a { display: block; &:before { margin-left: -15px; } } } } } .nav.navbar-nav { font-size: 12px; font-weight: bold } @media (min-width: 992px) { .navbar { padding-left: 20px; } } @media (max-width: 991px) { .navbar .nav li a { font-size: 13px; } } .search-form { margin: 0; .btn-search { background: @sprite; background-position: -700px 0; width: 24px; height: 24px; border: none; } .form-group { position: relative; .form-control { height: 22px; background: #DBDADA; font-size: 12px; padding: 3px 10px 3px 30px; width: 170px; border: none; } .search-options-caret { position: absolute; left: 10px; top: 8px; border: 6px solid transparent; border-top-color: #444; } .search-options { position: absolute; padding: 0; background: #DBDADA; border-radius: 0; width: 100%; li { list-style: none; border-bottom: 1px solid #FFF; &:last-child { border-bottom: none; } a { text-transform: lowercase; color: #444; display: block; padding: 2px 10px; font-size: 12px; } &.active a { font-weight: bold; background-color: transparent; } } } } } @media (max-width: 1199px) { .search-form { margin-top: -100px; } } @media (max-width: 991px) { .search-form { margin-top: -120px; } } .footer { font-size: 11px; border-top: 2px solid #DCDCDC; background-color: #E6E6E6; padding: 0 20px 5px; margin-bottom: 10px; .fivecolumns { .clearfix; & > div { padding-left: 60px; padding-right: 0; } } .row { background: #FDFDFD; @media (min-width: 992px) { padding-left: 20px; } } h3 { font-size: 11px; text-transform: uppercase; margin-bottom: 5px; } a { color: #333; } ul { padding: 0; } li { list-style: none; } .copy { color: #999; text-align: center; } } .home-banner { margin-top: 30px; margin-bottom: 30px; & > div { background: #F5F4F4; padding: 40px 0; text-transform: uppercase; } a { display: block; text-align: center; color: #5B5B5B; text-decoration: underline; &:hover { text-decoration: none; } span { background: @sprite; display: block; width: 167px; height: 194px; margin: 0 auto 15px; } &.meditations span { background-position: 0 -100px; } &.find-meeting span { background-position: -170px -100px; } &.contribute span { background-position: -340px -100px; } &.literature span { background-position: -510px -100px; } } } .content { background: #FFF; box-shadow: 0 0 30px #CCC; font-size: 15px; line-height: 150%; padding: 30px 0; font-family: 'MyriadProRegular', Arial, Verdana, Geneva; h1 { font-size: 25px; color: @orange; text-transform: uppercase; margin-top: 0; } } .home-content { padding-top: 0; h1 { text-align: center; padding: 0 40px; } & > div { padding: 0 40px; line-height: 180%; @media (min-width: 992px) { &:last-child { border-left: 2px solid #CCC; } } } } .navbar-toggle { border-color: #fff; } .navbar-toggle .icon-bar { border: 1px solid #fff } .home-banner a span { background: none; width: auto } .leftmenu { padding: 0; li { list-style: none; font-family: Arial, Verdana, Geneva; font-size: 12px; border-bottom: 1px solid #fff; background-color: #FDF7D9; line-height: 138%; padding: 3px 10px 3px 20px; a { color: #443D40; text-transform: uppercase; text-decoration: none; } a:hover, &.active a { font-weight: bold } } } .sidebar-banner { max-width: 100%; border: 1px solid #444; @media (max-width: 767px) { display: none; } } .mb10 { margin-bottom: 10px } .photo-descr { color: #878787; font-style: italic; line-height: 130%; font-family: Arial, Verdana, Geneva; font-size: 13px } .inner-content { .breadcrumb { border-radius: 0; background-color: transparent; font-size: 11px; padding-left: 0; font-family: Arial, Verdana, Geneva; line-height: 1; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin-bottom: 10px; a { color: #443D40; text-decoration: none; &:hover { text-decoration: underline; } } & > li + li:before { content: "> "; color: #443D40; } } img { max-width: 100%; } h2 { font-weight: bold; color: #212121; font-size: 18px; text-transform: uppercase; } h3 { font-weight: bold; color: #212121; font-size: 17px; } h4 { font-weight: bold; color: #212121; font-size: 16px; margin-top: 20px; } table { margin-bottom: 20px; } } .mtm10 { margin-top: -10px } .inner-content a { text-decoration: underline } .inner-content a:hover { text-decoration: none } .formlink, .pdflink { display: table-cell; height: 31px; padding-left: 36px; vertical-align: middle } .formlink { background: @sprite; background-position: 0 -89px } .pdflink { background: @sprite; background-position: 0 -126px } .footer .row { background-color: #E6E6E6; } .greyblock { background: #eee; padding: 20px; padding-bottom: 10px } .faqlinks a { display: block } .faqlinks { margin-bottom: 30px } .contactform { border: 1px solid #ccc; padding: 30px; padding-bottom: 20px; margin-bottom: 30px; label { padding-right: 0; em { font-style: normal; color: #EA5221; } span { color: #aaa; font-style: italic; display: block; font-size: 12px; font-style: italic; margin-right: 10px; margin-top: -8px; } } .control-label { text-align: right; } .form-control { border-radius: 0; border-color: #D7D7D7; border-left-color: #929292; border-top-color: #929292; } .form-group { margin-bottom: 5px; } .col-md-7.col-md-offset-5 small { font-size: 11px; color: #444; font-family: Arial, Verdana, Geneva; } .col-md-7.col-md-offset-5 { line-height: 120% } button { width: 100px; height: 38px; } } .pt0 { padding-top: 0 !important } .w100 { width: 100px } .mailblock li { list-style: none } .mailblock li:first-child { border-right: 1px solid #ccc; } .mailblock { background: #eee; padding: 15px } .p0 { padding: 0 } .mailblock li.callicon span { padding-left: 20px; background: @sprite; background-position: 0 -217px; display: inline-block; font-size: 19px } .leftside h4 { display: inline-block; padding-left: 37px } .twopixels { border-width: 2px } .monthly, .yearly { color: #fff; font-size: 13px; text-transform: uppercase; background-color: #EA5222; border-radius: 4px; display: inline-block; padding: 3px 8px; margin-left: 5px } .yearly { background-color: #333333 } .mt20 { margin-top: 20px } .mt30 { margin-top: 30px } .languages .col-md-4 { float: right; margin-top: -36px } .languages.bottom .col-md-4 { float: none; margin: 0px auto } .languages .col-md-4 select { padding-right: 5px } .orangebutton, .btn-primary { background: #ffffff; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjZmZiNTRkIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmNjkwMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, #ffffff 0%, #ffb54d 3%, #ff6903 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(3%, #ffb54d), color-stop(100%, #ff6903)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #ffffff 0%, #ffb54d 3%, #ff6903 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #ffffff 0%, #ffb54d 3%, #ff6903 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%, #ffb54d 3%, #ff6903 100%); /* IE10+ */ background: linear-gradient(to bottom, #ffffff 0%, #ffb54d 3%, #ff6903 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ff6903', GradientType=0); /* IE6-8 */ -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 1px solid #FF8F27; color: #fff; text-decoration: none !important; text-transform: uppercase; font-weight: bold; font-weight: 15px } .orangebutton { padding: 5px 15px; } .orangebutton:hover, .btn-primary:hover { color: #fff; background: #d1d1d1; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2QxZDFkMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjNmM2MjY4IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzMzMmYzMSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=); background: -moz-linear-gradient(top, #d1d1d1 0%, #6c6268 3%, #332f31 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d1d1d1), color-stop(3%, #6c6268), color-stop(100%, #332f31)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #d1d1d1 0%, #6c6268 3%, #332f31 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #d1d1d1 0%, #6c6268 3%, #332f31 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #d1d1d1 0%, #6c6268 3%, #332f31 100%); /* IE10+ */ background: linear-gradient(to bottom, #d1d1d1 0%, #6c6268 3%, #332f31 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#332f31', GradientType=0); /* IE6-8 */ border-color: #444 } .mtm40 { margin-top: -40px } .two { border-width: 2px } hr { border-color: #ccc } .note em { color: #999; font-size: 12px; font-family: Arial, Verdana, Geneva; font-weight: normal; display: block; } .mreg { .note { padding-top: 0; line-height: 1; max-width: 196px; } h2 + .photo-descr { margin-top: -10px; display: block; margin-bottom: 10px } } .subheader { display: block; margin-top: -5px } .w100 { width: 100% } .mb20 { margin-bottom: 20px } .other { position: relative; z-index: 22; width: 230px; left: -20px; top: 5px } .ir label { font-weight: normal; line-height: 15px } .ir textarea { border-radius: 0; border-radius: 0; border-color: #929292 #D7D7D7 #D7D7D7 #929292; padding: 3px; } .ir { font-size: 14px } .irtable { margin-top: 30px; } .pl0 { padding-left: 0 } .plr0 { padding-left: 0; padding-right: 0 } .pr0 { padding-right: 0 } .chb input[type="checkbox"] { margin-top: 0 } .ml0 { margin-left: 0 !important } .chb input[type="text"] { width: 110px; height: 22px; display: inline-block } .otherfield input[type="checkbox"] { float: none; vertical-align: middle; margin-bottom: 2px; } .chb .checkbox-inline { margin-left: 0; margin-right: 10px } .tleft { text-align: left !important; padding-right: 0 } .orange { color: #EA5221 } .smallgrey { font-size: 14px; color: #999; display: block; margin-top: -15px } .pr { position: relative } .mt10 { margin-top: 10px } .question { display: inline-block; text-align: center; line-height: 24px; color: #fff; font-weight: bold; font-size: 14px; background-color: #33B5E5; height: 24px; width: 24px; -webkit-border-radius: 12px; margin-top: 3px; -moz-border-radius: 12px; border-radius: 12px; cursor: pointer; position: absolute; top: 0px; right: 15px; text-decoration: none !important; } .mtm20 { margin-top: -20px } .mb50 { margin-bottom: 50px } .db { display: block } .miles { border-width: 1px; width: 30px; height: 24px } .pr45 { padding-right: 45px } .lefttext { float: left; text-align: center; font-weight: bold; font-size: 17px; margin-top: 30px; line-height: 140% } .topbanner { max-width: 490px; width: 100%; margin: 10px auto } .fivecol { width: 20%; float: left } .home-banner { background: #F5F4F4; & > div { background: none; padding-bottom: 20px; span img { max-height: 194px; } } } .nv { font-size: 16px } .home-banner a { font-family: 'MyriadProRegular', Arial, Verdana, Geneva; font-size: 15px; } .footer li { font-family: 'MyriadProRegular', Arial, Verdana, Geneva; font-size: 13px } .footer h3 { font-family: 'MyriadProRegular', Arial, Verdana, Geneva; font-size: 14px } .pdf { display: inline-block; width: 16px; height: 16px; background: url(../img/pdf.png) no-repeat left top } .adr { margin-top: 10px } .mr li { margin-bottom: 10px } .wml { tr:nth-child(odd) td { background-color: #EEE; } td, th { border: 1px solid #ccc; padding: 5px 10px; border-collapse: collapse; font-weight: normal } ul { padding-left: 15px } } .greybg td { background-color: #eee } .mt { tr:nth-child(odd) td { background-color: #EEE; } td, th { padding: 10px; border: 1px solid #fff; } } .newlink, .newlink_meeting, .newlink_ig, .glasslink, .attenlink { background: url(../img/sprite.png) no-repeat -962px -102px; width: 38px; height: 32px; display: inline-block; margin-right: 10px; position: relative } .glasslink { width: 45px; height: 32px; background-position: -955px -142px } .attenlink { width: 25px; height: 32px; background-position: -975px -179px } .t10 { top: 10px } .t4 { top: 4px } .two-border-box { border-top: 2px solid #ccc; border-bottom: 2px solid #ccc; padding: 10px 0; margin: 10px 0 } @media (max-width: 767px) { .navbar { padding: 0; } .navbar .nav > li.active:before { background: none } .navbar .nav > li:after { content: " " } .navbar-collapse, .navbar-form { box-shadow: none } .navbar-nav { padding: 0 15px } .search-form { margin-top: 0; padding-left: 0 } .search-form .form-group { display: inline-block } .search-form .btn-search { margin-top: -20px } .home-banner a span img { max-width: 80% } .mailblock li:first-child { border-right: none; } .mailblock li.callicon { text-align: center; margin-top: 20px } } @media (max-width: 991px) { .row.home-banner.fivecolumns { background-color: #F5F4F4 } .mp .plr0 { padding-left: 15px; padding-right: 15px } } @media (max-width: 355px) { .fourct th, .fourct td { font-size: 12px; font-family: Arial } .wml td, .wml th, .mt td { font-size: 12px; } } /*fivecolumns*/ @media (min-width: 992px) { .fivecolumns .col-md-2, .fivecolumns .col-lg-2 { width: 20%; *width: 20%; } }