body { margin:0; } div.clear { clear: both; } a { color: #003399; text-decoration: none; } img { border: 0 none; } /* Text Style */ .fifthteen { font-size:15px !important; line-height:26px !important; } .fourteen { font-size:14px !important; line-height:23px !important; } .thirteen { font-size:13px !important; line-height:19px !important; } .green { color:#93d211 !important; font-weight:bold; } .lato { font-family: 'Lato',Arial,Helvetica,sans-serif; font-weight:300; } .lato-bold { font-family: 'Lato',Arial,Helvetica,sans-serif; font-weight:700 !important; } .lato-normal { font-family: 'Lato',Arial,Helvetica,sans-serif; font-weight:500 !important; } .arial { font-family:Arial,Helvetica,sans-serif !important; font-weight: normal !important; } .georgia { font-family:Georgia, "Times New Roman", Times, serif !important; font-weight: normal !important; } #video-header { border: 1px solid #dfdfdf; border-bottom: 0 !important; width: 539px; /*background:url("http://images.inc.com/college_startups/2012/highlight-gray-bg.jpg") no-repeat scroll 245px 8px #F1F1F1;*/ padding: 10px 10px 6px 25px; font-family:Arial, Helvetica, sans-serif; margin-top: 14px; } #video-header h2{ font-size:30px; line-height:36px; margin:0 !important; } #video-header p { margin:5px 0; } #featuredvideos { position: relative; border: 1px solid #dfdfdf; border-top: 0 !important; width: 566px; /*background-color: #f1f1f1;*/ height: 210px; padding-left: 8px; padding-bottom: 10px; } /* root element for the scrollable. when scrolling occurs this element stays still. */ .scrollable { /* required settings */ position:relative; overflow:hidden; width: 306px; height:182px; margin-top: 7px; padding-left: -20px; } /* this makes it possible to add next button beside scrollable */ .scrollable { float:left; } /* prev, next, prevPage and nextPage buttons */ a.browse { background:url(http://www.inc.com/images/videoprevnext.png) no-repeat; display:block; width:18px; height:56px; float:left; margin:65px 0px; cursor:pointer; font-size:1px; } /* right */ a.right { background-position: 0 -56px; clear:right; margin-right: 0px;} a.right:hover { background-position:-18px -56px; } a.right:active { background-position:-36px -56px; } /* left */ a.left { margin-left: 0px; } a.left:hover { background-position:-18px 0; } a.left:active { background-position:-36px 0; } /* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accomodate scrollable items. it's enough that you set the width and height for the root element and not for this element. */ .scrollable .items { /* this cannot be too large */ width:20000em; position:absolute; clear:both; left: 20px; } .items div { float:left; } /* single scrollable item */ .scrollable .videothumb { float:left; margin: 10px; background-color:#fff; width:284px; height:160px; } #videotitle { position: absolute; left: 365px; top: 18px; color: #ca6b3f; font-size: 11px; font-family: arial; font-weight: bold; } #videodetails { position: absolute; left: 360px; top: 15px; } #videodetails .items div { position: absolute; top: 0px; left: 0px; width: 195px; display: none; color: #333; } #videodetails h3 { font-family: Arial,Helvetica,sans-serif; font-weight:bold !important; font-size: 18px !important; line-height:20px; color:#3369c2 !important; margin-top: 0px; margin-bottom: 5px; } #videodetails h3 a { text-decoration: none; color:#3369c2 !important; } #videodetails p { font-family:Arial, Helvetica, sans-serif font-size: 13px !important; line-height: 20px !important; margin: 0px !important; }