@charset "UTF-8"; /* CSS Document */ @import url("styles/animate.min.css"); /**{margin:0; padding:0; outline:none; border:none;list-style:none;}*/ html { height: 100%; margin-bottom: 1px; overflow-y:auto; } /* Force Vertical Scrollbar */ body{ background: #f4f4f4 url(images/backgrounds/body_bg.jpg) repeat-x 0 0; font-size:13px; line-height:1.5em; font-family:Arial, Helvetica, sans-serif; } /* #3 COLUMN ADAPTABLE based on: http://jsfiddle.net/chazthetic/qx32C/294/ ================================================== */ .container{ position: relative; width: 960px; margin: 0 auto; padding: 0; } /* WRAPPER STYLES */ .columns { display: inline-block; margin:10px; margin-top:0px; width:940px; font-family:Arial, Helvetica, sans-serif; font-size:12px; } /*.paneGroup {overflow:hidden;}*/ .paneGroup div { } /* SET COLUMNS */ .leftPane { width: 220px; float: left; } .contentPane { margin-left:230px; margin-right: 230px; } .rightPane { width: 220px; margin-left:10px; float: right; } /* ACCOMODATE EMPTY PANES */ .DNNEmptyPane{width:0; margin:0;} .paneGroup .leftPane.DNNEmptyPane + .contentPane{ margin-left:0; } .paneGroup .rightPane.DNNEmptyPane + .leftPane + .contentPane{ margin-right: 0; } .paneGroup .rightPane.DNNEmptyPane + .leftPane.DNNEmptyPane + .contentPane{ margin-left:0; margin-right: 0; } /*-------------- Login ---------------*/ #login{ padding:7px 0; } #login a{color:#ccc;} /*-------------- Main Banner ---------------*/ #mainBanner{ position:relative; padding-top:15px; z-index:1; } /*-------------- Site Search ---------------*/ #dnn_dnnSearch_ClassicSearch{ position:relative; float:right; margin:5px 0 10px 0; } #dnn_dnnSearch_ClassicSearch > span{ display: block; float: left; margin: 5px; } #dnn_dnnSearch_txtSearch{ float:right; width:100px; padding:6px 10px; padding-right:37px; /* Make room for submit button */ border:1px solid rgba(0,0,0,0.2); border-radius:3px; background:rgba(0,0,0,0.40); box-shadow:0px 1px 0px 0px rgba(255,255,255,1), inset 0px 0px 4px 0px rgba(0,0,0,0.15) ; color:#C9C9C9; font-size:12px; /* transition decleration */ transition: all ease-in 200ms; -moz-transition: all ease-in 200ms; /* Firefox 4 */ -webkit-transition: all ease-in 200ms; /* Safari and Chrome */ -o-transition: all ease-in 200ms; /* Opera */ -ms-transition: all ease-in 200ms; /* IE9? */ } #dnn_dnnSearch_txtSearch:active, #dnn_dnnSearch_txtSearch:focus{ width:163px; background:rgba(255,255,255,0.9); border:1px solid rgba(0,0,0,0.4); color:#444; } #dnn_dnnSearch_ClassicSearch a{ display: block; position:absolute; right:0; top:0; height:26px; width:30px; padding-bottom:0; border:none; box-shadow:none; webkit-box-shadow:none; overflow:hidden; text-indent:-99999px; background:transparent url(images/buttons/searchButton_bg.png) no-repeat 9px 9px; z-index:1; cursor:pointer; } /*-------------- Language Skin Object ---------------*/ .language-object { position:absolute; top:25px; left:0; } .language-object span { margin-right:2px; } /*-------------- Menu Bar ---------------*/ .menuBar{ height:52px; margin-bottom:15px; clear:both; background:url(images/backgrounds/nav_bg.png) repeat-x -1px -1px; box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,0.2), 0px 1px 0px 0px rgba(0,0,0,.7) ; border-radius:3px; border:1px solid #888; border-bottom:1px solid #666; border-right:1px solid #666; } /*-------------- Menu Bar: Logo ---------------*/ .menuBar h1{ float:left; background:url(images/backgrounds/nav_divider_bg.png) no-repeat right 11px; margin-top:0; margin-right:5px; } .menuBar h1 a { display:block; height:59px; width:154px; padding: 5px 10px; /*background:url(images/buttons/logo_h1_bg.png) no-repeat center 14px;*/ } .menuBar h1 a img{ display: block; max-width: 100%; } .menuBar h1 a span{display:none;} /*-------------- Menu Bar: Navigation ---------------*/ #mobilePnav{display:none;} .visHidden{position:absolute; left:-99999999px;} #dnn_pnav{ float:left; } #dnn_pnav li{ position:relative; list-style:none; } #dnn_pnav li ul {margin-left:0;} #dnn_pnav > li{ float:left; height:39px; padding-top:12px; margin-right:2px; } #dnn_pnav > li > a, #dnn_pnav > li > span { display:block; padding:5px 10px; font-size:13px; font-weight:bold; text-decoration:none; text-shadow:0px 1px #444; border:1px solid transparent; border-radius:3px; } #dnn_pnav > li:hover > a, #dnn_pnav > li.active > a{ border:1px solid rgba(0,0,0,0.10); background:rgba(0,0,0,0.25); color:#fff; text-shadow:0px 1px 1px #222; } #dnn_pnav > li:hover > a:active{ border:1px solid rgba(0,0,0,0.15); box-shadow:0px 1px 0px 0px rgba(255,255,255,0.15), inset 0px 0px 2px 0px rgba(0,0,0,0.105); background:rgba(0,0,0,0.35); } #dnn_pnav > li:hover > span{ color:#fff; text-shadow:0px 1px 1px #222; } /* Secondary level */ #dnn_pnav > li ul{ /* Styles for all sub levels */ display:none; position:absolute; width:225px; padding:15px 0; background:#e9e9e9; border:1px solid #bbb; border-top:1px solid #666; border-radius:3px; box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,1), 0px 0px 3px rgba(0,0,0,0.15); /* CSS3 */ -webkit-animation-duration: .25s; -webkit-animation-delay: .2s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-duration: .25s; -moz-animation-delay: .2s; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -ms-animation-duration: .25s; -ms-animation-delay: .2s; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; animation-duration: .25s; animation-delay: .2s; animation-timing-function: ease; animation-fill-mode: both; } #dnn_pnav li:hover > ul{ display:block;} #dnn_pnav > li > ul{ /* styles specific to secondary level */ top:47px; left:0; } #dnn_pnav > li > ul:after{ position:absolute; top:-7px; left:30px; content:''; width:0px; height:0px; border-left:7px solid transparent; /* left arrow slant */ border-right:7px solid transparent; /* right arrow slant */ border-bottom:7px solid #e9e9e9; /* bottom, add background color here */ font-size:0px; line-height:0px; } #dnn_pnav > li ul a{ display:block; padding:2px 15px; color:#666; text-decoration:none; /* transition decleration */ transition: all ease-in 100ms; -moz-transition: all ease-in 100ms; /* Firefox 4 */ -webkit-transition: all ease-in 100ms; /* Safari and Chrome */ -o-transition: all ease-in 100ms; /* Opera */ -ms-transition: all ease-in 100ms; /* IE9? */ border:1px solid transparent; } #dnn_pnav ul li:last-child > a{ padding-bottom:0;} #dnn_pnav > li > ul li:hover > a{ color:#111; background:#fff; } /* Tertiary level */ #dnn_pnav li ul li ul{ left:215px; top:-15px; border:1px solid #bbb; } /*-------------- Menu Bar: User Properties ---------------*/ .userProperties{ height:52px; margin-left:5px; padding-left:15px; padding-right:12px; max-width:260px; /* grow user information to a max of 260px */ float:right; background:url(images/backgrounds/nav_divider_bg.png) no-repeat left 11px; } .userProperties > ul{ float:right;} .userProperties > ul li{ list-style:none; position:relative; } .userProperties > ul > li, .userProperties > ul > li > span{ float:left; } .userProperties > ul > li img, .userProperties > ul > li > a{ width:auto; display:block; font-size:13px; font-weight:bold; color:#ddd; text-decoration:none; text-shadow:0px 1px #444; } .userName, .userRegister, .userLogin{ height:35px; padding-top:18px; } .userName{ max-width:190px; /* user name and arrow max width */} .userName > a, .userRegister > a, .userLogin > a{ display:inline-block; padding-right:15px; margin-right:10px; background:url(images/backgrounds/dropdownArrow.png) no-repeat right 7px; /* styles to handle long names */ width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .userRegister > a, .userLogin > a{ padding:0 0 0 9px; background:none; } .userName > a:hover, .userRegister > a:hover, .userLogin > a:hover{ color:#fff; } .userName > a.active{color:#fff;} .userProfile .userProfileImg{ border-radius:3px; overflow:hidden; margin-top:14px; display: inline-block; border:1px solid rgba(0,0,0,0.15); } .userProfile .userProfileImg img{ height:28px; width:28px; } .userProfile .userMessages{ position:relative; display:block; margin-top:16px; margin-left:15px; padding:0px 6px; border:1px solid rgba(0,0,0,0.7); border-radius:3px; font-size:10px; text-shadow:0px 1px #fff; box-shadow:0px 1px 0px 0px rgba(0,0,0,0.35), inset 0px 1px 0px 0px rgba(255,255,255,1); background: #f7f7f7; /* Old browsers */ background: -moz-linear-gradient(top, #f7f7f7 0%, #dee2e5 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#dee2e5)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f7f7f7 0%,#dee2e5 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f7f7f7 0%,#dee2e5 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f7f7f7 0%,#dee2e5 100%); /* IE10+ */ background: linear-gradient(to bottom, #f7f7f7 0%,#dee2e5 100%); /* W3C */ } .userProfile .userMessages:after{ content:''; position:absolute; left:-4px; top:5px; width:0px; height:0px; border-bottom:4px solid transparent; /* left arrow slant */ border-top:4px solid transparent; /* right arrow slant */ border-right:4px solid #f7f7f7; /* bottom, add background color here */ font-size:0px; line-height:0px; } /*-------------- User Controls Menu Drop Down ---------------*/ .userProperties ul.userMenu{ display:none; position:absolute; right:0; top:50px; width:185px; padding:15px 0; background:#efefef; border-radius:3px; border:1px solid #bbb; border-top:1px solid #666; border-radius:3px; box-shadow:inset 0px 1px 0px 0px rgba(255,255,255,1), 0px 0px 3px rgba(0,0,0,0.15); } .userProperties li.userNotifications, .userProperties li.userProfilename{ border-bottom:1px dotted #ccc; } .userProperties ul.userMenu:after{ position:absolute; top:-6px; right:50px; content:''; width:0px; height:0px; border-left:7px solid transparent; /* left arrow slant */ border-right:7px solid transparent; /* right arrow slant */ border-bottom:7px solid #e9e9e9; /* bottom, add background color here */ font-size:0px; line-height:0px; } .userProperties ul.userMenu a{ display:block; padding:2px 15px; color:#666; text-decoration:none; /* transition decleration */ transition: all ease-in 100ms; -moz-transition: all ease-in 100ms; /* Firefox 4 */ -webkit-transition: all ease-in 100ms; /* Safari and Chrome */ -o-transition: all ease-in 100ms; /* Opera */ -ms-transition: all ease-in 100ms; /* IE9? */ } .userProperties ul.userMenu a span{ padding:0px 4px; background:rgba(0,0,0,0.45); border-radius:3px; font-size:11px; font-weight:bold; color:#fff; text-shadow: 0px 1px 0px rgba(0,0,0,0.8); -webkit-box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 1); box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 1); } .userProperties ul.userMenu li:last-child > a{ padding-bottom:0;} .userProperties ul.userMenu li:hover > a{ color:#111; background:#fff; } /* ------- BreadCrumb ---------*/ #Breadcrumb { clear:both; margin: 10px 0 15px 5px; color:#777; } #Breadcrumb a{ font-size:13px; font-weight: normal; color:#777; text-decoration:none; } /* ------- Main Content ---------*/ #mainContent{ padding:15px 0; margin-bottom: 15px; background:#fff; border:1px solid #ccc; box-shadow:0px 0px 3px 0px rgba(0,0,0,0.15); border-radius:3px; } #dnn_contentPane{ width:100%; } /* ------- Main Footer ---------*/ #mainFooter{ padding-bottom:15px; color:#666; font-weight:normal; } #copyright .SkinObject{ font-size:11px; font-weight:normal; font-style:italic; color:#777; } /*-------------- Basic Container Styles ---------------*/ h2 .Head { display:block; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:16px; letter-spacing:-0.008em; margin-bottom:18px; padding-bottom:7px; color:#444; border-bottom:1px solid #ddd; } .DNNContainer_with_title h2 span{ line-height:18px; } /* ------- Media Queries ---------*/ /* #Tablet (Portrait) ------------------- */ /* Note: Design for a width of 768px */ @media only screen and (min-width: 768px) and (max-width: 959px) { .container { width: 748px; } /* WRAPPER STYLES */ .columns { width:726px; } /* SET COLUMNS */ .leftPane { width: 181px; } .contentPane { margin-left:191px; } .rightPane { width: 181px; } } /* #Mobile (Portrait) ------------------- */ /* Note: Design for a width of 320px */ @media only screen and (max-width: 767px) { .container { width: 280px; } /* WRAPPER STYLES */ .columns { width:260px;} /* SET COLUMNS */ .leftPane, .contentPane, .rightPane { width:260px; float:none; clear:both; margin-left:0; } #footer p { font-size: 15px; } #mainBanner{padding-top:0;} .searchSite{ margin:10px 0; width:100%;} #searchSiteInput{width:100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} /*-------------- Menu Bar ---------------*/ .menuBar{ width:100%; clear:both; display:inline-block; height:auto; margin-bottom:15px; background: #797979; /* Old browsers */ background: -moz-linear-gradient(top, #797979 0%, #444444 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#797979), color-stop(100%,#444444)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #797979 0%,#444444 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #797979 0%,#444444 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #797979 0%,#444444 100%); /* IE10+ */ background: linear-gradient(to bottom, #797979 0%,#444444 100%); /* W3C */ } .menuBar h1{width:100%; background:none;} .menuBar h1 a{position:relative; margin:0 auto; } .menuBar #dnn_pnav{display:none;} .menuBar #mobilePnav{ display:inline; margin:0 15px; } .userProperties{background:none;} } /* #Mobile (Landscape) ------------------- */ /* Note: Design for a width of 480px */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { width: 420px; } /* WRAPPER STYLES */ .columns { width:400px;} /* SET COLUMNS */ .leftPane, .contentPane, .rightPane { width:400px; float:none; clear:both; } } /* #Clearing ------------------- */ /* Self Clearing Goodness */ .container:after { content: "\0020"; display: block; height: 0; clear: both; visibility: hidden; } /* Use clearfix class on parent to clear nested columns, or wrap each row of columns in a
*/ /* .clearfix:before, .clearfix:after, .row:before, .row:after { content: '\0020'; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .row:after, .clearfix:after { clear: both; } */ /* You can also use a
to clear columns */ .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; }