space: \20 nbsp: \a0 en space: \2002 em space: \2003 3 per em space: \2004 4 per em space: \2005 6 per em space: \2006 figure space: \2007 punctuation space: \2008 thin space: \2009 hair space: \200a zero width space: \200b narrow nbsp: \202f medium mathematical space: \205f zero width nbsp: \feff

table { border-spacing: 10px; border-collapse: separate; } ---------------------------------------------------------- #table2 { border-collapse: separate; border-spacing: 15px 50px; } ----------------------------------------------------------

@media print { a[href]:after { visibility: hidden; } }

@page { size: auto; margin: 0; }

@media all and (max-width: 480px) { } @media all and (min-width: 480px) and (max-width: 768px) { } @media all and (min-width: 768px) and (max-width: 1024px) { } @media all and (min-width: 1024px) { } /*------------------------------------------ Responsive Grid Media Queries - 1280, 1024, 768, 480 1280-1024 - desktop (default grid) 1024-768 - tablet landscape 768-480 - tablet 480-less - phone landscape & smaller --------------------------------------------*/ @media all and (min-width: 1024px) and (max-width: 1280px) { } @media all and (min-width: 768px) and (max-width: 1024px) { } @media all and (min-width: 480px) and (max-width: 768px) { } @media all and (max-width: 480px) { } /*------------------------------------------ Foundation Media Queries http://foundation.zurb.com/docs/media-queries.html --------------------------------------------*/ /* Small screens - MOBILE */ @media only screen { } /* Define mobile styles - Mobile First */ @media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ /* Medium screens - TABLET */ @media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */ /* Large screens - DESKTOP */ @media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1024px and max-width 1440px, use when QAing large screen-only issues */ /* XLarge screens */ @media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */ /* XXLarge screens */ @media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */ /*------------------------------------------*/ /* Portrait */ @media screen and (orientation:portrait) { /* Portrait styles here */ } /* Landscape */ @media screen and (orientation:landscape) { /* Landscape styles here */ } /* CSS for iPhone, iPad, and Retina Displays */ /* Non-Retina */ @media screen and (-webkit-max-device-pixel-ratio: 1) { } /* Retina */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { } /* iPhone Portrait */ @media screen and (max-device-width: 480px) and (orientation:portrait) { } /* iPhone Landscape */ @media screen and (max-device-width: 480px) and (orientation:landscape) { } /* iPad Portrait */ @media screen and (min-device-width: 481px) and (orientation:portrait) { } /* iPad Landscape */ @media screen and (min-device-width: 481px) and (orientation:landscape) { } <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /> /*------------------------------------------ Live demo samples - http://andrelion.github.io/mediaquery/livedemo.html --------------------------------------------*/

@media (max-width: 767px) { #inner-coffee-machine > div > img { width: 30%; height: 18%; } #inner-coffee-machine > div > div h3 { font-size: 2.5vh; font-weight: bold; } #inner-coffee-machine > div > div h5 { font-size: 2vh; } #club-inner { display: inline-table; } #inner-coffee-machine > div > div { width: 100%; } } @media (min-width: 768px) and (max-width: 991px) { } @media (min-width: 992px) and (max-width: 1199px) { } @media (min-width: 1200px) { }

@font-face { font-family: nespresso; src: url("../fonts/nespresso.otf") format("opentype"), url("../fonts/nespresso.ttf") format("truetype"); } @font-face { font-family: 'yekan'; src: url(../fonts/yekan.eot) format("eot"), url(../fonts/yekan.woff) format("woff"), url(../fonts/yekan.ttf) format("truetype"); }

IE-6 ONLY * html #div { height: 300px; } ---------------------------------------------------------------------------- IE-7 ONLY *+html #div { height: 300px; } ---------------------------------------------------------------------------- IE-8 ONLY #div { height: 300px\0/; } ---------------------------------------------------------------------------- IE-7 & IE-8 #div { height: 300px\9; } ---------------------------------------------------------------------------- NON IE-7 ONLY: #div { _height: 300px; } ---------------------------------------------------------------------------- Hide from IE 6 and LOWER: #div { height/**/: 300px; } ---------------------------------------------------------------------------- html > body #div { height: 300px; }

http://www.caritorsolutions.com/blog/162-how-to-use-font-awesome-icons http://astronautweb.co/snippet/font-awesome/

white-space: normal; The text will wrap. ------------------------------- If you want to prevent the text from wrapping, you can apply: white-space: nowrap; ------------------------------- If we want to force the browser to display line breaks and extra white space characters we can use: white-space: pre; ------------------------------- If you want white space and breaks, but you need the text to wrap instead of potentially break out of its parent container: white-space: pre-wrap; ------------------------------- white-space: pre-line; Will break lines where they break in code, but extra white space is still stripped.