/* Table of Contents ================================================== #Site Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ body { background: url(../images/pattern.jpg) repeat-x left 206px;} .alignRight { text-align: right; } .alignLeft { text-align: left; } /* #Slider __________________________________________________ */ #headspace { padding-top: 60px;} #swipe { position: relative;} #prev { position: absolute; top: 240px; left: 80px;} #next { position: absolute; top: 240px; left: 495px; } /* Title __________________________________________________ */ #titleDesc { text-align: right; margin-top: 130px;} #titleDesc p { font: 14px/16px Helvetica, Arial, sans-serif; color: #3e6497; padding-top: 10px; } /* Social Media Icons __________________________________________________ */ #socialMedia { text-align: center; } #socialMedia > div { display:inline-block; color: #fff; text-align: center; margin: 5px 3%; font-size: 12px; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,1);} #socialMedia > a { display: block;} #socialMedia > img:hover, #socialMedia > img:active { opacity: .8; } /* Projects __________________________________________________ */ #headerCurrent { margin: 50px 0 30px; height: 32px; background: url(../images/current.png) no-repeat bottom; } .currentProjects { } #headerPast { margin: 60px 0; height: 32px; background: url(../images/past.png) no-repeat bottom; } .pastProjects { text-align:center;} /* Full View of Projects ---------------------*/ #postargram-full, #ochocinco-full, #iroko-full, #uber50-full, #pfc-full, #ubercurrent-full, #wakeup-full, #ringtone-full, #qtweeter-full, #hop-full { display:none;} /* Overlay */ #simplemodal-overlay { background-color: rgba(0,0,0,.5);} /* Container */ #simplemodal-container { height:437px !important; width:838px !important; color:#666; background: url(../images/popup.png) no-repeat;} .simplemodal-wrap { margin: 15px 20px 20px; width:800px !important; height:395px !important;} #simplemodal-container .simplemodal-data { padding:50px 0 10px;} #simplemodal-container a { color: black;} #simplemodal-container a.modalCloseImg { background: url(../images/close.png) no-repeat; width:47px; height:47px; display:inline; z-index:3200; position:absolute; top:-10px; right:-5px; cursor:pointer} #simplemodal-container h3 { color:#84b8d9;} #simplemodal-container p { margin: 15px 0 20px 0; width: 370px; float: left; } .desc { margin-top: 50px !important; } .desc strong { font-size: 24px;} #simplemodal-container .image { width: 360px; height: 360px; text-align:center; float: left; margin: -30px 15px 0 30px; } .website { color: #666; font-weight: bold; } #postargram-full .image { background: url(../images/splashes/postargram.png) center no-repeat;} #ochocinco-full .image { background: url(../images/splashes/ochocinco.png) center no-repeat;} #iroko-full .image { background: url(../images/splashes/iroko_380.jpg) center no-repeat;} #uber50-full .image { background: url(../images/splashes/uber50.png) center no-repeat;} #pfc-full .image { background: url(../images/splashes/profootballcharacters.png) 0px 40px no-repeat;} #ubercurrent-full .image { background: url(../images/splashes/ubercurrent.png) center no-repeat;} #wakeup-full .image { background: url(../images/splashes/mywakeuptunes.png) center no-repeat;} #ringtone-full .image { background: url(../images/splashes/ringtoneepressions.png) center no-repeat;} #qtweeter-full .image { background: url(../images/splashes/qtweeter.png) center no-repeat;} #hop-full .image { background: url(../images/splashes/holdonplaya.png) center no-repeat;} /* #Media Queries ================================================== */ /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { body { background: url(../images/pattern.jpg) repeat-x left 157px; } #tunjiName { width: 220px;} .slideImg { width: 460px;} #prev { top: 240px; left: 30px;} #next { top: 240px; left: 475px; } #socialMedia > div {margin: 5px 7px;} .pastProjects img {width: 236px;} } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { #headspace { padding-top: 0px;} .slideImg { width: 420px;} #prev { top: 110px; left: -10px;} #next { top: 110px; left: 405px; } #titleDesc { text-align: center; margin-top: 0; } #titleDesc p { padding-top: 0;} #socialMedia { margin-top: 33px;} #socialMedia > div { margin: -5px 13px;} .currentProjects { text-align:center !important; margin-top: 0 !important;} } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { #simplemodal-overlay { background-color: rgba(0, 0, 0, 1); height: 100% !important;} #simplemodal-container { height:268px !important; width:480px !important; top: 0 !important; color:#666; background: url(../images/popup-480.png) no-repeat;} #simplemodal-container .image { width: 220px; height: 220px; text-align: center; float: left; margin: 0 10px 0 0; background-size: 100%; } #simplemodal-container .simplemodal-data { padding: 10px 0 10px; } #simplemodal-container a.modalCloseImg { top: 11px; right: 11px; } #simplemodal-container p { margin: 10px 0 0 ; width: 440px; float:none; } .desc { font-size: 12px; margin-top: 35px !important; } .desc strong { font-size: 16px; } .website { margin-top: 5px !important; float: left !important; font-size: 11px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { #headspace { padding-top: 40px;} .slideImg { width: 300px;} #prev { top: 105px; left: -10px;} #next { top: 105px; left: 289px; } #titleDesc { text-align: center; } #socialMedia { margin-top: 35px;} #socialMedia > div { margin: 0px 1px;} #headerPast { background-size: 300px; } #simplemodal-overlay { background-color: rgba(0, 0, 0, 1); height: 100% !important; } #simplemodal-container { height:415px !important; width:320px !important; top: 0 !important; color:#666; background: url(../images/popup-320.png) no-repeat;} #simplemodal-container a.modalCloseImg { top: 11px; right: 11px; } #simplemodal-container .image { width: 220px; height: 220px; text-align: center; float: none; margin: 0 10px 0 0; background-size: 100%; } #simplemodal-container .simplemodal-data { padding: 10px 0 10px; } #simplemodal-container p { margin: 10px 0 0 ; width: 280px; float:none; } .desc { font-size: 12px; margin-top: 5px !important; } .desc strong { font-size: 16px; display: block; } .desc br { display: none !important; } .website { margin-top: 5px !important; float: left !important; font-size: 11px; } } /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */