/* myMoleskine Community - v. 2.0 2012 - Milano */ /* Reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, img, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: none; } /* Clearfix */ .clearfix:after { clear:both; content:"."; display:block; height:0; visibility:hidden; } * html .clearfix { height:1%; } .clear { clear: both; height: 0 } /* Extra fonts */ /* Brandon Grotesque */ @font-face {font-family: 'BrandonGrotesque-Bold';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_0_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_0_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_0_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_0_0.ttf') format('truetype');} @font-face {font-family: 'BrandonGrotesque-MediumItalic';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_1_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_1_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_1_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_1_0.ttf') format('truetype');} @font-face {font-family: 'BrandonGrotesque-Thin';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_2_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_2_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_2_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_2_0.ttf') format('truetype');} @font-face {font-family: 'BrandonGrotesque-RegularItalic';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_3_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_3_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_3_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_3_0.ttf') format('truetype');} @font-face {font-family: 'BrandonGrotesque-BlackItalic';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_4_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_4_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_4_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_4_0.ttf') format('truetype');} @font-face {font-family: 'BrandonGrotesque-Black';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_5_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_5_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_5_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_5_0.ttf') format('truetype');} @font-face {font-family: 'BrandonGrotesque-BoldItalic';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_6_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_6_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_6_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_6_0.ttf') format('truetype');} @font-face {font-family: 'BrandonGrotesque-Light';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_7_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_7_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_7_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_7_0.ttf') format('truetype');} @font-face {font-family: 'BrandonGrotesque-LightItalic';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_8_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_8_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_8_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_8_0.ttf') format('truetype');} @font-face {font-family: 'BrandonGrotesque-ThinItalic';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_9_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_9_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_9_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_9_0.ttf') format('truetype');} @font-face {font-family: 'BrandonGrotesque-Regular';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_A_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_A_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_A_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_A_0.ttf') format('truetype');} @font-face {font-family: 'BrandonGrotesque-Medium';src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_B_0.eot');src: url('//mymoleskine.moleskine.com/community/webfonts/234DD9_B_0.eot?#iefix') format('embedded-opentype'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_B_0.woff') format('woff'),url('//mymoleskine.moleskine.com/community/webfonts/234DD9_B_0.ttf') format('truetype');} /*Edelsans*/ @font-face { font-family: 'EdelsansRegular'; src: url('//mymoleskine.moleskine.com/community/webfonts/edelsans_regular-webfont.eot'); src: url('//mymoleskine.moleskine.com/community/webfonts/edelsans_regular-webfont.eot?#iefix') format('embedded-opentype'), url('//mymoleskine.moleskine.com/community/webfonts/edelsans_regular-webfont.woff') format('woff'), url('//mymoleskine.moleskine.com/community/webfonts/edelsans_regular-webfont.ttf') format('truetype'), url('//mymoleskine.moleskine.com/community/webfonts/edelsans_regular-webfont.svg#EdelsansRegular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'EdelsansUltraLight'; src: url('//mymoleskine.moleskine.com/community/webfonts/edelsans_ultralight-webfont.eot'); src: url('//mymoleskine.moleskine.com/community/webfonts/edelsans_ultralight-webfont.eot?#iefix') format('embedded-opentype'), url('//mymoleskine.moleskine.com/community/webfonts/edelsans_ultralight-webfont.woff') format('woff'), url('//mymoleskine.moleskine.com/community/webfonts/edelsans_ultralight-webfont.ttf') format('truetype'), url('//mymoleskine.moleskine.com/community/webfonts/edelsans_ultralight-webfont.svg#EdelsansUltraLight') format('svg'); font-weight: normal; font-style: normal; } /* Generic */ body { background: #fff url(//mymoleskine.moleskine.com/community/img/bg_footer.jpg); font-family:"BrandonGrotesque-Regular"; font-size: 12px; line-height: 17px; width: 100%; display: table; overflow-x:hidden; color: #37392b } a { color: #37392b; text-decoration: none; } h1 { position: absolute; left: -9999px; } h2,h3,h4 { font-family: BrandonGrotesque-Bold } /* Header */ #headerWrapper { width: 100%; height: 88px; background: #FAFBF6; padding-top: 10px; } #header { width: 972px; height: 88px; margin: 0px auto; position: relative; } #header img.logo { margin-top: 32px; width: 325px; } #header .topNav { position: absolute; top: 0px; left: 0px; } #header .topNav ul li { list-style: none; display: inline; float: left; padding-right: 20px; } #header .topNav ul li a { color: #927f6f; text-decoration: none; font: normal 10px "BrandonGrotesque-Medium"; text-transform:uppercase; } #header .topNav ul li a:hover { color: #fc8c2a } #header .topNav ul li:last-child a { background: #fc8c2a; padding: 1px 8px 0px 8px; color: #fff; border-radius: 20px; } #header .topNav ul li:last-child a:hover { background: #856444; } #header .serviceNav { position: absolute; top: 0px; right: 0px; } #header .serviceNav ul li { list-style: none; display: inline; float: left; margin-right: 20px; position: relative; } #header .serviceNav ul li:last-child { margin-right: 0; } #header .serviceNav ul li a { background: url(//mymoleskine.moleskine.com/community/img/arrow_orange.png) no-repeat right; color: #A59075; text-decoration: none; font: normal 12px 'BrandonGrotesque-Medium'; text-transform:uppercase; padding-right: 10px; } #header .serviceNav ul li a img { vertical-align: middle; margin-right: 5px; } #header .serviceNav ul li a:hover { color: #fc8c2a } #header .mainNav { position: absolute; bottom: 0px; left: 335px; bottom: 0; } #header .mainNav ul li { list-style: none; display: inline; float: left; margin-right: 18px; height: 55px; } #header .mainNav ul li a { display:block; height: 50px; font: normal 16px "BrandonGrotesque-Bold"; color: #37392b; } #header .mainNav ul li a.active, #header .mainNav ul li a:hover { border-bottom: 5px solid #F98800; /*padding-bottom: 24px;*/ color: #fc8c2a } #header #searchBox { position: absolute; right: 0px; bottom: 28px; width: 95px; height: 25px; border: 1px solid #ddd; border-radius: 20px; } #header #searchBox #searchQuery { float: left; width: 55px; border: none; background: transparent; font: normal 12px "BrandonGrotesque-Medium"; color: #afafaf; padding: 0px; margin: 5px 5px 0px 10px; text-transform: uppercase; } #header #searchBox #searchButton { position: absolute; right: 8px; top: 4px; } #header a.submitButton { margin-top: 42px; } /* Login Widget */ .dropdownMenu { position:absolute; top:100%; z-index:900; display:none; float:left; padding: 10px; margin:14px 20px 0 -20px; zoom:1; background-color:#f4f4f4; border-color:#999;border-color: #ccc; border-style:solid; border-width:1px; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; -webkit-box-shadow:0 5px 10px rgba(0,0,0,.2); -moz-box-shadow:0 5px 10px rgba(0,0,0,.2); box-shadow:0 5px 10px rgba(0,0,0,.2); -webkit-background-clip:padding-box; -moz-background-clip:padding;background-clip:padding-box; min-width: 200px; /*min-height: 200px;*/ } .dropdownMenu h3 { font: normal 24px "BrandonGrotesque-Light"; margin-bottom: 8px; border-bottom: 1px dotted #ddd; color: #f90; } .dropdownMenu span.menuArrow { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); rotation: -45deg; -ms-transform: rotate(-45deg); background: #f4f4f4; border-right: 1px solid #ccc; border-top: 1px solid #ccc; display: block; height: 10px; left: 40px; position: absolute; top: -6px; width: 10px; z-index: 9999; } .dropdownMenu #mskLoginForm label { float: left; width: 100%; font: normal 14px "BrandonGrotesque-Medium"; } #header .serviceNav ul li .dropdownMenu ul li { padding: 4px 0px; border-bottom: 1px dotted #ddd; width: 100%; } #header .serviceNav ul li .dropdownMenu ul li a { background: none; } .dropdownMenu #mskLoginForm input[type="text"], .dropdownMenu #mskLoginForm input[type="password"] { float: left; width: 94%; margin: 3px 0px 8px 0px; padding: 5px; border: 1px solid #ccc; font: normal 14px "BrandonGrotesque-Regular"; border-radius: 3px; } .dropdownMenu span.loginLoading { display: block; float: left; width: 100%; color: #856444 } .dropdownMenu #mskLoginForm input[type="submit"] { float: left; margin: 10px 0px; background: #FE8D04; border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #FE8D04; font: normal 12px "BrandonGrotesque-Medium"; color: #fff; padding: 5px 10px; cursor: pointer; text-transform: uppercase; } .dropdownMenu #mskLoginForm input[type="submit"]:hover { background: #C33030; border: 1px solid #A6292A; } .dropdownMenu .ajaxLoginError { margin-bottom: 10px; display: none; } /* Main Content */ #promoContainer { margin: 0px auto; width: 972px; } #promoWrapper { background: #DA7933 url(//mymoleskine.moleskine.com/community/img/bg_promo_wrapper.png) no-repeat bottom center; width: 100%; height: 308px; padding-top: 2px; } #promoWrapper.error404Variant1 { background: #333 url(//mymoleskine.moleskine.com/community/img/promo_404_1.jpg) no-repeat bottom center; border-top: 2px solid #fc8c2a; height: 451px; padding-top: 0; } #promoWrapper.error404Variant2 { background: #333 url(//mymoleskine.moleskine.com/community/img/promo_404_2.jpg) no-repeat bottom center; border-top: 2px solid #fc8c2a; height: 451px; padding-top: 0; } #promoWrapper.galleryWrapper { background-color: #c22b34; } /*#promoWrapper.appsWrapper { background-color: #E95E1D; } #promoWrapper.widgetsWrapper { background-color: #A22628; } #promoWrapper.socialWrapper { background-color: #C52F30; } #promoWrapper.CGIWrapper { background-color: #C22B34; }*/ #promoWrapper.artworksWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_artworks.jpg) no-repeat top center; } #promoWrapper.videosWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_videos.jpg) no-repeat top center; } #promoWrapper.hacksWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_hacks.jpg) no-repeat top center; } #promoWrapper.mskWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_msk.jpg) no-repeat top center; } #promoWrapper.templatesWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_templates.jpg) no-repeat top center; } #promoWrapper.passionWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_passion_templates.jpg) no-repeat top center; } #promoWrapper.widgetsWrapper { background: #A22628 url(//mymoleskine.moleskine.com/community/img/promo_widgets.jpg) no-repeat top center; } #promoWrapper.appsWrapper { background: #E95E1D url(//mymoleskine.moleskine.com/community/img/promo_apps.jpg) no-repeat top center; } #promoWrapper.socialWrapper { background: #C52F30 url(//mymoleskine.moleskine.com/community/img/promo_social.jpg) no-repeat top center; } #promoWrapper.membersWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_members.jpg) no-repeat top center; } #promoWrapper.CGIWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_cgi.jpg) no-repeat top center; } #promoWrapper.dealersWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_dealers.jpg) no-repeat top center; } #promoWrapper.mediaKitWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_media_kit.jpg) no-repeat top center; } #promoWrapper.submitWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_submit.jpg) no-repeat top center; } #promoWrapper.moleskineJournalWrapper { background: #000 url(//mymoleskine.moleskine.com/community/landing_framework/img/appslanding/bg_moleskine_journal_wrapper.jpg) no-repeat top center; } #promoWrapper.moleskineJournalWrapper .singlePromo .promoText { padding-top: 20px; } #promoWrapper.holidayCalendarWrapper { background: #c22b34 url(//mymoleskine.moleskine.com/community/img/promo_holiday.jpg) no-repeat top center; } #promoWrapper.holidayCalendarWrapper .singlePromo .promoText { padding-top: 30px; } #promoWrapper.appsPaper53Wrapper { background: #E65C2B url(//mymoleskine.moleskine.com/community/img/promo_paper53.jpg) no-repeat top center; } #promoWrapper.appsEvernoteWrapper { background: #4BA539 url(//mymoleskine.moleskine.com/community/img/promo_evernote_06_2015.jpg) no-repeat top center; } #promoWrapper.myAnalogCloudWrapper { background: #000 url(//mymoleskine.moleskine.com/community/img/promo_myanalogcloud.jpg) no-repeat top center; } #promoWrapper.myAnalogCloudWrapper a { color: #f90 } #promoWrapper .singlePromo { margin: 0px auto; width: 972px; height: 308px; } #promoWrapper .singlePromo .promoText { float: left; width: 212px; padding: 50px 30px 0px 0px; } #promoWrapper .singlePromo .promoText h2, #promoWrapper .singlePromo .promoText h2 a { font: normal 36px "BrandonGrotesque-Light"; color: #fff; margin-bottom: 8px; line-height: 36px; } #promoWrapper .singlePromo .promoText h3, #promoWrapper .singlePromo .promoText h3 a { font: normal 20px "BrandonGrotesque-Light"; color: #FCCA4A; } #promoWrapper .singlePromo .promoText p { margin: 20px 0px; font: normal 18px "BrandonGrotesque-Light"; color: #fff; line-height: 19px; } #promoWrapper .singlePromo .promoText a.callToActionLink { font: normal 14px "BrandonGrotesque-Medium"; color: #F0C9AD; margin-top: 30px; background: url(//mymoleskine.moleskine.com/community/img/arrow_white.png) no-repeat right; padding-right: 12px; float: left; } #promoWrapper .singlePromo .promoRichContent { float: left; width: 729px; } #promoWrapper.galleryWrapper .singlePromo .promoText *, #promoWrapper.appsWrapper .singlePromo .promoText *, #promoWrapper.widgetsWrapper .singlePromo .promoText *, #promoWrapper.socialWrapper .singlePromo .promoText *, #promoWrapper.CGIWrapper .singlePromo .promoText * { text-shadow: 0px 0px 1px #666; text-rendering: optimizeLegibility; } #promoWrapper.galleryWrapper .singlePromo h3, #promoWrapper.appsWrapper .singlePromo h3, #promoWrapper.widgetsWrapper .singlePromo h3, #promoWrapper.socialWrapper .singlePromo h3, #promoWrapper.CGIWrapper .singlePromo h3 { font: normal 24px "BrandonGrotesque-Medium"; color: #fc8c2a; } #statusBarWrapper { background: #F2F4EC url(//mymoleskine.moleskine.com/community/img/bg_status_bar_wrapper.png) no-repeat top center; width: 100%; height: 45px; } #statusBar { margin: 0px auto; width: 972px; } #statusBar ul li { width: 212px; padding: 15px 15px 8px 15px; border-right: 1px dotted #ccc; display: inline; float: left; /*background: url(//mymoleskine.moleskine.com/community/img/arrow_orange.png) no-repeat 95% 50%;*/ z-index:999; position: relative; } #statusBar ul li a { color: #82603B; z-index:999; } #statusBar ul li a.playControl { position: absolute; top: 47%; left: 92%; display: block; width: 12px; height: 12px; background: url(//mymoleskine.moleskine.com/community/img/arrow_orange.png) no-repeat top center; z-index:999; cursor: pointer; } #statusBar ul li a.playControl.showPause { background: url(//mymoleskine.moleskine.com/community/img/icon_pause.png) no-repeat top left; } #statusBar ul li:last-child { border: none; background-position: right; } #statusBar ul li img { vertical-align: middle } #mainContentWrapper { background: url(//mymoleskine.moleskine.com/community/img/bg_paper_texture.jpg); width: 100%; clear:both; padding: 15px 0px 50px 0px; } #mainContentWrapper.entryWrapper { padding-top: 0px; } #mainContent { width: 972px; margin:0px auto; min-height: 600px; } #mainContent #navCol { float: left; width: 242px; } #mainContent #contentCol { float: left; width: 729px; border-left: 1px dotted #ccc; min-height: 600px; } #mainContent #contentCol.contentColWithPadding { width: 700px; padding-left: 29px; } #mainContent #contentCol h2 { font: normal 36px "BrandonGrotesque-Thin"; color: #37393b; } #mainContent #contentCol h3 { font: normal 24px "BrandonGrotesque-Light"; color: #37393b; } #mainContent #contentCol h4 { font: normal 20px "BrandonGrotesque-Light"; color: #fc8c2a; } #mainContent #contentCol.contentColWithPadding p { font-size: 14px; line-height: 22px; } #mainContent #contentCol.CGIContentColumn { width: 700px; padding-left: 29px; font-size: 14px; } #mainContent #contentCol.CGIContentColumn h2 { text-transform: uppercase; margin-bottom: 30px; } #mainContent #contentCol.CGIContentColumn a { color: #fc8c2a; font-weight: bold; text-decoration: underline } #mainContent #contentCol.CGIContentColumn a.submitButton, #mainContent #contentCol.CGIContentColumn a.butt { color: #fff; text-decoration: none; } #mainContent #contentCol.CGIContentColumn a.submitButton:hover, #mainContent #contentCol.CGIContentColumn a.butt:hover {background: #C33030; border: 1px solid #A6292A; } #mainContent #contentCol.categoryColumn, #mainContent #contentCol.templatesColumn { width: 700px; padding-left: 29px; font-size: 14px; } #mainContent #contentCol.categoryColumn h4, #mainContent #contentCol.templatesColumn h4 { font: normal 14px "BrandonGrotesque-Medium"; color: #575a44; text-transform: uppercase } #mainContent #contentCol.templatesColumn p, #mainContent #contentCol.editorialArchive p { line-height: 19px; } #mainContent #navCol h4 { font: normal 14px "BrandonGrotesque-Bold"; color: #535643; margin-bottom: 7px; padding: 0px 15px; } #mainContent #navCol ul { border-bottom: 1px dotted #ccc; margin-bottom: 15px; } #mainContent #navCol ul:last-child { border-bottom: none; } #mainContent #navCol ul li { list-style: none; background: url(//mymoleskine.moleskine.com/community/img/arrow_orange.png) no-repeat 95% 50%; padding: 4px 15px; } #mainContent #navCol ul li:last-child { margin-bottom: 15px; } #mainContent #navCol ul li a { font: normal 12px "BrandonGrotesque-Medium"; color: #927f6f } #mainContent #navCol ul li a.active, #mainContent #navCol ul li a:hover { color: #fc8c2a } #mainContent #contentCol404 h2 { font: normal 36px "BrandonGrotesque-Thin"; color: #37393b; } #progressBarWrapper { width: 972px; margin: -18px auto 18px auto; clear: both; height: 5px; } .pc_bar_container_overflow { position: absolute; bottom: -47px; left: 0px; } .pc_bar_container { position: absolute; bottom: -67px; left: 0px; } .pc_bar_container_underflow div { background: #fc8c2a; } #progressBarFill { width: 100px; height: 5px; background: #fc8c2a } /* Content Navigation */ .anchor_nav, #anchor_nav { border-top: 1px solid #ccc; padding: 5px 0px; margin-bottom: 30px; } .anchor_nav ul li, #anchor_nav ul li { list-style: none; display: inline; float: left; padding: 0px 10px; border-right: 1px solid #ccc; } .anchor_nav ul li:first-child, #anchor_nav ul li:first-child { padding-left: 0px; } .anchor_nav ul li:last-child, #anchor_nav ul li:last-child { border-right: none; } .anchor_nav ul li a { text-transform: uppercase } .anchor_nav ul li a:hover { text-decoration: underline; color: #fc8c2a } /* Apps */ img.appIcon { float: left; margin-top: 20px; } img.appScreenshots { float: left; border-top: 2px solid #f60; border-bottom: 2px solid #f60; margin: 30px 0px 50px -29px; } p.appDescription { float: left; margin: 30px 0px 30px 20px; width: 585px; } ul.appFeatures { float: left; margin: 20px 0px; } ul.appFeatures li { list-style: square } /* Gallery */ .galleryHolder { float: left; clear: both; width: 100%; margin-bottom:25px; } img.galleryBadge { margin-left: 150px; z-index:848; margin-bottom: -50px; } .galleryHeader { position: relative; z-index: 848; padding-right: 120px; border-bottom: 2px solid #F85B0A; width:730px } .galleryHeader .actionButtons { float:right; width: 210px; height: 60px; margin-top: 60px; } .galleryHeader .submitButton, .submitButton, .creativityForm #artworks-submit, .creativityForm #videos-submit, .creativityForm #hacks-submit { float: right; margin-bottom: 8px; background: #FE8D04; border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #FE8D04; font: normal 12px "BrandonGrotesque-Medium"; color: #fff; padding: 10px 15px; cursor: pointer } .galleryHeader .submitButton:hover, .submitButton:hover, .creativityForm #artworks-submit:hover, .creativityForm #videos-submit:hover, .creativityForm #hacks-submit:hover { background: #C33030; border: 1px solid #A6292A; } .galleryHeader a.moreLink { float: right; font: normal 12px "BrandonGrotesque-Medium"; color: #927f6f; background: url(//mymoleskine.moleskine.com/community/img/arrow_orange.png) no-repeat right; padding-right: 12px; } .galleryHeader a.moreLink:hover { color: #fc8c2a } .galleryTitle { float:right; width: 710px; position:relative; padding-bottom: 20px; border-bottom: 1px dotted #ccc; } .galleryTitle h2 { font: normal 36px "BrandonGrotesque-Thin"; color: #37393b; } .galleryTitle h4 { margin: 15px 0px 3px 0px; font: normal 18px "BrandonGrotesque-Thin"; color: #575a44 } .galleryTitle h4 strong { font: normal 18px "BrandonGrotesque-Regular"; } .galleryTitle p { float: left; font: normal 16px "BrandonGrotesque-Regular"; color: #927f6f; } .galleryTitle p.galleryDesc { padding-top: 20px; } .galleryTitle p a.callToActionLink { color: #856444; font: normal 16px "BrandonGrotesque-Medium"; background: url(//mymoleskine.moleskine.com/community/img/arrow_orange.png) no-repeat right; padding-right: 12px; } .galleryTitle p a.callToActionLink:hover { color: #fc8c2a } .galleryTitle span#itemsCounter { font: normal 24px "EdelsansRegular"; color: #fc8c2a; } .galleryHeader .galleryTitle .actionButtons { position: absolute; top: 0; right: 0; margin-top: 0; } .gallery { width: 728px; background: url(//mymoleskine.moleskine.com/community/img/elastic_band.png) no-repeat bottom center; padding-bottom: 8px; } .gallery.galleryLarge { width:730px; padding: 0px 120px 7px 0px; } .galleryItem { float: left; width: 242px; height: 250px; margin-right: 1px; margin-bottom: 1px; } .gallery div:last-child { margin-right: 0; } .galleryItem img.thumbnailImage { width: 242px; height: 120px; } .galleryItem .textHolder { padding: 0px 10px 10px 10px; color: #fff; } .galleryItem .textHolder h3, .galleryItem .textHolder h3 a { color: #fff; font: normal 20px "BrandonGrotesque-Medium"; } .galleryItem .textHolder p { font: normal 11px "BrandonGrotesque-MediumItalic"; margin-top: -6px; } .galleryItem .textHolder span.authorName { font: normal 16px "BrandonGrotesque-Medium"; } .galleryItem .textHolder a.callToActionLink {font: normal 12px "BrandonGrotesque-Medium"; text-transform: uppercase; color: #fff; margin-top: 15px; float: left; background: none; padding-right: 0; } .galleryItem .textHolder a.callToActionLink:hover { text-decoration: underline } .galleryMember { position: relative; float: left; width: 212px; padding: 35px 15px; max-height: 60px; border-right: 1px dotted #ccc; border-bottom: 1px dotted #ccc; } .galleryMember:hover { background: #F5F7F1 url(//mymoleskine.moleskine.com/community/img/bg_member_hover.png) repeat-x bottom; } .galleryMember img.authorPicture { float: left; margin-right: 8px; } .galleryMember h4, .galleryMember h4 a { font: normal 16px "BrandonGrotesque-Medium"; } .galleryMember h4, .galleryMember h4 a, .galleryMember span.memberData { color: #856444; } .galleryMember span.contributesCount { color: #37392b } .galleryMember span.isAuthorBadge { position: absolute; top: 15px; right: 15px; display: block; width: 25px; height: 25px; background: url(//mymoleskine.moleskine.com/community/img/author_badge_small.png) no-repeat top left; text-indent: -9999px; } .galleryVideoThumbnail { width: 242px; height: 120px; position: relative; } .galleryVideoThumbnail span { position: absolute; bottom: 5px; right: 5px; display:block; width: 30px; height: 30px; background: url(//mymoleskine.moleskine.com/community/img/play_video.png) no-repeat; z-index: 848; } .galleryPager { float: left; clear: both; margin-top: 30px; width: 100%; text-align: right; } .galleryPager span, .galleryPager span a { font: normal 18px "BrandonGrotesque-Bold"; color: #927f6f; display: inline-block; min-width: 20px; text-align: center; padding: 0px 3px; } .galleryPager span.actual_page { color: #FF8B00; border-bottom: 4px solid #FF8B00; } .galleryPager span a:hover { color: #FF8B00; } .galleryPager span.counter { display: none; } .galleryPager span.first, .galleryPager span.last, .galleryPager span.prev, .galleryPager span.next { background: url(//mymoleskine.moleskine.com/community/img/pagination_sprite.png) no-repeat top left; text-indent: -9999px; cursor:pointer; padding: 0; min-width: 25px; } .galleryPager span.first a, .galleryPager span.last a, .galleryPager span.prev a, .galleryPager span.next a { display: block; width: 100%; height: 100%; padding: 0; } .galleryPager span.prev { width: 25px; background-position: 59% 0; margin: 0px 3px 0px 8px; } .galleryPager span.prev:hover { background-position: 72.5% 0; } .galleryPager span.next { width: 25px; background-position: 100% 0; margin: 0px 8px; } .galleryPager span.next:hover { background-position: 86% 0; } .galleryPager span.first { width: 16px; background-position: 10% 0; } .galleryPager span.first:hover { background-position: -4% 0; } .galleryPager span.last { width: 16px; background-position: 36% 0; } .galleryPager span.last:hover { background-position: 49% 0; } .galleryFilter { float: left; clear: both; padding: 20px 0px 20px 20px; width: 97%; } .galleryFilter .searchBox { background: url(//mymoleskine.moleskine.com/community/img/search_box_gallery.png) no-repeat top left; position: relative; width: 290px; height:26px; float: right; } .galleryFilter .searchBox input.querySearch { float: left; width: 245px; border: none; background: transparent; font: normal 12px "BrandonGrotesque-Medium"; color: #575a44; padding: 0px; margin: 4px 5px 0px 10px; text-transform: uppercase } .galleryFilter .searchBoxExtended input.querySearch { float: left; background: url(//mymoleskine.moleskine.com/community/img/search_box_mymoleskine.png) no-repeat top left; position: relative; width: 215px; height:23px; padding-left: 12px; font: normal 12px "BrandonGrotesque-Medium"; color: #575a44; margin: 4px 5px 0px 10px; border:none; text-transform: uppercase } .galleryFilter .searchBoxExtended span.textSearch { float: left; margin: 8px 10px; font: normal 14px "BrandonGrotesque-Medium"; color: #575a44; } select.querySelect { float:right; -webkit-appearance: none; -moz-appearance:none; cursor:pointer; padding:10px; width:230px; height:40px; background: url(//mymoleskine.moleskine.com/community/img/bg_select_box.png) no-repeat top left; border:none; font: normal 12px "BrandonGrotesque-Medium"; outline:none; } .galleryFilter .searchBoxExtended select.querySelect { float: left; margin-top: -5px; } .galleryFilter .searchBoxExtended .submitButton { float: right; background: #FE8D04; border-radius: 3px; -moz-border-radius: 3px; font: normal 12px "BrandonGrotesque-Medium"; color: #fff; padding: 8px 15px; margin-top: -3px; cursor:pointer } .galleryFilter .searchBoxExtended .submitButton:hover { background: #C33030; border: 1px solid #A6292A; } .galleryFilter .searchBox input.buttonSearch { position: absolute; right: 8px; top: 4px; text-align: right } .galleryFilter .browseBy { float: right; width: auto; } .galleryFilter .browseBy p { font: normal 12px "BrandonGrotesque-Medium"; color: #575a44; float: left; margin-right: 10px; padding-top: 12px; text-transform: uppercase } .galleryError { padding: 20px; font: normal 16px "BrandonGrotesque-Bold"; color: #FC8C2A; } .galleryError span.mySqlError { font: normal 12px "BrandonGrotesque-Medium"; color: #333; } .mskBox { float: left; clear: both; width: 100%; background: #fff; padding: 15px 0px; margin: 25px 0px; border-top: 1px dotted #ccc; border-bottom: 1px dotted #ccc; } .mskBox img.mskBadge { margin: -30px 30px; float: left; } .mskBox p { font: normal 17px "BrandonGrotesque-Bold"; color: #646850; } .mskBox a.viewButtonLarge { float: left; margin-top: 8px; background: #C33030; border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #A6292A; font: normal 12px "BrandonGrotesque-Medium"; color: #fff; padding: 10px 15px; } /* myAnalogCloud gallery */ .gallery.myanalogcloud .galleryItem { height: 190px; } .gallery.myanalogcloud .galleryItem .galleryExternalImageThumbnail { height: 110px; overflow: hidden } .gallery.myanalogcloud .galleryItem img { height: 334px; } /* Moleskine Journal Gallery */ .gallery.moleskinejournal .galleryItem { height: 290px; } .gallery.moleskinejournal .galleryItem .galleryExternalImageThumbnail { height: 210px; overflow: hidden } .gallery.moleskinejournal .galleryItem img { height: 334px; } /* Entries */ #breadcrumbsWrapper { float: left; clear: both; width: 100%; padding: 10px 0px; background: #fff url(//mymoleskine.moleskine.com/community/img/bg_promo_wrapper.png) no-repeat top center; } #breadcrumbs { width: 1000px; margin: 0px auto; color: #37392b; font: normal 14px "BrandonGrotesque-Bold"; padding-left: 25px; } #breadcrumbs a { color: #37392b; text-transform: uppercase; } #breadcrumbs a.currentItem { color: #FC8C2A } .entryTextContent { float: left; width: 460px; /*overflow-x: hidden;*/ } .entryTextContent span.reportContent a { background: url(//mymoleskine.moleskine.com/community/img/arrow_orange.png) no-repeat right; padding-right: 12px; font: normal 12px "BrandonGrotesque-Medium"; color: #856444; text-transform:uppercase } .entryTextContent > div { float: left; } .entryTitle { font: normal 48px "BrandonGrotesque-Thin"; margin: 20px 0px; letter-spacing: -4.5px; line-height: 40px; text-transform: uppercase } .entryRichContent { float: right; width: 500px; } .entryRichContent img { max-width: 100%; } .entryAuthor { float: left; width: 100%; margin: 5px 0px; color: #856444 } .entryAuthor img.authorPicture { float: left; width: 50px; height: 50px; margin-right: 8px; } .entryAuthor span.contributor { font: normal 12px "BrandonGrotesque-RegularItalic"; } .entryAuthor span.contributor a { font: normal 14px "BrandonGrotesque-Medium"; color: #856444 } .entryAuthor span.data { font: normal 12px "BrandonGrotesque-Regular"; } .entryShare { float: left; margin: 8px 0px; width: 100%; } .entryShare img { vertical-align: middle } .entryTags { float: left; width: 85%; background: url(//mymoleskine.moleskine.com/community/img/icon_tags.png) no-repeat left; padding: 5px 35px; margin-bottom: 15px; color: #856444 } .entryTags strong { font: normal 12px "BrandonGrotesque-Medium"; } .entryTags a { font: normal 13px "BrandonGrotesque-RegularItalic"; color: #856444 } .entryBody { margin: 10px 0px; width: 100%; } .entryBody h3, #postRating h3, #comments h3, #comments-open h3, .comments-open-header, #mainContent #contentCol.editorialArchive .comments-open-header, #mainContent #contentCol.editorialArchive .comments-header { font: normal 18px "BrandonGrotesque-Bold"; margin-bottom: 8px; } .entryBody p { font: normal 14px "BrandonGrotesque-Regular"; } .entryBody a { font-weight: bold; color: #f90; } .hacksEntryExcerpt { float: left; width: 95%; font-size: 14px; padding: 10px; margin: 10px 0px; background: #f4f4f4; color: #856444; border-radius: 3px; -moz-border-radius: 3px; } .mskToolbar { float: left; margin-top: 15px; } #postRating { float: left; width: 100%; margin: 20px 0px; padding: 20px 0px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #856444; } #postRating h3 { font: normal 18px "BrandonGrotesque-Bold"; color: #37392b } span.hintMessage, #comment-greeting, p.commentsConditions { font: normal 13px "BrandonGrotesque-RegularItalic"; color: #856444; float: left; clear: both; width: 100%; margin-bottom: 5px; } span.hintMessage a, #comment-greeting a { text-decoration: underline } .ratingContainer { width: 90px; float: left; display: inline; vertical-align: middle; margin-top: 8px; } div.rating-error, .ajaxLoginError, .ajaxError, .msg-error { background: url(//mymoleskine.moleskine.com/community/img/icon_error.png) no-repeat left; padding: 5px 35px; color: #C22B34; margin-top: 10px; font: normal 14px "BrandonGrotesque-Medium"; } .msg-error a.close-me { display: none; } .msg-error { margin-bottom: 20px; } div.rating-error a { color: #C22B34; text-decoration: underline } span.currentContentRating { font: normal 24px "BrandonGrotesque-Medium"; color: #FC8C2A } span.currentContentRating span { color: #856444 } span.currentContentTotalVotes { font: normal 12px "BrandonGrotesque-Medium"; } /* Editorial Entries */ #promoWrapper .singlePromo.editorialPromo .promoText { padding-top: 20px; } #mainContent #contentCol.editorialArchive h2 { margin-bottom: 20px; text-transform: uppercase } #mainContent #contentCol.editorialArchive .entryShare { margin-bottom: 25px; } #mainContent #contentCol.editorialArchive #comments { margin-top: 40px; width: 462px; } #mainContent #contentCol.editorialArchive .gallery, #mainContent #contentCol.editorialArchive .galleryHeader { margin-left: -29px !important; } /* Comments Styling */ /*#comments-open { margin-top: 20px; }*/ #comments { width: 100%; } #comments-open-text label { color: #856444; } #comment-text { border: 1px solid #ddd; width: 98%; padding: 5px; margin: 20px 0px; border-radius: 3px; -moz-border-radius: 3px; } .asset-meta { float: left; width: 380px; font-size: 12px; margin-left: 20px; } .asset-meta .author { font-weight: bold; color: #FC8C2A; font-size: 14px } .asset-meta .published { border: none; color: #999; } .asset-meta .comment-reply a { padding-right: 20px; background: url('//mymoleskine.moleskine.com/community/img/reply_comment_black.png') no-repeat top right; color: #333; } .comment { margin-bottom: 15px; } .comments-content a { text-decoration: none; color: #FC8C2A; } .comment-content { width: 360px; float: right; background: #f4f4f4; padding: 10px 10px 5px 10px; margin: 7px 0px 10px 0px; moz-border-radius: 3px; border-radius: 3px; } .comment-content a { color: #333; } /* Fix for report links */ .comment-content p { overflow: hidden; line-height: 19px; font-size: 14px; margin-bottom: 10px; } .user-pic { margin-bottom: 0px; float: left; } .user-pic img { border: 1px solid #ddd; margin: 5px 0px 0px 0px; padding: 4px; } .user-pic img:hover { border: 1px solid #ccc; } #commentPosting { background: #f4f4f4; padding: 5px; border-radius:3px; margin:10px 0px;display: block; float: left;width: 100%; } /* Submit Your Creativity - Tabs */ .tabs-nav { list-style: none; margin: 30px 0px 0px 0px; padding: 0px; border-bottom: 2px solid #F85B0A } .tabs-hide { display: none; } /* Hide useless elements in print layouts... */ @media print { .tabs-nav { display: none; } } /* clearing without presentational markup, IE gets extra treatment */ .tabs-nav:after, .tabs-nav li:after { display: block; clear: both; content: " "; } .tabs-nav li { float: left; margin: 0px; margin-right: 1px; height: 38px; } .tabs-nav a, .tabs-nav a span { display: block; padding: 5px 20px; font: normal 14px "BrandonGrotesque-Medium"; text-transform: uppercase; color: #37392b } .tabs-nav a { position: relative; z-index: 2; padding-left: 0; color: #333; line-height: 1.2; text-align: center; text-decoration: none; white-space: nowrap; height: 15px; } .tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span { color: #F85B0A; border-bottom: 4px solid #F85B0A; } p[id^="login_message"] { margin: 20px 0px; font-size: 14px; background: url(//mymoleskine.moleskine.com/community/img/icon_error.png) no-repeat left; padding: 5px 35px; color: #C22B34; } p[id^="login_message"] a { color: #C22B34; text-decoration: underline } .creativityForm { float: left; } .creativityForm p, .creativityForm div.field-header { float: left; width: 100%; } .creativityForm em, .creativityForm p.characterLimit, p.characterLimit { font: normal 14px "BrandonGrotesque-RegularItalic"; color: #856444 } span#countdown { color: #FC8C2A } .creativityForm div.field-header label { font: normal 14px "BrandonGrotesque-Medium"; text-transform: uppercase; color: #37392b } .creativityForm div.field-content { padding: 8px 0px 15px 0px; float: left; width: 100%; } .creativityDescription { padding: 10px 0px 30px 0px; font-size: 14px; line-height: 22px; } .creativityForm select { float:left; -webkit-appearance: none; -moz-appearance:none; cursor:pointer; padding:10px; width:421px; height:40px; background: url(//mymoleskine.moleskine.com/community/img/bg_select_box_large.png) no-repeat top left; border:none; font: normal 14px "BrandonGrotesque-Medium"; outline:none; } .creativityForm .field-content input.ti, .creativityForm .field-content textarea.ta { border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; padding: 10px; width: 401px; float:left; font: normal 14px "BrandonGrotesque-Medium"; } .creativityForm #artworks-submit, .creativityForm #videos-submit, .creativityForm #hacks-submit { float: left; text-transform: uppercase; margin-top: 15px; } { margin-top: 15px; } .videoPreview { float: left; position: relative; padding: 10px; margin: 10px 0px 20px 0px; background: #f4f4f4; line-height: 18px; width: 95%; display: none } .videoPreview #videoTitle, .videoPreview #videoTitle a:link, .videoPreview #videoTitle a:visited { font: normal 16px "BrandonGrotesque-Medium"; color: #C22B34; padding-right: 10px; } #videoPreviewImage { float: left; margin-right: 10px; width: 200px; background: #efefef; padding: 3px; border: 1px solid #ccc; } .videoPreview #videoClose { float: right; margin-right: 0px; } #videoPreviewLoading { padding: 15px 0px; text-align: center; display: none } .creativityForm #hacks-preview { background: #959595; border: 1px solid #777; cursor: pointer; border-radius: 3px; color: #fff; font: 12px "BrandonGrotesque-Medium"; margin: 15px 10px 8px 0px; padding: 10px 15px; float: left; text-transform: uppercase } /* IE Tab Fixes */ .tabs-nav { /* auto clear */ *display: inline-block; } .tabs-nav .tabs-disabled { *position: relative; /* fixes opacity */ *filter: alpha(opacity=40); } .tabs-nav .tabs-disabled a span { _height: 19px; /* for some reason the height is 1px to less with opacity... */ *min-height: 19px; /* ...in both IE 6 and 7 */ } /* Social page */ .twitterBox { margin: 15px 0px; padding: 0; } .twitterBox li { list-style: none; width: 48%; border-bottom: 1px dotted #ccc; display: inline; float: left; height:90px; padding: 15px 0px; } .twitterBox li.odd { border-right: 1px dotted #ccc; } .twitterBox li.even { padding-left: 20px; } .twitterBox li img { float: left; margin: 5px 0px 0px 0px; } .twitterBox li a:hover { color: #fc8c2a; text-decoration: underline } .twitterContent { float: left; width: 290px; margin: 0px 0px 0px 10px; padding: 0; } .twitterContent p { line-height:19px; margin-top:0; padding: 0px 10px 0px 10px; } .feedTable { margin: 10px 0px; } .feedTableList li { list-style: none; color: #fc8c2a; font-size: 14px; padding: 5px 0px; } .feedTableList a:hover { text-decoration: underline; color: #fc8c2a; } .feedTableList li.twitterItem, .feedTableList li.flickrItem, .feedTableList li.tumblrItem { line-height: 18px; min-height: 55px; display: block; } .feedTableList li .flickrPhoto { border: 1px solid #ccc; float: left; display: block; margin-right: 6px; padding: 2px; background: #ddd; } .feedTableList li .flickrPhoto { width: 48px; height: 48px; } .feedTableList li table { width: 470px; } .feedTableList li table td img { max-width: 120px; } .flickrPhotoContainer { float: left; width: 157px; height: 140px; text-align: left; margin: 8px 0px 8px 8px; } .flickrPhotoContainer a.itemLink { font: normal 16px "BrandonGrotesque-Medium"; color: #37392b } .flickrPhotoContainer a.itemLink:hover { color: #fc8c2a; text-decoration: underline; } .flickrPhotoContainer span.authorItem { color: #fc8c2a; font-weight: bold; } .flickrPhotoImage { cursor: pointer; width: 140px; height: 80px; border: 4px solid #ccc; margin: 0px auto 8px auto; } .feedTableList li.tumblrItem { list-style: none; width: 48%; border-bottom: 1px dotted #ccc; display: inline; float: left; height:90px; padding: 15px 0px; } .feedTableList li.tumblrItem.odd { border-right: 1px dotted #ccc; } .feedTableList li.tumblrItem.even { padding-left: 20px; } .feedTableList li.tumblrItem span.tumblrDate { display: block; float: left; margin-top: 6px; } /* Templates page */ .galleryTemplates { width: 730px; padding: 0px 120px 7px 0px; margin-left: -29px; background: url(//mymoleskine.moleskine.com/community/img/elastic_band.png) no-repeat bottom center; padding-bottom: 8px; border-top: 2px solid #F85B0A } .galleryTemplatesItem { float: left; width: 242px; height: 395px; margin-right: 1px; margin-bottom: 1px; } .galleryTemplatesItem img { width: 100px; } .galleryTemplatesItem .textHolder { padding: 0px 10px 10px 10px; color: #fff; } .galleryTemplatesItem .textHolder h3, .galleryTemplatesItem .textHolder h3 a { color: #fff !important; font: normal 20px "BrandonGrotesque-Medium" !important; } .galleryTemplatesItem .textHolder a.callToActionLink {font: normal 12px "BrandonGrotesque-Medium"; text-transform: uppercase; color: #fff; margin-top: 5px; float: left; background: none; padding-right: 0; } .galleryTemplatesItem .textHolder a.callToActionLink:hover { text-decoration: underline } .galleryTemplates div:last-child { margin-right: 0; } .galleryTemplatesItemImageHolder { width: 242px; height: 280px; } .galleryTemplateModal { width: 700px; height: 500px; overflow-x: hidden; overflow-y: auto; padding: 20px; background: url(//mymoleskine.moleskine.com/community/img/bg_paper_texture.jpg) } .msk_templates { width: 100%; } .msk_templates th { font-weight: bold; font-size: 16px; color: #575a44; text-align: left; border-bottom: 2px dotted #ccc; padding: 25px 5px 5px 0px; } .msk_templates td { border-bottom: 1px solid #ddd; font-size: 14px; padding: 7px 5px 9px 5px; line-height: 17px; } .msk_templates td.template { background: url(//mymoleskine.moleskine.com/community/img/msk_icon.gif) no-repeat left; padding: 5px 5px 7px 30px; color: #856444 } .msk_templates td a { text-decoration: none; color: #856444; font-size: 12px; background: url(//mymoleskine.moleskine.com/community/img/arrow_orange.png) no-repeat right; padding: 0px 12px; text-transform: uppercase } .languageSwitcher { float: left; clear: both; width: 100%; margin: 15px 0px 40px 0px; } .languageSwitcher ul li { list-style: none; float: left; margin-right: 10px; } .languageSwitcher ul li img { opacity: 0.7; padding-bottom: 3px; } .languageSwitcher ul li img.currentLanguage, .languageSwitcher ul li img:hover { opacity: 1; border-bottom: 3px solid #F85B0A } /* CGI Forms */ div.field-header label { font: normal 14px "BrandonGrotesque-Medium"; text-transform: uppercase; color: #37392b } div.field-header label span { font-weight: bold; color: #FC8C2A } div.field-content { padding: 8px 0px 15px 0px; float: left; width: 100%; } #mainContent #contentCol.CGIContentColumn select, #mainContent #contentCol.categoryColumn select, .formContact select { float:left; -webkit-appearance: none; -moz-appearance:none; cursor:pointer; padding:10px; width:421px; height:40px; background: url(//mymoleskine.moleskine.com/community/img/bg_select_box_large.png) no-repeat top left; border:none; font: normal 14px "BrandonGrotesque-Medium"; outline:none; } .field-content input.ti, .field-content textarea.ta, .field-content input[type="password"] { border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; padding: 10px; width: 280px; float:left; font: normal 14px "BrandonGrotesque-Medium"; } button, input[type="submit"], a.butt { float: right; background: #FE8D04; border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #FE8D04; font: normal 12px "BrandonGrotesque-Medium"; color: #fff; padding: 10px 15px; cursor: pointer; float: left; text-transform: uppercase; margin: 15px 10px 8px 0px; } button:disabled, input[type="submit"]:disabled { opacity: 0.5; } button:hover, input[type="submit"]:hover { background: #C33030; border: 1px solid #A6292A; } .twoColumnTable { width: 730px; margin: 30px 0px; } #privacy_content, #termsofuse_content, .privacy_content, .termsofuse_content { float: left; margin: 10px 0px; width: 98%; height: 200px; padding: 5px; background: #f4f4f4; display: none; overflow: auto; border-radius: 3px; border: 1px solid #ddd; } span.usernameCheck { display: block; float: left; margin: 12px 0px 0px 60px; } span#usernameLoading { font: normal 13px "BrandonGrotesque-LightItalic"; color: #575a44; display: none; } span#usernameLoading img { margin-right: 5px; } span.username_available { font-weight: bold; color: #393; } span.username_not_available { font-weight: bold; color: #c00; } /* Profile view */ #profile_personal_data_container div.user-pic { float: left; width: 110px; height: 110px; margin-right: 10px; } span.isAuthor { display: block; clear: both; font: normal 13px "BrandonGrotesque-Medium"; color: #FF5F0A; } span.authorPersonalData { font: normal 14px "BrandonGrotesque-RegularItalic"; color: #856444; } span.authorPersonalDescription { display: block; margin-bottom: 10px; } #profile_personal_data_container { padding-bottom: 20px; margin-bottom: 30px; border-bottom: 1px solid #ccc; } #profile_personal_data { float: left; width: 500px; } #mainContent #contentCol.CGIContentColumn #profile_personal_data a.facebook_link, #mainContent #contentCol.CGIContentColumn #profile_personal_data a.twitter_link, #mainContent #contentCol.CGIContentColumn #profile_personal_data a.website_link, .authorData a.facebook_link, .authorData a.twitter_link, .authorData a.website_link { float: left; clear: both; display: block; background: url(//mymoleskine.moleskine.com/community/img/profile_social_sprite.png) no-repeat; padding: 6px 35px; font: normal 14px "BrandonGrotesque-Regular"; color: #694f36; } #mainContent #contentCol.CGIContentColumn #profile_personal_data a.facebook_link:hover, #mainContent #contentCol.CGIContentColumn #profile_personal_data a.twitter_link:hover, #mainContent #contentCol.CGIContentColumn #profile_personal_data a.website_link:hover { color: #fc8c2a } #mainContent #contentCol.CGIContentColumn #profile_personal_data a.facebook_link, .authorData a.facebook_link { background-position: bottom left; } #mainContent #contentCol.CGIContentColumn #profile_personal_data a.twitter_link, .authorData a.twitter_link { background-position: center left; } #mainContent #contentCol.CGIContentColumn #profile_personal_data a.website_link, .authorData a.website_link { background-position: top left; } #mainContent #contentCol.CGIContentColumn .profile_box { margin-bottom: 30px; } #mainContent #contentCol.CGIContentColumn .profile_box h3 { font: normal 20px "BrandonGrotesque-Medium"; color: #575a44; border-bottom: 1px solid #ddd; margin-bottom: 10px; } ul.recent-actions { list-style: none; padding: 0px; margin: 0px; } ul.recent-actions li { margin-bottom: 0px; padding: 6px 0px; border-bottom: 1px dotted #ccc; color: #FC8C2A } #mainContent #contentCol.CGIContentColumn ul.recent-actions li a { font: normal 16px "BrandonGrotesque-Regular"; color: #856444; } #mainContent #contentCol.CGIContentColumn ul.recent-actions li a:hover { color: #FC8C2A } ul.recent-actions li.icon-comment { background: url(//mymoleskine.moleskine.com/community/img/profile_actions_sprite.png) no-repeat left -67px; padding-left: 25px; } ul.recent-actions li.icon-entry { background: url(//mymoleskine.moleskine.com/community/img/profile_actions_sprite.png) no-repeat left 1px; padding-left: 25px; } ul.recent-actions li.icon-msk { background: url(//mymoleskine.moleskine.com/community/img/profile_actions_sprite.png) no-repeat left -37px; padding: 5px 0px 5px 30px; } ul.recent-actions li a { color: #900; } #mymoleskine { padding:15px 10px 10px 1px; } #catalogue_entries #mymoleskine { padding-top: 0px; } #mymoleskine .customItem {margin:6px 10px 6px 0; float:left; width: 135px; height: 135px; } #mymoleskine .customImg {width:130px; height:130px;} #mymoleskine .customItemTit {width:135px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src=//mymoleskine.moleskine.com/community/img/bg_black_transparent.png); padding-top: 2px; padding-bottom: 2px; cursor: hand;} #mymoleskine[id] .customItemTit {background:url(//mymoleskine.moleskine.com/community/img/bg_black_transparent.png);} #mymoleskine .customItem .customImg a {display:block; height:100px;} #mainContent #contentCol.CGIContentColumn .profile_box #mymoleskine .customItem h3 {color:#fff; margin:0; padding:3px;font: normal 11px verdana; line-height: 16px;} #mymoleskine p.tutti {padding-top: 15px;} /* Profile edit */ #customfield_gender-field { float: left; width: 300px; } #customfield_profile-field { clear: both; } ul.custom-field-radio-list { float: left; } ul.custom-field-radio-list li { list-style: none; } .textarea-wrapper p.characterLimit { float: left; clear: both; margin-top: 10px; } .hint { display: inline; } .privacyWarning { background: #f4f4f4 url(//mymoleskine.moleskine.com/community/img/icon_error.png) no-repeat 10px center; padding: 10px 10px 10px 50px; float: left; margin-bottom: 20px; border-radius: 6px; } .msg-alert { background: #f3f7f9; padding: 10px; clear:both; margin-bottom: 15px; border-radius: 6px } /* Dealers Area */ .protectedContentWarning { font-size: 14px; } .protectedContentWarning a { color: #fc8c2a; } .dealersLandingColumn { float: left; margin-top: 40px; padding-right: 50px; width: 290px; } .dealersLandingColumn.right { float: left; padding-left: 50px; padding-right: 0; border-left: 1px dotted #ccc; } .dealersLandingColumn p { margin: 20px 0px; } a.callToActionLink { font: normal 14px "BrandonGrotesque-Medium"; color: #856444; background: url(//mymoleskine.moleskine.com/community/img/arrow_orange.png) no-repeat right; padding-right: 12px; } a.callToActionLink:hover { color: #fc8c2a; } .dealersLoginBox { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 25px 0px; padding: 20px 0px; } #flashcontent { width: 508px; height: 257px; float: left; margin-top: 25px; } #myMoleskineLoginForm { float: left; margin: 30px 0px 20px 0px; } #myMoleskineLoginForm a { font-weight: bold; color: #fc8c2a; } .myMoleskineLoginFormIntro { font: normal 16px "BrandonGrotesque-Medium"; color: #37392b; padding-bottom: 10px; margin-bottom: 15px; border-bottom: 2px solid #F85B0A; } #permissionChecking { font: normal 14px "BrandonGrotesque-RegularItalic"; color: #856444; display: block; margin: 15px 0px; } #permissionChecking img { margin-right: 5px; } /* Category Entry Content */ .categoryEntryContent h3 { margin-bottom: 5px; } .categoryEntryContent p { margin: 10px 0px; line-height: 19px; } .categoryEntryContent table { margin: 10px 0px; } .categoryEntryContent table td a { color: #fc8c2a; } .categoryEntryContent table td a:hover { text-decoration: underline } .categoryEntryContent hr { width: 100%; border:none; height: 1px; border-bottom: 1px solid #ccc; margin: 30px 0px; } /* Form Contact */ .formContact { margin-top: 20px; } .formContact td { padding: 8px 0px; } .formContact h3 { margin-bottom: 10px; } .formContact label { text-transform: uppercase; float: left; width: 100%; font: normal 16px "BrandonGrotesque-Medium"; color: #37392B } .formContact label span { color: #fc8c2a; } .formContact input[type="text"], .formContact textarea { border: 1px solid #ccc; border-radius: 3px; -moz-border-radius: 3px; padding: 10px; width: 400px; float:left; font: normal 14px "BrandonGrotesque-Medium"; } .formContact textarea { height: 150px; } .formContact input[type="submit"], .formContact button { float: left; margin: 10px 0px; background: #FE8D04; border-radius: 3px; -moz-border-radius: 3px; border: 1px solid #FE8D04; font: normal 12px "BrandonGrotesque-Medium"; color: #fff; padding: 10px; cursor: pointer; text-transform: uppercase; } .formContact input[type="submit"]:hover { background: #C33030; border: 1px solid #A6292A; } .formContact input[type="submit"]:disabled, .formContact button:disabled { opacity: 0.5; } .formContact select.dateDaySelect, .formContact select.dateMonthSelect, .formContact select.dateYearSelect { float:left; -webkit-appearance: none; -moz-appearance:none; cursor:pointer; padding:10px; height:40px; background: url(//mymoleskine.moleskine.com/community/img/bg_select_date.png); border:none; font: normal 14px "BrandonGrotesque-Medium"; outline:none; } .formContact select.dateDaySelect, .formContact select.dateMonthSelect { width:70px; background-position: left center; } .formContact select.dateYearSelect { width: 100px; background-position: right center; } .formContact span.radioGroup { display: block; float: left; width: 100%; margin: 10px 0px; } /* Footer */ #preFooterWrapper { background: url(//mymoleskine.moleskine.com/community/img/bg_paper_texture.jpg); width: 100%; float: left; clear:both; padding-bottom: 40px; } #preFooter { background: url(//mymoleskine.moleskine.com/community/img/bg_pre_footer.jpg) no-repeat center; height: 10px; margin: 0px auto; width: 100%; } #footerWrapper { width: 100%; background: #000 url(//mymoleskine.moleskine.com/community/img/bg_footer.jpg) } #footer { width: 972px; margin: 0px auto; position: relative; } #footer img.logo { float: left; margin-top: 25px; } #footer .mainNav { float: left; margin: 25px 0px 0px 55px; } #footer .mainNav ul li { list-style: none; display: inline; float: left; margin-right: 30px; } #footer .mainNav ul li a { font: normal 16px "BrandonGrotesque-Bold"; color: #B0B0AE; } #footer .bottomNav { float: left; clear: both; margin: 20px 0px; } #footer .bottomNav ul li { list-style: none; display: inline; float: left; margin-right: 50px; } #footer .bottomNav ul li a { font: normal 14px "BrandonGrotesque-Bold"; color: #93806F; } #footer .bottomNav ul li:last-child { margin-right: 0; } #footer .serviceNav { float: left; clear: both; margin: 15px 0px 0px 0px; } #footer .serviceNav ul li { list-style: none; display: inline; float: left; margin-right: 15px; } #footer .serviceNav ul li a { font: normal 12px "BrandonGrotesque-MediumItalic"; color: #93806F; } #footer .mainNav ul li a:hover, #footer .bottomNav ul li a:hover, #footer .serviceNav ul li a:hover { color: #fc8c2a; } .footerBottom { float: left; clear: both; width: 100%; margin: 15px 0px; } .socialLeft { float: left; width: 60%; } .socialRight { float: right; width: 40%; font: normal 12px "BrandonGrotesque-MediumItalic"; color: #93806F; text-align: right; margin-top: -18px; } /* Modal Windows */ body.modalWindow { background: url(//mymoleskine.moleskine.com/community/img/bg_paper_texture.jpg); width: 100%; } .modalContainer { float: left; clear: both; padding: 30px 80px; font-size: 14px; } .modalContainer h3 { font: normal 36px "BrandonGrotesque-Thin"; margin: 20px 0px; letter-spacing: -0.5px; line-height: 40px; text-transform: uppercase; color: #000; } .modalContainer h4 { font: normal 18px "BrandonGrotesque-Medium"; color: #575a44; text-transform: uppercase } .modalContainer h5 { font: normal 16px "BrandonGrotesque-Medium"; color: #856444 } #category { background: url(//mymoleskine.moleskine.com/community/img/icon_step1.png) no-repeat left 10px; padding: 5px 0px 15px 45px; width: 420px; border-bottom: 1px dotted #ddd; } #questions { background: url(//mymoleskine.moleskine.com/community/img/icon_step2.png) no-repeat left; padding: 5px 0px 5px 45px } #answer { background: none repeat scroll 0 0 #F4F4F4; border: 1px solid #DDDDDD; border-radius: 4px 4px 4px 4px; display: block; padding: 15px; width: 385px; margin-left: 45px; position:relative; overflow: hidden; } #answer a:link, #answer a:visited {text-decoration: underline;} #answer:before { content:"."; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); rotation: -45deg; -ms-transform: rotate(-45deg); background: #f4f4f4; border-right: 1px solid #ccc; border-top: 1px solid #ddd; display: block; height: 10px; left: 40px; position: absolute; top: -6px; width: 10px; z-index: 9999; text-indent: -9999px; } .formContact.contactUsForm input[type="text"], .formContact.contactUsForm textarea { width: 445px } .formContact.newsletterForm label, .formContact.brandTermsForm label, .formContact.distributorsContactForm label { margin-top: 15px; } .countrySelectorTitle { font: normal 16px "BrandonGrotesque-Bold"; color: #575A44; text-transform: uppercase; } .languagesSelectorContainer { float: left; clear: both; margin: 30px 0px; width: 580px; overflow: hidden; } .languagesSelectorContainer h6 { font: normal 14px "BrandonGrotesque-Bold"; text-transform: uppercase; border-bottom: 1px solid #ccc; padding-bottom: 8px; margin: 10px 0px; } .languagesSelectorContainer ul { width: 750px; } .languagesSelectorContainer ul li { list-style: none; display: inline-block; margin-right: 10px; width: 115px; margin-bottom: 20px; position: relative; } .languagesSelectorContainer ul li img { margin-right: 7px; vertical-align: middle; } .languagesSelectorContainer ul li a { font: normal 10px "BrandonGrotesque-Regular"; color: #856444; background: url(//mymoleskine.moleskine.com/community/img/arrow_orange.png) no-repeat right; padding-right: 12px; } .languagesSelectorContainer ul li a:hover { color: #fc8c2a } /* 404 Page */ #mainContent #contentCol404 .error404Links h2 { text-transform: uppercase; margin-bottom: 15px; font: normal 24px 'BrandonGrotesque-Bold'; color: #575A44 } .error404Links { float: left; clear: both; margin: 20px 0px; } .error404Links hr { margin: 25px 0px; display: block; height: 1px; border: 0; border-top: 1px solid #CCC; padding: 0; float: left; width: 100%; } .error404Links ul { float: left; width: 224px; margin-right: 10px; } .error404Links ul li { list-style: none; line-height: 2em } .error404Links ul li a { color: #856444; text-decoration: none; font: normal 11px "BrandonGrotesque-Medium"; background: url(//mymoleskine.moleskine.com/community/img/arrow_orange.png) no-repeat right; padding-right: 12px; text-transform: uppercase } .error404Links ul li a:hover { color: #fc8c2a; text-decoration: none; } .error404Links ul li.linksHeading { padding-bottom: 15px; font: 14px 'BrandonGrotesque-Bold'; color: #575A44 } /* IPO */ .exitButton { float: left; margin: 10px 0px 8px 10px; background: #f1f1f1; border-radius: 3px; border: 1px solid #ccc; font: normal 12px "BrandonGrotesque-Medium"; color: #000; padding: 10px 15px; cursor: pointer } .exitButton:hover { background: #ccc; } .modalText a { color: #fc8c2a; font-weight: bold; } /* Correlated Box */ #correlatedBoxContainer { float: left; clear: both; margin: 30px 0; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; width: 100% } #correlatedBoxContainer .correlatedBox { float: left; width: 30%; padding: 20px 20px 20px 0; text-align: center } #correlatedBoxContainer .correlatedBox h4 { font: normal 24px "BrandonGrotesque-Light"; text-transform: uppercase; color: #3739 } #correlatedBoxContainer .correlatedBox img.templateImage { border-radius: 10px; height: 100px; margin-bottom: 15px } .correlatedBox img{ margin: 10px 0 20px 0; } .correlatedBox a.submitButton { float: none; } /* Social Sign in */ #socialSignin { margin-top: 30px; } #socialSignin h4 { color: #333 !important; font-weight: 700 !important; } #socialSignin dl dd { float: left; padding-right: 15px; margin-left: 0 } /* Shared buttons edited - 26/05/2014 */ .fb_iframe_widget { float: left; margin-right: 10px; } .footerBottom .fb_iframe_widget { margin-top: 5px; } /* Cookie Disclaimer */ #disclaimer { background-color: #000; color: #fff; text-align: center; padding: 15px 50px; font-size: 18px; line-height: 32px; display: none; position: fixed; left: 0; top: 0; z-index: 9999; } #disclaimer a { color: #fc8c2a } #disclaimer a.close-link { font-size: 20px; color: #fff; text-decoration: underline; margin-left: 50px; } #disclaimer #closeDisclaimer { float: right; } /* Author a month */ #mainContent #contentCol.authorMonthColumn p { margin: 20px 0; } #mainContent #contentCol.authorMonthColumn .galleryHolder { margin: 25px 0 25px -29px; } .authorData .authorMonth, .authorData .authorName { float: left; width: auto; clear: left; margin-left: 29px; } .authorData .authorName { margin-bottom: 5px; } .authorIcons { display: block; float: right; margin-top: 15px; } .authorIcons a { clear: none !important; display: block; height: 29px; width: 31px; padding: 0 !important; text-indent: -9999px; float: left !important; } .galleryHolder.authorAMonth .galleryHeader img.galleryBadge { border: 2px solid #F85B0A; border-radius: 100%; position: absolute; left: 433px; bottom: -25px; margin: 0 !important; } .gallery.authorAMonth .galleryItem img.thumbnailImage { height: 243px !important; } .gallery.authorAMonth .galleryItem { height: 350px; } /* New Passion template page */ .templateLanguageSwitcher { clear: both; width: 100%; margin: 10px 0 } .templateLanguageSwitcher li { display: inline; float: left; margin-right: 5px; } .templateLanguageSwitcher li img { width: auto !important; } /* Paper 53 Page */ .paper53Column h3 { margin-top: 50px; } .paper53Column a.submitButton { margin-top: 55px; } .paper53Column h3 strong { font: normal 24px "BrandonGrotesque-Medium" } .paper53Column div.anchor_nav { text-transform: uppercase; margin-bottom: 0; } .paper53Column div.anchor_nav p { font-size: 12px !important } .paper53ThreeBoxes { float: left; width: 32.8%; margin-right: 5px; } .paper53ThreeBoxes img { border-top: 1px solid #FB5C26; border-bottom: 2px solid #FB5C26; width: 100%; height: 166px; margin: 0 0 15px 0; } .paper53ThreeBoxes h6 { font: normal 14px "BrandonGrotesque-Medium"; margin-bottom: 7px; } .paper53ImageList, .paper53NumberList { margin: 20px 0; } .paper53ImageList li { list-style: none; display: block; width: 100%; padding-bottom: 20px; } .paper53ImageList li img { float: left; border-top: 1px solid #FB5C26; border-bottom: 2px solid #FB5C26; margin-right: 20px; } .paper53ImageList li h5 { font: normal 16px "BrandonGrotesque-Medium"; margin-bottom: 7px; } .paper53NumberList { border-bottom: 1px solid #ccc; margin-bottom: 20px; } .paper53NumberList li { list-style: none; padding-bottom: 20px; } .paper53NumberList li:last-child { padding-bottom: 40px; } .paper53NumberList li img { float: left; } .paper53NumberList li p { margin-left: 70px } /* Evernote */ .appsEvernoteWrapper .singlePromo .promoText h3, .appsEvernoteWrapper .singlePromo .promoText h3 a { font: bold 20px "BrandonGrotesque-Light" !important; color: #FFFFFF !important; } .evernoteColumn h3 { margin-top: 50px; } .evernoteColumn a.submitButton { margin-top: 10px; background: #6dbb3d; border-color: #6dbb3d; margin-top: 10px; float: left; } .evernoteColumn h3 strong { font: normal 28px "BrandonGrotesque-Medium"; color:#82CF52; text-transform: capitalize; } .evernoteColumn h4 { font: normal 28px "BrandonGrotesque-Light" !important; color:#6D6E71 !important; text-transform: capitalize;} .evernoteColumn div.anchor_nav { text-transform: uppercase; margin-bottom: 0; } .evernoteColumn div.anchor_nav p { font-size: 12px !important; color:#599F2E; } .evernoteColumn p.appDescription { margin: 30px 0px 30px 0px; width: 100%; } .evernoteColumn p.appDescription strong { color:#599F2E; } .evernoteThreeBoxes { float: left; width: 32.8%; margin-right: 5px; } .evernoteThreeBoxes img { border-top: 1px solid #FB5C26; border-bottom: 2px solid #FB5C26; width: 100%; height: 166px; margin: 0 0 15px 0; } .evernoteThreeBoxes h6 { font: normal 14px "BrandonGrotesque-Medium"; margin-bottom: 7px; } .evernoteImageList, .evernoteNumberList { margin: 20px 0; } .evernoteImageList li { list-style: none; display: block; width: 100%; padding-bottom: 20px; } .evernoteImageList li img { float: left; /*border-top: 1px solid #FB5C26; border-bottom: 2px solid #FB5C26;*/ margin-right: 20px; } .evernoteImageList li img.right { float: right; /*border-top: 1px solid #FB5C26; border-bottom: 2px solid #FB5C26;*/ margin-left: 20px; } .evernoteImageList li h5 { font: normal 18px "BrandonGrotesque-Light"; margin-bottom: 7px; color:#575A44;} .evernoteImageList li p strong { color:#599F2E; } .evernoteImageList li p.special {margin-top:15px; font: normal 18px "BrandonGrotesque-Medium" !important; color:#599F2E; line-height: 18px !important;} .evernoteImageList li p.special span { font-size:16px; line-height: 16px !important; } .evernoteNumberList { border-bottom: 1px solid #ccc; margin-bottom: 20px; } .evernoteNumberList li { list-style: none; padding-bottom: 20px; } .evernoteNumberList li:last-child { padding-bottom: 40px; } .evernoteNumberList li img { float: left; } .evernoteNumberList li p { margin-left: 70px } /* Responsive styles */ /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 767px) { body.modalWindow { display: block; } .modalContainer { width: 90%; padding: 5%; } #mainContent #contentCol.CGIContentColumn select, #mainContent #contentCol.categoryColumn select, .formContact select { float: left; background: #fff url(http://mymoleskine.moleskine.com/community/img/select_arrows.png) no-repeat 98% 50%; background-size: 12px 15px; -webkit-appearance: none; -moz-appearance: none; border: 1px solid #ddd; padding: 4px; border-radius: 3px; width: 96%; cursor: pointer; } .formContact.contactUsForm input[type="text"], .formContact.contactUsForm textarea { width: 88%; } .galleryHeader .submitButton, .submitButton, .creativityForm #artworks-submit, .creativityForm #videos-submit, .creativityForm #hacks-submit, input[type="submit"] { margin-left: 0 !important; margin-top: 20px; -webkit-appearance: none; } #answer { width: 190px; text-overflow: ellipsis; } #answer ul { margin: 15px; } #categoria, #subcategoriaSelect { width: 220px; padding-right: 22px; } #category { width: auto; } }