* { margin:0; padding:0; } body { background:url('https://pyro-gen.com/images/background_fixe.png') fixed; font-family:Arial; color:#6B6B6B !important; } #main_c{ background:url('https://pyro-gen.com/images/bg_sv2fb.png') no-repeat fixed center top;} #main_c_sub{ background:url('https://pyro-gen.com/images/bg_sv2fb_scroll.png') no-repeat scroll center top;} #head { background:url('https://pyro-gen.com/images/f_head.png') repeat-x; height:100px; } .IDcenter { width:980px; margin:0 auto; } #logo { background:url('https://pyro-gen.com/images/logo.png') no-repeat; height:64px; width:255px; float:left; margin-top:15px; } #bup { float:right; margin-top:10px; height:60px; width:468px; background:url('../images/pyro_2.jpg') no-repeat left top;} #menu_fond { background:url('https://pyro-gen.com/images/f_menu.png') repeat-x; } #menu { height:30px; font-size:11px; font-weight:bold; line-height:25px; } #menu ul { margin:0 auto; padding:0; display:block; width:1000px; } #menu ul li { list-style:none; float:left; margin-right:10px; } #menu ul li a { text-decoration:none; color:#ffffff; display:block; height:27px; padding:0 10px; } #menu ul li a:hover { background-color:#ff7800;color:#FFFFFF; } #menu ul li.compte a { color:#ffffff; } #menu ul li.compte a :hover{ color:#ffffff; } #menu ul li.compte { margin-left:900px; position:absolute; background-color:#343434; color:#FFFFFF;} #plus { margin:5px auto; width:985px; height:100px; } #sponsors { float: left;background-color: white;height: 100px;line-height: 15px; padding: 0px 0 0 25px;width: 735px;margin-right: 5px; } #sponsors a {margin-left: 1px;margin-right: 26px;} #sponsors ul li{opacity: 0.5;-webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; } #sponsors ul li:hover{opacity: 0.85;} #social { background-color:#fff; height:70px; overflow:hidden; padding:30px 0 0 20px; width:200px; } #social a { display:block; float:left; width:45px; height:45px; margin-right:20px; } #social .facebook { background:url('https://pyro-gen.com/images/facebook.png'); } #social .twitter { background:url('https://pyro-gen.com/images/twitter.png'); } #social .youtube { background:url('https://pyro-gen.com/images/youtube.png'); } #social .facebook:hover { background:url('https://pyro-gen.com/images/facebook_hover.png'); } #social .twitter:hover { background:url('https://pyro-gen.com/images/twitter_hover.png'); } #social .youtube:hover { background:url('https://pyro-gen.com/images/youtube_hover.png'); } #social2 { background-color:#fff; height:70px; overflow:hidden; padding:30px 0 0 20px; width:400px; } #social2 a { display:block; float:left; width:45px; height:45px; margin-right:20px; } #social2 .facebook { background:url('https://pyro-gen.com/images/facebook.png'); } #social2 .twitter { background:url('https://pyro-gen.com/images/twitter.png'); } #social2 .youtube { background:url('https://pyro-gen.com/images/youtube.png'); } #social2 .steam { background:url('https://pyro-gen.com/images/steam.png'); } #social2 .mirc { background:url('https://pyro-gen.com/images/mirc.png'); } #social2 .facebook:hover { background:url('https://pyro-gen.com/images/facebook_hover.png'); } #social2 .twitter:hover { background:url('https://pyro-gen.com/images/twitter_hover.png'); } #social2 .youtube:hover { background:url('https://pyro-gen.com/images/youtube_hover.png'); } #social2 .steam:hover { background:url('https://pyro-gen.com/images/steam_hover.png'); } #social2 .mirc:hover { background:url('https://pyro-gen.com/images/mirc_hover.png'); } #contenu { min-height:385px; width:985px; margin:0 auto 5px auto; background-color: #fff; overflow:hidden;} #contenu2 { min-height: 350px; width: 679px; background-color: white; } #contenu3 { background-color: white;position: absolute;width: 311px;margin-left:674px; } #voir_equipe { margin-left: 684px;position: absolute;background: white;width: 300px; } #pub { margin-left: 684px;position: absolute;background:url('../images/pyro_3.jpg') no-repeat left top; width:300px; height:250px; } #twitter { margin-left: 684px;position: absolute;background: white;width: 300px; } #contenu4 { min-height:350px; width:984px; margin:0 auto 5px auto; overflow:hidden; } #leftt, #rightt { width: 50%; position: absolute; top: 0; z-index: -1; } #leftt { left: 0; } #rightt { right: 0; } #contenu_menu { width:239px; float:left; border-right:solid 1px #b9b9b9; font-size:13px; } #contenu_menu ul li { list-style:none; height:99px; border-bottom: solid 1px #b9b9b9; } #contenu_menu ul li:hover { background: url('https://pyro-gen.com/images/f_contenu-menu.png') no-repeat;} #contenu_menu ul li:hover span{color: #d8d8d8;} #contenu_menu ul li:hover a{color: white; text-shadow: 1px 1px 0px #ca5900;} #contenu_menu ul li:hover .fleche { display:block; } #contenu_menu a { text-decoration:none; color:#ff7800; font-weight:bold; padding-left:7px; display:block; padding-top:35px; height:64px; } #contenu_menu span { font-weight:normal; color:#b9b9b9; display:block; } #contenu_menu ul li a.actualite { background:url('https://pyro-gen.com/images/i_actualite.png') no-repeat center bottom; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; } #contenu_menu ul li a.actualite:hover { background:url('https://pyro-gen.com/images/i_actualite.png') no-repeat center top; } #contenu_menu ul li a.equipe { background:url('https://pyro-gen.com/images/i_equipe.png') no-repeat center bottom; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; } #contenu_menu ul li a.equipe:hover { background:url('https://pyro-gen.com/images/i_equipe.png') no-repeat center top; } #contenu_menu ul li a.blog { background:url('https://pyro-gen.com/images/i_blog.png') no-repeat center bottom; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; } #contenu_menu ul li a.blog:hover { background:url('https://pyro-gen.com/images/i_blog.png') no-repeat center top; } #contenu_menu ul li a.forum { background:url('https://pyro-gen.com/images/i_forum.png') no-repeat center bottom; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; } #contenu_menu ul li a.forum:hover { background:url('https://pyro-gen.com/images/i_forum.png') no-repeat center top; } #contenu_menu .fleche { display:none; background:url('https://pyro-gen.com/images/fleche.png') no-repeat; height:35px; width:18px; position:absolute; margin-left: 239px; margin-top: 30px; } #bas { width:990px; margin:0 auto -18px auto; overflow:hidden; padding-left: 5px; } .bloc_bas { width:325px; background-color:#fff; float:left; color:#b9b9b9; font-size:13px; margin-right:5px; padding-bottom:5px; margin-bottom:5px; } .bloc_bas b { color:#ff7800; display:block; margin-left:5px; margin-top:5px; } .bloc_bas span { margin-left:5px; } #pubas { float:left; background:url('../images/pyro_1.jpg') no-repeat left top; width:728px; height:90px; } #recrutement { position:absolute; margin-left:5px; background:url('https://pyro-gen.com/images/recrutement.png') no-repeat #fff; width:252px; height:90px; } #footer {background: #6a6a6a url('https://pyro-gen.com/images/bg_footer.jpg') repeat-x; color:#fff; font-size:11px; padding-top:3px; height: 145px; } #footer .footer_shads{ width:1042px; margin: 0 auto;} #footer .footer_shads .shad_l{float: left; background: url('https://pyro-gen.com/images/shad_l.png') repeat-x left bottom; width: 25px; height: 145px;} #footer .footer_shads .shad_r{float: left; background: url('https://pyro-gen.com/images/shad_r.png') repeat-x right bottom; width: 25px; height: 145px;} #footer .block_s {font-size: 10px; width: 220px; margin: 0 3px; float: left; color: #2c2727; text-shadow: 0px -1px 0px #5c5c5c; padding: 11px; line-height: 16px; letter-spacing: 1px;} #footer .block_s a .logo_footer { height: 39px; width: 187px; background:url('/images/pyro_footer.png') no-repeat center bottom; -webkit-transition: .3s fade; -moz-transition: .3s fade; } #footer .block_s a:hover .logo_footer { background:url('/images/pyro_footer.png') no-repeat center top; } #footer .block {font-size: 10px; width: 340px; margin: 0 3px; float: left; color: #2c2727; text-shadow: 0px 1px 0px #5c5c5c; padding: 11px; line-height: 16px; letter-spacing: 1px;} #footer .block a img{opacity: 0.6; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; } #footer .block a img:hover{opacity: 1;} #footer hr{float: left; height: 145px; border-left: 1px dotted #393737; border-right: 1px dotted #5c5c5c; opacity: 0.8;} #footer b{font-size: 14px;} #footer .block_s i{} #footer .block_s ul li{list-style: none;} #footer .block_s ul li a{text-transform : uppercase; text-decoration:none; color: #2c2727; -webkit-transition: .1s ease-in-out; -moz-transition: .1s ease-in-out; } #footer .block_s ul li a:hover{color: #131111; text-shadow: 0px 0px 0px #5c5c5c; margin-left: 5px;} .footer_a:hover { color:#FFFFFF; } ul#footer_menu { padding:10px 20px; overflow:hidden; } ul#footer_menu li { list-style:none; float:left; margin-right:20px;} ul#footer_menu a { text-decoration:none; color:#b9b9b9; } #logo-footer { float:left; margin-right:30px; margin-bottom:10px;} .bouton { padding:8px 15px; margin:3px; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,0.5); color:#fff; text-shadow:0 1px 1px rgba(0, 0, 0, 0.5); display:table-cell; font-weight:bold;} .bouton_submit { background-image:url(https://pyro-gen.com/images/bouton_slide.png);color:#fff;padding:10px 41px;border:none; } .input_co { width:200px;height:20px;padding:5px;border: solid 1px #000; } .input_co:hover { width:200px;height:20px;padding:5px;border: solid 1px #EC620D; } .lienforum { text-decoration:none;color:#FF7800;text-shadow: 0 1px 0 white;font-size:17px; } .lienforum:hover { text-decoration:underline;color:#FF7800;text-shadow: 0 1px 0 white;font-size:17px; } .liensponsors { text-decoration:none; } .liensponsors:hover { text-decoration:underline; } /* Essentials */ .clear { clear: both; } .spacer { height: 20px; } /* Header */ header#header { height: 55px; width: 100%; background: #222222 url(https://pyro-gen.com/images/header_bg.png) repeat-x; } header#header h1.site_title, header#header h2.section_title { float: left; margin: 0; font-size: 22px; display: block; width: 23%; height: 55px; font-weight: normal; text-align: left; text-indent: 1.8%; line-height: 55px; color: #fff; text-shadow: 0 -1px 0 #000; } header#header h1.site_title a { color: #fff; text-decoration: none; } header#header h2.section_title { text-align: center; text-indent: 4.5%; width: 68%; background: url(https://pyro-gen.com/images/header_shadow.png) no-repeat left top; } .btn_view_site { float: left; width: 9%; } .btn_view_site a { display: block; margin-top: 12px; width: 91px; height: 27px; background: url(https://pyro-gen.com/images/btn_view_site.png) no-repeat; text-align: center; line-height: 29px; color: #fff; text-decoration: none; text-shadow: 0 -1px 0 #000;} .btn_view_site a:hover { background-position: 0 -27px; } /* Secondary Header Bar */ section#secondary_bar { height: 38px; width: 100%; background: #F1F1F4 url(https://pyro-gen.com/images/secondary_bar.png) repeat-x; } section#secondary_bar .user { float: left; width: 23%; height: 38px; } .user p { margin: 0; padding: 0; color: #666666; font-weight: bold; display: block; float: left; width: 85%; height: 35px; line-height: 35px; text-indent: 25px; text-shadow: 0 1px 0 #fff; background: url(https://pyro-gen.com/images/icn_user.png) no-repeat center left; margin-left: 6%; } .user a { text-decoration: none; color: #666666} .user a:hover { color: #77BACE; } .user a.logout_user { float: left; display: block; width: 16px; height: 35px; text-indent: -5000px; background: url(https://pyro-gen.com/images/icn_logout.png) center no-repeat; } /* Breadcrumbs */ section#secondary_bar .breadcrumbs_container { float: left; width: 77%; background: url(https://pyro-gen.com/images/secondary_bar_shadow.png) no-repeat left top; height: 38px; } article.breadcrumbs { float: left; padding: 0 10px; border: 1px solid #ccc; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 0 #fff; -moz-box-shadow: 0 1px 0 #fff; box-shadow: 0 1px 0 #fff; height: 23px; margin: 4px 3%; } .breadcrumbs a { display: inline-block; float: left; height: 24px; line-height: 23px; } .breadcrumbs a.current, .breadcrumbs a.current:hover { color: #9E9E9E; font-weight: bold; text-shadow: 0 1px 0 #fff; text-decoration: none; } .breadcrumbs a:link, .breadcrumbs a:visited { color: #44474F; text-decoration: none; text-shadow: 0 1px 0 #fff; font-weight: bold;} .breadcrumbs a:hover { color: #222222; } .breadcrumb_divider { display: inline-block; width: 12px; height: 24px; background: url(https://pyro-gen.com/images/breadcrumb_divider.png) no-repeat; float: left; margin: 0 5px; } /* Sidebar */ aside#sidebar { width: 23%; background: #E0E0E3 url(https://pyro-gen.com/images/sidebar.png) repeat; float: left; min-height: 500px; margin-top: -4px; } #sidebar hr { border: none; outline: none; background: url(https://pyro-gen.com/images/sidebar_divider.png) repeat-x; display: block; width: 100%; height: 2px;} /* Search */ .quick_search { text-align: center; padding: 14px 0 10px 0; } .quick_search input[type=text] { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; border: 1px solid #bbb; height: 26px; width: 90%; color: #ccc; -webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; -moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; text-indent: 30px; background: #fff url(https://pyro-gen.com/images/icn_search.png) no-repeat; background-position: 10px 6px; } .quick_search input[type=text]:focus { outline: none; color: #666666; border: 1px solid #77BACE; -webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6; -moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6; box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6; } /* Sidebar Menu */ #sidebar h3 { color: #1F1F20; text-transform: uppercase; text-shadow: 0 1px 0 #fff; font-size: 13px; margin: 10px 0 10px 6%; display: block; float: left; width: 90%; } .toggleLink { color: #999999; font-size: 10px; text-decoration: none; display: block; float: right; margin-right: 2% } #sidebar .toggleLink:hover { color: #77BACE; text-decoration: none; } #sidebar ul { clear: both; margin: 0; padding: 0; } #sidebar li { list-style: none; margin: 0 0 0 12%; padding: 0; } #sidebar li a { color: #666666; padding-left: 25px; text-decoration: none; display: inline-block; height: 17px; line-height: 17px; text-shadow: 0 1px 0 #fff; margin: 2px 0; } #sidebar li a:hover { color: #444444; } /* Sidebar Icons */ #sidebar li.icn_new_article a { background: url(https://pyro-gen.com/images/icn_new_article.png) no-repeat center left; } #sidebar li.icn_edit_article a { background: url(https://pyro-gen.com/images/icn_edit_article.png) no-repeat center left; } #sidebar li.icn_categories a { background: url(https://pyro-gen.com/images/icn_categories.png) no-repeat center left; } #sidebar li.icn_tags a { background: url(https://pyro-gen.com/images/icn_tags.png) no-repeat center left; } #sidebar li.icn_add_user a { background: url(https://pyro-gen.com/images/icn_add_user.png) no-repeat center left; } #sidebar li.icn_view_users a { background: url(https://pyro-gen.com/images/icn_view_users.png) no-repeat center left; } #sidebar li.icn_profile a { background: url(https://pyro-gen.com/images/icn_profile.png) no-repeat center left; } #sidebar li.icn_folder a { background: url(https://pyro-gen.com/images/icn_folder.png) no-repeat center left; } #sidebar li.icn_photo a { background: url(https://pyro-gen.com/images/icn_photo.png) no-repeat center left; } #sidebar li.icn_audio a { background: url(https://pyro-gen.com/images/icn_audio.png) no-repeat center left; } #sidebar li.icn_video a { background: url(https://pyro-gen.com/images/icn_video.png) no-repeat center left; } #sidebar li.icn_settings a { background: url(https://pyro-gen.com/images/icn_settings.png) no-repeat center left; } #sidebar li.icn_security a { background: url(https://pyro-gen.com/images/icn_security.png) no-repeat center left; } #sidebar li.icn_jump_back a { background: url(https://pyro-gen.com/images/icn_jump_back.png) no-repeat center left; } #sidebar p { color: #666666; padding-left: 6%; text-shadow: 0 1px 0 #fff; margin: 10px 0 0 0;} #sidebar a { color: #666666; text-decoration: none; } #sidebar a:hover { text-decoration: underline; } #sidebar footer { margin-top: 20%; } /* Main Content */ section#main { width: 77%; min-height: 500px; background: url(https://pyro-gen.com/images/sidebar_shadow.png) repeat-y left top; float: left; margin-top: -2px; } #main h3 { color: #1F1F20; text-transform: uppercase; text-shadow: 0 1px 0 #fff; font-size: 13px; margin: 8px 20px; } /* Modules */ .module { border: 1px solid #9BA0AF; width: 100%; margin: 20px 3% 0 3%; margin-top: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #ffffff; } #main .module header h3 { display: block; width: 90%; float: left; } .module header { height: 38px; width: 100%; background: #F1F1F4 url(https://pyro-gen.com/images/secondary_bar.png) repeat-x; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; } .module footer { height: 32px; width: 100%; border-top: 1px solid #9CA1B0; background: #F1F1F4 url(https://pyro-gen.com/images/module_footer_bg.png) repeat-x; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; } .module_content { margin: 10px 20px; color: #666;} /* Module Widths */ .width_full { width: 95%; } .width_half { width: 46%; margin-right: 0; float: left; } .width_quarter { width: 26%; margin-right: 0; float: left; } .width_3_quarter { width: 96%; margin-right: 0; float: left; } /* Stats Module */ .stats_graph { width: 64%; float: left; } .stats_overview { background: #F6F6F6; border: 1px solid #ccc; float: right; width: 26%; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .overview_today, .overview_previous { width: 50%; float: left;} .stats_overview p { margin: 0; padding: 0; text-align: center; text-transform: uppercase; text-shadow: 0 1px 0 #fff; } .stats_overview p.overview_day { font-size: 12px; font-weight: bold; margin: 6px 0; } .stats_overview p.overview_count { font-size: 26px; font-weight: bold; color: #333333;} .stats_overview p.overview_type { font-size: 10px; color: #999999; margin-bottom: 8px} /* Content Manager */ .tablesorter { width: 100%; margin: -5px 0 0 0; } .tablesorter td{ margin: 0; padding: 0; border-bottom: 1px dotted #ccc; } .tablesorter thead tr { height: 34px; background: url(https://pyro-gen.com/images/table_sorter_header.png) repeat-x; text-align: left; text-indent: 10px; cursor: pointer; } .tablesorter td { padding: 15px 10px; } .tablesorter input[type=image] { margin-right: 10px;} ul.tabs { margin: 3px 10px 0 0; padding: 0; float: right; list-style: none; height: 24px; /*--Set height of tabs--*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 0 #fff; -moz-box-shadow: 0 1px 0 #fff; box-shadow: 0 1px 0 #fff; border: 1px solid #ccc; font-weight: bold; text-shadow: 0 1px 0 #fff; } ul.tabs li { float: left; margin: 0; padding: 0; line-height: 24px; } ul.tabs li a { text-decoration: none; color: #999; display: block; padding: 0 10px; height: 24px; } ul.tabs li a:hover { color: #44474F; } html ul.tabs li.active a { color: #44474F; } html ul.tabs li.active, html ul.tabs li.active a:hover { background: #F1F2F4; -webkit-box-shadow: inset 0 2px 3px #818181; -moz-box-shadow: inset 0 2px 3px #818181; box-shadow: inset 0 2px 3px #818181; } html ul.tabs li:first-child, html ul.tabs li:first-child a { -webkit-border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; } html ul.tabs li:last-child, html ul.tabs li:last-child a { -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; } #main .module header h3.tabs_involved { display: block; width: 60%; float: left; } /* Messages */ .message { border-bottom: 1px dotted #cccccc; } input[type=submit] { border: 1px solid #ff7800; border-left: 1px solid #f35d00; border-right: 1px solid #ff914c; border-top: 1px solid #ff7e2e; background-color: #ff7800; background: -moz-linear-gradient(top, #ff7800, #ff6000); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff7800), to(#ff6000)); -webkit-box-shadow: 0px 0px 0px 1px #722c00, 0 1px 1px 1px #777; -moz-box-shadow: 0px 0px 0px 1px #722c00, 0 1px 1px 1px #777; box-shadow: 0px 0px 0px 1px #722c00, 0 1px 1px 1px #777; color: #ffefe5; text-shadow: 0 -1px 0 #943900; border-radius:3px; } input[type=submit]:hover { color: #FFFFFF; } input[type=submit].alt_btn { background: #D0D1D4 url(https://pyro-gen.com/images/btn_submit_2.png) repeat-x; border: 1px solid#30B0C8; -webkit-box-shadow: 0 1px 0 #fff; -moz-box-shadow: 0 1px 0 #fff; box-shadow: 0 1px 0 #fff; font-weight: bold; height: 22px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 0 10px; color: #003E49; text-shadow: 0 1px 0 #6CDCF9; cursor: pointer; } input[type=submit].alt_btn:hover { color: #001217; } input[type=submit].btn_post_message { background: #D0D1D4 url(https://pyro-gen.com/images/post_message.png) no-repeat; display: block; width: 37px; border: none; height: 24px; cursor: pointer; text-indent: -5000px; } input[type=submit].btn_post_message:hover { background-position: 0 -24px; } .post_message { text-align: left; padding: 5px 0; } .post_message input[type=image] { float: left; } .message_list { height: 250px; overflow-x:hidden; overflow-y: scroll; } /* New/Edit Article Module */ fieldset { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #F6F6F6; border: 1px solid #ccc; padding: 1% 0%; margin: 10px 0; } fieldset label { display: block; float: left; width: 200px; height: 25px; line-height: 25px; text-shadow: 0 1px 0 #fff; font-weight: bold; padding-left: 10px; margin: -5px 0 5px 0; text-transform: uppercase; } fieldset select { width: 96%; margin: 0 10px; border: 1px solid #bbb; height: 20px; color: #666666; } textarea{max-width: 385px; min-width: 385px; max-height: 120px; padding: 5px; text-shadow: 0px 1px 0px #fff; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc; color:#6a6a6a;} input[type="text"]:hover { border: 1px solid #fafafa; -webkit-box-shadow: 0px 0px 6px #FF7800; -moz-box-shadow: 0px 0px 5px #FF7800; box-shadow: 0px 0px 5px #FF7800; color:#6a6a6a; } /*fieldset textarea { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #BBBBBB; color: #666666; -webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; -moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff; padding-left: 10px; background-position: 10px 6px; margin: 0 0.5%; display: block; float: left; width: 96%; margin: 0 10px; }*/ fieldset textarea:focus { outline: none; border: 1px solid #77BACE; -webkit-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6; -moz-box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6; box-shadow: inset 0 2px 2px #ccc, 0 0 10px #ADDCE6; } .submit_link { float: right; margin-right: 3%; padding: 5px 0; } .submit_link select { width: 150px; border: 1px solid #bbb; height: 20px; color: #666666; } #main .module_content h1 { color: #333333; text-transform: none; text-shadow: 0 1px 0 #fff; font-size: 22px; margin: 8px 0px; } #main .module_content h2 { color: #444444; text-transform: none; text-shadow: 0 1px 0 #fff; font-size: 18px; margin: 8px 0px; } #main .module_content h3 { color: #666666; text-transform: uppercase; text-shadow: 0 1px 0 #fff; font-size: 13px; margin: 8px 0px; } #main .module_content h4 { color: #666666; text-transform: none; text-shadow: 0 1px 0 #fff; font-size: 13px; margin: 8px 0px; } #main .module_content li { line-height: 150%; } /* Alerts */ #main h4.alert_info { display: block; width: 95%; margin: 20px 3% 0 3%; margin-top: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #B5E5EF url(https://pyro-gen.com/images/icn_alert_info.png) no-repeat; background-position: 10px 10px; border: 1px solid #77BACE; color: #082B33; padding: 10px 0; text-indent: 40px; font-size: 14px;} #main h4.alert_warning { display: block; width: 95%; margin: 20px 3% 0 3%; margin-top: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #F5F3BA url(https://pyro-gen.com/images/icn_alert_warning.png) no-repeat; background-position: 10px 10px; border: 1px solid #C7A20D; color: #796616; padding: 10px 0; text-indent: 40px; font-size: 14px;} #main h4.alert_error { display: block; width: 95%; margin: 20px 3% 0 3%; margin-top: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #F3D9D9 url(https://pyro-gen.com/images/icn_alert_error.png) no-repeat; background-position: 10px 10px; border: 1px solid #D20009; color: #7B040F; padding: 10px 0; text-indent: 40px; font-size: 14px;} #main h4.alert_success { display: block; width: 95%; margin: 20px 3% 0 3%; margin-top: 20px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #E2F6C5 url(https://pyro-gen.com/images/icn_alert_success.png) no-repeat; background-position: 10px 10px; border: 1px solid #79C20D; color: #32510F; padding: 10px 0; text-indent: 40px; font-size: 14px;} .datagrid table { border-collapse: collapse; text-align: left; width: 100%; border-top: 1px solid #DBDBDB; } .datagrid { font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 100%; border-bottom: 1px solid #DBDBDB; } .datagrid table td, .datagrid table th { padding: 3px 10px; } .datagrid table thead th { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #E6E6E6), color-stop(1, #DBDBDB) ); background:-moz-linear-gradient( center top, #8C8C8C 5%, #C2C2C2 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#C2C2C2'); background-color:#8C8C8C; color:#313131; font-size: 15px; font-weight: bold; border-left: 0px solid #A3A3A3; } .datagrid table thead th:first-child { border: none; } .datagrid table tbody td { color: #313131; font-size: 14px; font-weight: normal; border-bottom: 1px solid #DBDBDB; } .datagrid table tbody .alt td { background: #EBEBEB; color: #313131; } .datagrid table tbody td:first-child { border: none; } .datagrid table tfoot td div { background: #EBEBEB; } .datagrid table tfoot td { padding: 0; font-size: 12px } .datagrid table tfoot td div{ padding: 2px; } .datagrid table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; } .datagrid table tfoot li { display: inline; } .datagrid table tfoot li a { text-decoration: none; display: inline-block; padding: 2px 8px; margin: 1px; color: #313131; border: 1px solid #8C8C8C; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8C8C8C), color-stop(1, #7D7D7D) ); background:-moz-linear-gradient( center top, #8C8C8C 5%, #7D7D7D 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D'); background-color:#8C8C8C; } .datagrid table tfoot ul.active, .datagrid table tfoot ul a:hover { text-decoration: none; border-color: #7D7D7D; color: #313131; background: none; background-color:#8C8C8C; } .trfofo { background:#FFFFFF; } .trfofo:hover { background:#EEEEEE; } .datagrid2 table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid2 { font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 90%; } .datagrid2 table td, .datagrid table th { padding: 3px 10px; } .datagrid2 table thead th { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #E6E6E6), color-stop(1, #DBDBDB) ); background:-moz-linear-gradient( center top, #8C8C8C 5%, #C2C2C2 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#C2C2C2'); background-color:#8C8C8C; color:#000; font-size: 15px; font-weight: bold; border-left: 0px solid #A3A3A3; } .datagrid2 table thead th:first-child { border: none; } .datagrid2 table tbody td { color: #000000; border-left: 1px solid #DBDBDB; font-size: 14px; font-weight: normal; } .datagrid2 table tbody .alt td { background: #EBEBEB; color: #7D7D7D; } .datagrid2 table tbody td:first-child { border: none; } .datagrid2 table tfoot td div { background: #EBEBEB; } .datagrid2 table tfoot td { padding: 0; font-size: 12px } .datagrid2 table tfoot td div{ padding: 2px; } .datagrid2 table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; } .datagrid2 table tfoot li { display: inline; } .datagrid2 table tfoot li a { text-decoration: none; display: inline-block; padding: 2px 8px; margin: 1px; color: #F5F5F5; border: 1px solid #8C8C8C; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8C8C8C), color-stop(1, #7D7D7D) ); background:-moz-linear-gradient( center top, #8C8C8C 5%, #7D7D7D 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D'); background-color:#8C8C8C; } .datagrid2 table tfoot ul.active, .datagrid2 table tfoot ul a:hover { text-decoration: none; border-color: #7D7D7D; color: #F5F5F5; background: none; background-color:#8C8C8C; } .datagrid3 table { border-collapse: collapse; text-align: left; width: 100%; } .datagrid3 { font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; width: 100%; } .datagrid3 table td, .datagrid table th { padding: 3px 10px; } .datagrid3 table thead th { background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #E6E6E6), color-stop(1, #DBDBDB) ); background:-moz-linear-gradient( center top, #8C8C8C 5%, #C2C2C2 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#C2C2C2'); background-color:#8C8C8C; color:#313131; font-size: 15px; font-weight: bold; border-left: 0px solid #A3A3A3; } .datagrid3 table thead th:first-child { border: none; } .datagrid3 table tbody td { color: #313131; font-size: 14px; font-weight: normal; border-bottom: 1px solid #DBDBDB; } .datagrid3 table tbody .alt td { background: #EBEBEB; color: #313131; } .datagrid3 table tbody td:first-child { border: none; } .datagrid3 table tfoot td div { background: #EBEBEB; } .datagrid3 table tfoot td { padding: 0; font-size: 12px } .datagrid3 table tfoot td div{ padding: 2px; } .datagrid3 table tfoot td ul { margin: 0; padding:0; list-style: none; text-align: right; } .datagrid3 table tfoot li { display: inline; } .datagrid3 table tfoot li a { text-decoration: none; display: inline-block; padding: 2px 8px; margin: 1px; color: #313131; border: 1px solid #8C8C8C; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8C8C8C), color-stop(1, #7D7D7D) ); background:-moz-linear-gradient( center top, #8C8C8C 5%, #7D7D7D 100% ); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8C8C8C', endColorstr='#7D7D7D'); background-color:#8C8C8C; } .datagrid3 table tfoot ul.active, .datagrid3 table tfoot ul a:hover { text-decoration: none; border-color: #7D7D7D; color: #313131; background: none; background-color:#8C8C8C; } input[type="text"] { padding: 5px; font-size: 15px; text-shadow: 0px 1px 0px #fff; outline: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; color:#6a6a6a; } input[type="text"]:hover { border: 1px solid #fafafa; -webkit-box-shadow: 0px 0px 6px #FF7800; -moz-box-shadow: 0px 0px 5px #FF7800; box-shadow: 0px 0px 5px #FF7800; color:#6a6a6a; } input[type="password"] { padding: 5px; font-size: 15px; text-shadow: 0px 1px 0px #fff; outline: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid #ccc; -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; color:#6a6a6a; } input[type="password"]:hover { border: 1px solid #fafafa; -webkit-box-shadow: 0px 0px 6px #FF7800; -moz-box-shadow: 0px 0px 5px #FF7800; box-shadow: 0px 0px 5px #FF7800; color:#6a6a6a; } img { border:none; } #meta { font-size: 11px; color: #6a6a6a; margin: 10px 0 0 -20px; display: block; font-weight: 500; clear: both; height: 35px; line-height: 35px; background: #ECEEF1 url(https://pyro-gen.com/images/heading-bg.png) repeat-x; border-top: solid 1px #ECEEF1; padding: 0 20px; width: 654px; } #date_blogs { color: #999; font-size: 12px; margin: 5px 0 10px 0; display: block; border-top: solid 2px #EEE; padding: 10px 0; line-height: 18px; } #date2_blogs { color: #999; font-size: 12px; margin: 5px 0 10px 0; display: block; padding: 10px 0; line-height: 18px; margin-left:12px; } .btn-blog { width: 200px; height: 43px; padding:6px; padding-top: 7px; /*permet le centrage vertical*/ text-align: center; color: #FFFFFF; background: #ff7800; background: -webkit-linear-gradient( #ff7800, #ff6000); background: -moz-linear-gradient( #ff7800, #ff6000); background: -ms-linear-gradient( #ff7800, #ff6000); background: -o-linear-gradient( #ff7800, #ff6000); background: linear-gradient( #ff7800, #ff6000); border-radius: 4px; text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2); box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4); text-decoration:none; } .btn-blog:hover { width: 200px; height: 43px; padding:6px; padding-top: 7px; /*permet le centrage vertical*/ text-align: center; color: #FFFFFF; background: #ff6000; background: -webkit-linear-gradient( #ff6000, #ff7800); background: -moz-linear-gradient( #ff6000, #ff7800); background: -ms-linear-gradient( #ff6000, #ff7800); background: -o-linear-gradient( #ff6000, #ff7800); background: linear-gradient( #ff6000, #ff7800); border-radius: 4px; text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.2); box-shadow: 0 0 5px rgba( 0, 0, 0, 0.5), 0 -1px 0 rgba( 255, 255, 255, 0.4); } .btn{ border: 1px solid #008fd3; border-left: 1px solid #00a9f3; border-right: 1px solid #4cd4ff; border-top: 1px solid #2ec4ff; display: inline-block; background-color: #0080c7; background: -moz-linear-gradient(top, #0092d9, #006ab0); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0092d9), to(#006ab0)); -webkit-box-shadow: 0px 0px 0px 1px #004372, 0 1px 1px 1px #777; -moz-box-shadow: 0px 0px 0px 1px #004372, 0 1px 1px 1px #777; box-shadow: 0px 0px 0px 1px #004372, 0 1px 1px 1px #777; font-size: 13px; padding: 5px 17px; margin: 15px 8px 15px 2px; color: #e5f4ff; text-shadow: 0 -1px 0 #005a94; cursor: pointer; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; transition: none; -o-transition: none; -moz-transition: none; -webkit-transition: none; font-weight: 600; text-decoration:none; } .btn:hover{ background-color: #00acff; background: -moz-linear-gradient(top, #00acff, #007acb); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#00acff), to(#007acb)); border: 1px solid #1f99d3; border-left: 1px solid #1db2f3; border-right: 1px solid #70ddff; border-top: 1px solid #59d0ff; color: #fff; } .btn:active{ background-color: #006ab0; background: -moz-linear-gradient(top, #006ab0, #006ab0); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#006ab0), to(#006ab0)); -webkit-box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), inset 0 1px 1px 1px #003b61; -moz-box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), inset 0 1px 1px 1px #003b61; box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), inset 0 1px 1px 1px #003b61; border: 1px solid #0068a3; text-shadow: 0 1px 0 #005a94; } /*.orange-btn{ border: 1px solid #ff7800; border-left: 1px solid #f35d00; border-right: 1px solid #ff914c; border-top: 1px solid #ff7e2e; background-color: #ff7800; background: -moz-linear-gradient(top, #ff7800, #ff6000); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff7800), to(#ff6000)); -webkit-box-shadow: 0px 0px 0px 1px #722c00, 0 1px 1px 1px #777; -moz-box-shadow: 0px 0px 0px 1px #722c00, 0 1px 1px 1px #777; box-shadow: 0px 0px 0px 1px #722c00, 0 1px 1px 1px #777; color: #ffefe5; text-shadow: 0 -1px 0 #943900; } .orange-btn:hover{ background-color: #ff7800; background: -moz-linear-gradient(top, #ff7800, #ff6000); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6200), to(#cb4e00)); border: 1px solid #d3641f; border-left: 1px solid #f36f1d; border-right: 1px solid #ffa770; border-top: 1px solid #ff9959; color: #fff; } .orange-btn:active{ background-color: #ff7800; background: -moz-linear-gradient(top, #ff7800, #ff6000); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff7800), to(#ff6000)); -webkit-box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), inset 0 1px 1px 1px #612500; -moz-box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), inset 0 1px 1px 1px #612500; box-shadow: 0px 0px 0px 1px rgba(255,255,255,0.3), inset 0 1px 1px 1px #612500; border: 1px solid #a33e00; text-shadow: 0 1px 0 #943900; }*/ a.orange-btn {text-decoration: none;} .orange-btn{ font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff; padding: 6px 13px; background: -moz-linear-gradient( top, #f17910 0%, #e9540a); background: -webkit-gradient( linear, left top, left bottom, from(#f17910), to(#e9540a)); -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 0px solid #ffffff; -moz-box-shadow: 1px -1px 0px rgba(217,87,0,1), inset 0px 1px 0px rgba(250,160,5,1); -webkit-box-shadow: 1px -1px 0px rgba(217,87,0,1), inset 0px 1px 0px rgba(250,160,5,1); box-shadow: 1px -1px 0px rgba(217,87,0,1), inset 0px 1px 0px rgba(250,160,5,1); text-shadow: 1px 1px 0px #ca5900; } .orange-btn:hover{opacity: 1;background: -moz-linear-gradient( top, #e9540a 0%, #f17910); background: -webkit-gradient( linear, left top, left bottom, from(#e9540a), to(#f17910)); -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 0px solid #ffffff; -moz-box-shadow: 1px -1px 0px rgba(217,87,0,1), inset 0px 1px 0px rgba(250,160,5,1); -webkit-box-shadow: 1px -1px 0px rgba(217,87,0,1), inset 0px 1px 0px rgba(250,160,5,1); box-shadow: 1px -1px 0px rgba(217,87,0,1), inset 0px 1px 1px rgba(250,160,5,1); text-shadow: 1px 1px 0px #ca5900; } .orange-btn:active{background: -moz-linear-gradient( top, #e9540a 0%, #f17910); background: -webkit-gradient( linear, left top, left bottom, from(#e9540a), to(#f17910)); -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; border: 0px solid #ffffff; -moz-box-shadow: 2px 3px 2px rgba(143,4,4,0), inset -1px -1px 3px rgba(0,0,0,0.1); -webkit-box-shadow: 2px 3px 2px rgba(143,4,4,0), inset -1px -1px 3px rgba(0,0,0,0.1); box-shadow: 2px 3px 2px rgba(143,4,4,0), inset -1px -1px 3px rgba(0,0,0,0.1); text-shadow: 1px 1px 0px #ca5900; } #wrap { background-color: #fff; margin: 60px auto 0px auto; padding: 40px; width: 580px; -moz-box-shadow: 0px 0px 10px #d7d7d7; -webkit-box-shadow: 0px 0px 10px #d7d7d7; box-shadow: 0px 0px 10px #d7d7d7; } .notification { /* GENERAL */ border: 1px solid; border-bottom-width: 2px; color: #4f4f4f; display: block; font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif; font-size: 11px; line-height: 19px; margin-bottom: 20px; overflow: hidden; position: relative; /* BOX SHADOWS */ -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.15), 0px 0px 2px rgba(0,0,0,0.05); -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.15), 0px 0px 2px rgba(0,0,0,0.05); box-shadow: 0px 1px 2px rgba(0,0,0,0.15), 0px 0px 2px rgba(0,0,0,0.05); /* standards version last */ /* BORDER RADIUS */ -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; /* standards version last */ } .notification p { /* GENERAL */ padding: 16px 16px 16px 42px; text-shadow: 0px 1px 0px rgba(255,255,255,0.65); } .notification p strong { /* GENERAL */ color: #303030; font-weight: bold; } /* ---------------------------------------------- -- SUCCESS NOTIFICATION ---------------------------------------------- */ .notification.success { /* GENERAL */ background-color: #dde6ba; border-color: #d0e289 #c6d881 #b8cb71; /* BACKGROUND GRADIENTS */ background: -moz-linear-gradient(top, #fff, #e6efc2 2%, #d9e2b7 ); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.02, #e6efc2), to(#d9e2b7) ); background: linear-gradient(top, #fff, #e6efc2 2%, #d9e2b7 ); /* standards version last */ /* filter gradient for IE */ filter: PROGID:DXImageTransform.Microsoft.Gradient(StartColorStr='#e6efc2',EndColorStr='#d9e2b7'); } .notification.success p { background: transparent url('tick.png') no-repeat scroll 14px 17px; } .notification.success p strong { color: #417800; } /* ---------------------------------------------- -- ERROR NOTIFICATION ---------------------------------------------- */ .notification.error { /* GENERAL */ background-color: #f6dbd6; border-color: #f7d5d6 #f1c8ca #f2b5b8; /* BACKGROUND GRADIENTS */ background: -moz-linear-gradient(top, #fff, #fbe2e3 2%, #eeccce ); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.02, #fbe2e3), to(#eeccce) ); background: linear-gradient(top, #fff, #fbe2e3 2%, #eeccce ); /* standards version last */ /* filter gradient for IE */ filter: PROGID:DXImageTransform.Microsoft.Gradient(StartColorStr='#fbe2e3',EndColorStr='#eeccce'); } .notification.error p { background: transparent url('cross.png') no-repeat scroll 14px 17px; } .notification.error p strong { color: #d43c41; } /* ---------------------------------------------- -- WARNING NOTIFICATION ---------------------------------------------- */ .notification.warning { /* GENERAL */ background-color: #f9f9b4; border-color: #f7dc72 #f4d96c #eace61; /* BACKGROUND GRADIENTS */ background: -moz-linear-gradient(top, #fff, #ffffb9 2%, #f0efae ); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.02, #ffffb9), to(#f0efae) ); background: linear-gradient(top, #fff, #ffffb9 2%, #f0efae ); /* standards version last */ /* filter gradient for IE */ filter: PROGID:DXImageTransform.Microsoft.Gradient(StartColorStr='#ffffb9',EndColorStr='#f0efae'); } .notification.warning p { background: transparent url('exclamation.png') no-repeat scroll 14px 17px; } .notification.warning p strong { color: #777909; } /* ---------------------------------------------- -- TIP/INFO NOTIFICATION ---------------------------------------------- */ .notification.tip { /* GENERAL */ background-color: #dceffa; border-color: #b8e1fd #a6d4f4 #9ed1f5; /* BACKGROUND GRADIENTS */ background: -moz-linear-gradient(top, #fff, #e0f4ff 2%, #d4e6f0 ); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.02, #e0f4ff), to(#d4e6f0) ); background: linear-gradient(top, #fff, #e0f4ff 2%, #d4e6f0 ); /* standards version last */ /* filter gradient for IE */ filter: PROGID:DXImageTransform.Microsoft.Gradient(StartColorStr='#e0f4ff',EndColorStr='#d4e6f0'); } .notification.tip p strong { color: #0068a4; } .notification.tip p { background: transparent url('tip.png') no-repeat scroll 14px 17px; } /* ---------------------------------------------- -- NEUTRAL NOTIFICATION ---------------------------------------------- */ .notification.neutral { /* GENERAL */ background-color: #f0f0f0; border-color: #e4e4e4 #d9d9d9 #cbcbcb; /* BACKGROUND GRADIENTS */ background: -moz-linear-gradient(top, #fff, #f0f0f0 2%, #e4e4e4 ); background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.02, #f0f0f0), to(#e4e4e4) ); background: linear-gradient(top, #fff, #f0f0f0 2%, #e4e4e4 ); /* standards version last */ /* filter gradient for IE */ filter: PROGID:DXImageTransform.Microsoft.Gradient(StartColorStr='#f0f0f0',EndColorStr='#e4e4e4'); } .notification.neutral p strong { color: #303030; } .notification.neutral p { background: transparent url('neutral.png') no-repeat scroll 14px 17px; } /* BOTTOM - TOP 100% EFFECT */ #bottom_top li { position:relative; text-align: center; cursor: pointer; display: block; float: left; width: 200px; height: 200px; background-color: #ff7800; overflow: hidden; margin-right: 10px; } #bottom_top span { display: block; height: 100%; width: 100%; transition:all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; } #bottom_top span img { position: relative; width: 100% !important; height: 100% !important; } #bottom_top span a { position: relative; display: block; width: 200px; height: 200px; margin-top: -4px; background-color: #ff7800; color: white; font-family: "Segoe UI", helvetica, Arial; line-height: 200px; font-size: 12px; } #bottom_top:after { display: block; clear: both; height: 0px; visibility: hidden; content: ' '; } #bottom_top li span:hover { margin-top: -100%; } /* BOTTOM - TOP 100% EFFECT */ #bottom_top2 li { position:relative; text-align: center; cursor: pointer; display: block; float: left; width: 325px; height: 200px; background-color: #FFFFFF; overflow: hidden; margin-right: 10px; } #bottom_top2 span { display: block; height: 100%; width: 100%; transition:all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; } #bottom_top2 span img { position: relative; /* width: 100% !important; height: 100% !important; */ margin-left: -10px; } #bottom_top2 span a { position: relative; display: block; width: 325px; height: 220px; margin-top: 0px; background-color: #FFFFFF; color: #FF7800; font-family: "Arial", helvetica, Arial; line-height: 240px; font-size: 18px; margin-left:-9px; text-decoration:none; } #bottom_top2:after { display: block; clear: both; height: 0px; visibility: hidden; content: ' '; } #bottom_top2 li span:hover { margin-top: -70%; } /* BOTTOM - TOP 100% EFFECT */ #bottom_top3 li { position:relative; text-align: center; cursor: pointer; display: block; float: left; width: 300px; height: 35px; background-color: #ff7800; overflow: hidden; margin-right: 10px; } #bottom_top3 span { display: block; height: 100%; width: 100%; transition:all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; } #bottom_top3 span img { position: relative; width: 100% !important; height: 100% !important; } #bottom_top3 span a { position: relative; display: block; width: 300px; height: 35px; margin-top: -4px; background-color: #ff7800; color: white; font-family: "Segoe UI", helvetica, Arial; line-height: 50px; font-size: 12px; margin-left: -12px; } #bottom_top3:after { display: block; clear: both; height: 0px; visibility: hidden; content: ' '; } #bottom_top3 li span:hover { margin-top: -15%; } /* HoverSlider Styles */ .hs-container, .hs-btm { margin: 0px auto; } .hs-inner { position: relative; } .hs-inner, .hs-image, .hs-image-container { width: 100%; height: 100%; } /* BUGFIX v1.5 prevent to show images while loading the page */ .hs-image { display: none; } .hs-inner { overflow: hidden; } .hs-html { position: absolute; z-index: 10; display: none; } .hs-html * { position: relative; z-index: 15; } .hs-bg { position: absolute !important; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 11 !important; } .hs-image-container { position: absolute; display: none; } .hs-image { position: absolute; background-position: center center; } .hs-btm { position: relative; display: none; } .hs-shadow { position: relative; z-index: 1; } .hs-slideline { position: absolute; z-index: 2; width: 100%; font-size: 0px !important; line-height: 0px !important; } .hs-slider { left: 0px; position: absolute; } .hs-controls { display: inline-block; position: relative; margin: 0 auto; z-index: 3; } .hs-controls span { display: inline-block; height: 100%; line-height: 100%; margin: 0; padding: 0; border: 0; cursor: default; } #pagination-flickr li { border:0; padding:0; font-size:15px; list-style:none; } #pagination-flickr a { border:solid 1px #DDDDDD; margin-right:2px; color:#FF7800; } #pagination-flickr .previous-off, #pagination-flickr .next-off { color:#FF7800; display:block; float:left; font-weight:bold; padding:3px 4px; } #pagination-flickr .next a, #pagination-flickr .previous a { font-weight:bold; border:solid 1px #FFFFFF; } #pagination-flickr .active { color:#ff0084; border:solid 1px #DDDDDD; margin-right:2px; } #pagination-flickr a:link, #pagination-flickr a:visited { color:#FF7800; display:block; float:left; padding:2px 5px; text-decoration:none; } #pagination-flickr a:hover { background:#FF7800; color:#ffffff; } /* Additional Styles */ .clear{ clear: both; } /*============================================= GLOBAL CONFIGURATION =============================================*/ .portfolio-items li, .portfolio-items h3, .portfolio-items p, .portfolio-items a{ margin: 0; } /* Portfolio Styles */ .portfolio-container{ width: 940px; margin-left: 10px; margin-right: 10px; } .portfolio-items { margin: 10px 0; } /* Portfolio list */ .portfolio-items li{ display: inline-block; margin: 10px; float: left; list-style: none; position: relative; } /* Portfolio image */ .portfolio-items li img{ display: block; width: 201px; height: 150px; padding: 6px; background: #eee; border: 1px solid #fff; border-radius: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35); -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.35); } /*============================================= BUTTON =============================================*/ /*Default (blue) -----------------------*/ .pf_button { display: inline-block; padding: 5px 13px !important; margin: 10px 5px !important; margin-right: 0 !important; border: solid 1px #000; float: right; /* Button background */ background: #FF7800; background: -moz-linear-gradient(top, #FF7800 0%, #FF8400 44%, #FF8400 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FF7800), color-stop(44%,#FF8400), color-stop(100%,#FF8400)); background: -webkit-linear-gradient(top, #FF7800 0%,#FF8400 44%,#FF8400 100%); background: -o-linear-gradient(top, #FF7800 0%,#FF8400 44%,#FF8400 100%); background: -ms-linear-gradient(top, #FF7800 0%,#FF8400 44%,#FF8400 100%); background: linear-gradient(top, #FF7800 0%,#FF8400 44%,#FF8400 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF7800', endColorstr='#FF8400',GradientType=0 ); /*Button text*/ color: #eee; font: 100% Arial, Helvetica, sans-serif; text-align: center; text-shadow: 0 1px 0 rgba(55,121,188,.5); text-decoration: none !important; vertical-align: middle; zoom:1; *display:inline; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3); -moz-box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3); box-shadow: 0 1px 0 rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(255,255,255,.3); } .pf_button:hover { background: #FF8400; } .pf_button.yellow { border-color: #edad14; background: #ffe20b; background: -moz-linear-gradient(top, #fff21e 0%, #ffd901 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff21e), color-stop(100%,#ffd901)); background: -webkit-linear-gradient(top, #fff21e 0%,#ffd901 100%); background: -o-linear-gradient(top, #fff21e 0%,#ffd901 100%); background: -ms-linear-gradient(top, #fff21e 0%,#ffd901 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff21e', endColorstr='#ffd901',GradientType=0 ); background: linear-gradient(top, #fff21e 0%,#ffd901 100%); } .pf_button.yellow:hover { background: #fff21e; } .pf_button.orange { border-color: #a3620a; background: #f9800f; background: -moz-linear-gradient(top, #ff9a22 0%, #f46e01 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff9a22), color-stop(100%,#f46e01)); background: -webkit-linear-gradient(top, #ff9a22 0%,#f46e01 100%); background: -o-linear-gradient(top, #ff9a22 0%,#f46e01 100%); background: -ms-linear-gradient(top, #ff9a22 0%,#f46e01 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9a22', endColorstr='#f46e01',GradientType=0 ); background: linear-gradient(top, #ff9a22 0%,#f46e01 100%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.4); } .pf_button.orange:hover { background: #ff9a22; } .pf_button.blue { border-color: #0076A9; background: #4eb2f4; background: -moz-linear-gradient(top, #4eb2f4 0%, #207ce5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4eb2f4), color-stop(100%,#207ce5)); background: -webkit-linear-gradient(top, #4eb2f4 0%,#207ce5 100%); background: -o-linear-gradient(top, #4eb2f4 0%,#207ce5 100%); background: -ms-linear-gradient(top, #4eb2f4 0%,#207ce5 100%); background: linear-gradient(top, #4eb2f4 0%,#207ce5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4eb2f4', endColorstr='#207ce5',GradientType=0 ); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.4); } .pf_button.blue:hover { background: #499bea; } .pf_button.lightblue { border-color: #0076a3; background: #49b3fc; background: -moz-linear-gradient(top, #76c7ff 0%, #1da0fa 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#76c7ff), color-stop(100%,#1da0fa)); background: -webkit-linear-gradient(top, #76c7ff 0%,#1da0fa 100%); background: -o-linear-gradient(top, #76c7ff 0%,#1da0fa 100%); background: -ms-linear-gradient(top, #76c7ff 0%,#1da0fa 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76c7ff', endColorstr='#1da0fa',GradientType=0 ); background: linear-gradient(top, #76c7ff 0%,#1da0fa 100%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.4); } .pf_button.lightblue:hover { background: #76c7ff; } .pf_button.darkblue { border-color: #1C2E4D; background: #446693; background: -moz-linear-gradient(top, #446693 0%, #192b49 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#446693), color-stop(100%,#192b49)); background: -webkit-linear-gradient(top, #446693 0%,#192b49 100%); background: -o-linear-gradient(top, #446693 0%,#192b49 100%); background: -ms-linear-gradient(top, #446693 0%,#192b49 100%); background: linear-gradient(top, #446693 0%,#192b49 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#446693', endColorstr='#192b49',GradientType=0 ); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.4); } .pf_button.darkblue:hover { background: #436490; } .pf_button.green { border-color: #4e7521; background: #76ab3b; background: -moz-linear-gradient(top, #90c356 0%, #649a27 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#90c356), color-stop(100%,#649a27)); background: -webkit-linear-gradient(top, #90c356 0%,#649a27 100%); background: -o-linear-gradient(top, #90c356 0%,#649a27 100%); background: -ms-linear-gradient(top, #90c356 0%,#649a27 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#90c356', endColorstr='#649a27',GradientType=0 ); background: linear-gradient(top, #90c356 0%,#649a27 100%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.4); } .pf_button.green:hover { background: #90c356; } .pf_button.limegreen { border-color: #5E7E00; background: #b9c701; background: -moz-linear-gradient(top, #b9c701 0%, #678700 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b9c701), color-stop(100%,#678700)); background: -webkit-linear-gradient(top, #b9c701 0%,#678700 100%); background: -o-linear-gradient(top, #b9c701 0%,#678700 100%); background: -ms-linear-gradient(top, #b9c701 0%,#678700 100%); background: linear-gradient(top, #b9c701 0%,#678700 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b9c701', endColorstr='#678700',GradientType=0 ); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.4); } .pf_button.limegreen:hover { background: #A9BA00; } .pf_button.saddlebrown { border-color: #7D2906; background: #bb5a0c; background: -moz-linear-gradient(top, #bb5a0c 0%, #661704 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bb5a0c), color-stop(100%,#661704)); background: -webkit-linear-gradient(top, #bb5a0c 0%,#661704 100%); background: -o-linear-gradient(top, #bb5a0c 0%,#661704 100%); background: -ms-linear-gradient(top, #bb5a0c 0%,#661704 100%); background: linear-gradient(top, #bb5a0c 0%,#661704 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bb5a0c', endColorstr='#661704',GradientType=0 ); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.4); } .pf_button.saddlebrown:hover { background: #bb5a0c; } .pf_button.red { border-color: #9e0b0f; background: #e41d24; background: -moz-linear-gradient(top, #fb4e55 0%, #d7020a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fb4e55), color-stop(100%,#d7020a)); background: -webkit-linear-gradient(top, #fb4e55 0%,#d7020a 100%); background: -o-linear-gradient(top, #fb4e55 0%,#d7020a 100%); background: -ms-linear-gradient(top, #fb4e55 0%,#d7020a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb4e55', endColorstr='#d7020a',GradientType=0 ); background: linear-gradient(top, #fb4e55 0%,#d7020a 100%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.4); } .pf_button.red:hover { background: #fb4e55; } .pf_button.darkred { border-color: #810B01; background: #bc1a02; background: -moz-linear-gradient(top, #bc1a02 0%, #660500 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bc1a02), color-stop(100%,#660500)); background: -webkit-linear-gradient(top, #bc1a02 0%,#660500 100%); background: -o-linear-gradient(top, #bc1a02 0%,#660500 100%); background: -ms-linear-gradient(top, #bc1a02 0%,#660500 100%); background: linear-gradient(top, #bc1a02 0%,#660500 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bc1a02', endColorstr='#660500',GradientType=0 ); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.4); } .pf_button.darkred:hover { background: #bc1a02; } .pf_button.pink { border-color: #8F2761; background: #bd5094; background: -moz-linear-gradient(top, #bd5094 0%, #70204c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bd5094), color-stop(100%,#70204c)); background: -webkit-linear-gradient(top, #bd5094 0%,#70204c 100%); background: -o-linear-gradient(top, #bd5094 0%,#70204c 100%); background: -ms-linear-gradient(top, #bd5094 0%,#70204c 100%); background: linear-gradient(top, #bd5094 0%,#70204c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bd5094', endColorstr='#70204c',GradientType=0 ); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.4); } .pf_button.pink:hover { background: #BD5094; } .pf_button.black { border-color: #000000; background: #111; background: -moz-linear-gradient(top, #4f4f4f 0%, #030303 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4f4f4f), color-stop(100%,#030303)); background: -webkit-linear-gradient(top, #4f4f4f 0%,#030303 100%); background: -o-linear-gradient(top, #4f4f4f 0%,#030303 100%); background: -ms-linear-gradient(top, #4f4f4f 0%,#030303 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4f4f4f', endColorstr='#030303',GradientType=0 ); background: linear-gradient(top, #4f4f4f 0%,#030303 100%); color: #eee !important; text-shadow: 0 -1px 0 rgba(0,0,0,.8); } .pf_button.black:hover { background: #4f4f4f; } .pf_button.purple { border-color: #350d4c; background: #7933ac; background: -moz-linear-gradient(top, #9655c6 0%, #661e9b 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9655c6), color-stop(100%,#661e9b)); background: -webkit-linear-gradient(top, #9655c6 0%,#661e9b 100%); background: -o-linear-gradient(top, #9655c6 0%,#661e9b 100%); background: -ms-linear-gradient(top, #9655c6 0%,#661e9b 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9655c6', endColorstr='#661e9b',GradientType=0 ); background: linear-gradient(top, #9655c6 0%,#661e9b 100%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.6); } .pf_button.purple:hover { background: #9655c6; } .pf_button.gray { border-color: #656565; background: #888888; background: -moz-linear-gradient(top, #adadad 0%, #707070 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#adadad), color-stop(100%,#707070)); background: -webkit-linear-gradient(top, #adadad 0%,#707070 100%); background: -o-linear-gradient(top, #adadad 0%,#707070 100%); background: -ms-linear-gradient(top, #adadad 0%,#707070 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adadad', endColorstr='#707070',GradientType=0 ); background: linear-gradient(top, #adadad 0%,#707070 100%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.3); } .pf_button.gray:hover { background: #adadad; } .pf_button.darkgray { border-color: #21272D; background: #646c75; background: -moz-linear-gradient(top, #646c75 0%, #2c333a 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#646c75), color-stop(100%,#2c333a)); background: -webkit-linear-gradient(top, #646c75 0%,#2c333a 100%); background: -o-linear-gradient(top, #646c75 0%,#2c333a 100%); background: -ms-linear-gradient(top, #646c75 0%,#2c333a 100%); background: linear-gradient(top, #646c75 0%,#2c333a 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#646c75', endColorstr='#2c333a',GradientType=0 ); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.3); } .pf_button.darkgray:hover { background: #646c75; } .pf_button.silver { border-color: #727272; background: #d2d2d2; background: -moz-linear-gradient(top, #d2d2d2 0%, #a5a5a5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d2d2d2), color-stop(100%,#a5a5a5)); background: -webkit-linear-gradient(top, #d2d2d2 0%,#a5a5a5 100%); background: -o-linear-gradient(top, #d2d2d2 0%,#a5a5a5 100%); background: -ms-linear-gradient(top, #d2d2d2 0%,#a5a5a5 100%); background: linear-gradient(top, #d2d2d2 0%,#a5a5a5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d2d2', endColorstr='#a5a5a5',GradientType=0 ); color: #fff !important; text-shadow: 0 -1px 0 rgba(0,0,0,.3); } .pf_button.silver:hover { background: #d2d2d2; } /*============================================= CAPTIONS =============================================*/ /* Title */ .portfolio-items li div.caption h3, .portfolio-items li div.caption2 h3, .portfolio-items li div.caption3 h3, .portfolio-items li div.caption4 h3, .portfolio-items li div.caption5 h3, .portfolio-items li div.caption6 h3, .portfolio-items li div.caption7 h3, .portfolio-items li div.caption8 h3, .portfolio-items li div.caption9 h3, .portfolio-items li div.caption10 h3, .portfolio-items li div.caption11 h3, .portfolio-items li div.caption12 h3, .portfolio-items li div.caption13 h3, .portfolio-items li div.caption14 h3, .portfolio-items li div.caption15 h3{ font-weight: 700; font-size: 16px; text-transform: uppercase; padding-bottom: 5px; margin-bottom: 10px; border-bottom: 1px solid #aaa; text-shadow: 1px 1px 1px #303857; } .portfolio-items li div.caption, .portfolio-items li div.caption2, .portfolio-items li div.caption3, .portfolio-items li div.caption4, .portfolio-items li div.caption5, .portfolio-items li div.caption6, .portfolio-items li div.caption7, .portfolio-items li div.caption8, .portfolio-items li div.caption9, .portfolio-items li div.caption10, .portfolio-items li div.caption11, .portfolio-items li div.caption12, .portfolio-items li div.caption13, .portfolio-items li div.caption14, .portfolio-items li div.caption15{ display: block; background: #000;/* IE fix */ background: rgba(0,0,0, 0.7); color: #fff; font-family: "Helvetica", Arial, sans-serif; font-weight: 400; font-size: 11px; padding: 10px; position: absolute; overflow: hidden; text-shadow: 1px 1px 1px #303857; /*opacity*/ opacity: 0;/* all browsers */ filter: alpha(opacity = 0);/* IE fix */ /*transitions(animation effect)*/ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /* Portfolio caption sizes on hover action */ .portfolio-items li:hover div.caption, .portfolio-items li:hover div.caption2, .portfolio-items li:hover div.caption3, .portfolio-items li:hover div.caption4, .portfolio-items li:hover div.caption5, .portfolio-items li:hover div.caption6, .portfolio-items li:hover div.caption7, .portfolio-items li:hover div.caption8, .portfolio-items li:hover div.caption9, .portfolio-items li:hover div.caption10, .portfolio-items li:hover div.caption11, .portfolio-items li:hover div.caption12, .portfolio-items li:hover div.caption13, .portfolio-items li:hover div.caption14, .portfolio-items li:hover div.caption15{ width: 181px; height: 130px; /*opacity*/ opacity: 1;/* all browsers */ filter: alpha(opacity = 80); /* IE fix */ } /* Portfolio caption (default style) --------------------------------------------*/ .portfolio-items li div.caption{ top: 7px; /* direction Y */ right: 7px;/* direction X */ width: 0; height: 0; } /* Portfolio caption2 --------------------------------------------*/ .portfolio-items li div.caption2{ top: 7px; /* direction Y */ left: 7px;/* direction X */ width: 0; height: 0; } /* Portfolio caption3 --------------------------------------------*/ .portfolio-items li div.caption3{ bottom: 7px; /* direction Y */ right: 7px;/* direction X */ width: 0; height: 0; } /* Portfolio caption4 --------------------------------------------*/ .portfolio-items li div.caption4{ bottom: 7px; /* direction Y */ left: 7px;/* direction X */ width: 0; height: 0; } /* Portfolio caption5 --------------------------------------------*/ .portfolio-items li div.caption5{ top: 7px; /* direction Y */ left: 7px;/* direction X */ width: 0; height: 130px; } /* Portfolio caption6 --------------------------------------------*/ .portfolio-items li div.caption6{ top: 7px; /* direction Y */ right: 7px;/* direction X */ width: 0; height: 130px; } /* Portfolio caption7 --------------------------------------------*/ .portfolio-items li div.caption7{ top: 7px; /* direction Y */ left: 7px;/* direction X */ width: 181px; height: 0; } /* Portfolio caption8 --------------------------------------------*/ .portfolio-items li div.caption8{ bottom: 7px; /* direction Y */ right: 7px;/* direction X */ width: 181px; height: 0; } /* Portfolio caption9 --------------------------------------------*/ .portfolio-items li div.caption9{ bottom: 7px; /* direction Y */ right: 7px;/* direction X */ width: 181px; height: 130px; } /* Portfolio caption10 --------------------------------------------*/ .portfolio-items li div.caption10{ bottom: 7px; /* direction Y */ right: 7px;/* direction X */ width: 0px; height: 0px; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); } .portfolio-items li:hover div.caption10{ bottom: 7px; /* direction Y */ right: 7px;/* direction X */ width: 181px; height: 130px; /*opacity*/ opacity: 1;/* all browsers */ filter: alpha(opacity = 80); /* IE fix */ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } /* Portfolio caption11 --------------------------------------------*/ .portfolio-items li div.caption11{ top: 7px; /* direction Y */ left: 7px;/* direction X */ width: 0px; height: 0px; -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); } .portfolio-items li:hover div.caption11{ bottom: 7px; /* direction Y */ right: 7px;/* direction X */ width: 181px; height: 130px; /*opacity*/ opacity: 1;/* all browsers */ filter: alpha(opacity = 80); /* IE fix */ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); } /* Portfolio caption12 --------------------------------------------*/ .portfolio-items li div.caption12{ bottom: 7px; /* direction Y */ right: 7px;/* direction X */ width: 181px; height: 130px; } .caption12 { background-color: rgba(146,96,91,0.5); filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-in 0.4s; -moz-transition: all 0.3s ease-in 0.4s; -o-transition: all 0.3s ease-in 0.4s; -ms-transition: all 0.3s ease-in 0.4s; transition: all 0.3s ease-in 0.4s; } .caption12 h3 { filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -webkit-transition: all 0.3s ease-in-out 0.1s; -moz-transition: all 0.3s ease-in-out 0.1s; -o-transition: all 0.3s ease-in-out 0.1s; -ms-transition: all 0.3s ease-in-out 0.1s; transition: all 0.3s ease-in-out 0.1s; } .caption12 p { filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(10); -moz-transform: scale(10); -o-transform: scale(10); -ms-transform: scale(10); transform: scale(10); -webkit-transition: all 0.3s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; transition: all 0.3s ease-in-out 0.2s; } .caption12 a.pf_button { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -o-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); } .caption12:hover h3 { filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .caption12:hover p { filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .caption12:hover a.pf_button { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } /* Portfolio caption13 --------------------------------------------*/ .portfolio-items li div.caption13{ bottom: 7px; /* direction Y */ right: 7px;/* direction X */ width: 181px; height: 130px; } .caption13 { background-color: rgba(146,96,91,0.5); filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-in 0.4s; -moz-transition: all 0.3s ease-in 0.4s; -o-transition: all 0.3s ease-in 0.4s; -ms-transition: all 0.3s ease-in 0.4s; transition: all 0.3s ease-in 0.4s; } .caption13 h3 { filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-in-out 0.1s; -moz-transition: all 0.3s ease-in-out 0.1s; -o-transition: all 0.3s ease-in-out 0.1s; -ms-transition: all 0.3s ease-in-out 0.1s; transition: all 0.3s ease-in-out 0.1s; } .caption13 p { filter: alpha(opacity=0); opacity: 0; -webkit-transform: scale(0); -moz-transform: scale(0); -o-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: all 0.3s ease-in-out 0.2s; -moz-transition: all 0.3s ease-in-out 0.2s; -o-transition: all 0.3s ease-in-out 0.2s; -ms-transition: all 0.3s ease-in-out 0.2s; transition: all 0.3s ease-in-out 0.2s; } .caption13:hover h3 { filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .caption13:hover p { filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } /* Portfolio caption14 --------------------------------------------*/ .portfolio-items li div.caption14{ bottom: 7px; /* direction Y */ right: 7px;/* direction X */ width: 181px; height: 130px; } .caption14 { background-color: rgba(146,96,91,0.5); filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-in 0.4s; -moz-transition: all 0.3s ease-in 0.4s; -o-transition: all 0.3s ease-in 0.4s; -ms-transition: all 0.3s ease-in 0.4s; transition: all 0.3s ease-in 0.4s; } .caption14 h3 { filter: alpha(opacity=0); opacity: 0; -webkit-transform: translateY(-200px); -moz-transform: translateY(-200px); -o-transform: translateY(-200px); -ms-transform: translateY(-200px); transform: translateY(-200px); -webkit-transition: all 0.6s ease-in-out; -moz-transition: all 0.6s ease-in-out; -o-transition: all 0.6s ease-in-out; -ms-transition: all 0.6s ease-in-out; transition: all 0.6s ease-in-out; } .caption14 p { filter: alpha(opacity=0); opacity: 0; -webkit-transform: translateY(200px); -moz-transform: translateY(200px); -o-transform: translateY(200px); -ms-transform: translateY(200px); transform: translateY(200px); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .caption14:hover h3 { filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .caption14:hover p { filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } /* Portfolio caption15 --------------------------------------------*/ .portfolio-items li div.caption15{ bottom: 7px; /* direction Y */ right: 7px;/* direction X */ width: 181px; height: 130px; } .caption15 { background-color: rgba(146,96,91,0.5); filter: alpha(opacity=0); opacity: 0; -webkit-transition: all 0.3s ease-in 0.4s; -moz-transition: all 0.3s ease-in 0.4s; -o-transition: all 0.3s ease-in 0.4s; -ms-transition: all 0.3s ease-in 0.4s; transition: all 0.3s ease-in 0.4s; } .caption15 h3 { filter: alpha(opacity=0); opacity: 0; -webkit-transform: translateX(200px); -moz-transform: translateX(200px); -o-transform: translateX(200px); -ms-transform: translateX(200px); transform: translateX(200px); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .caption15 p { filter: alpha(opacity=0); opacity: 0; -webkit-transform: translateX(-200px); -moz-transform: translateX(-200px); -o-transform: translateX(-200px); -ms-transform: translateX(-200px); transform: translateX(-200px); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .caption15:hover h3 { filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } .caption15:hover p { filter: alpha(opacity=100); opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition-delay: 0.2s; -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -ms-transition-delay: 0.2s; transition-delay: 0.2s; } /* Caption background -----------------------------------------*/ /*----===----*/ .ctn_blue{ background: #0877CC !important;/* IE fix */ background: rgba(8,119,204, 0.85) !important; color: #fff !important; } .ctn_blue .pf_button{ border: 1px solid #0666B4 !important; } /*----===----*/ .ctn_green{ background: #5D8C00 !important;/* IE fix */ background: rgba(93,140,0, 0.85) !important; color: #fff !important; } .ctn_green .pf_button{ border: 1px solid #607B0E !important; } /*----===----*/ .ctn_brown{ background: #A52A2A !important;/* IE fix */ background: rgba(165,42,42, 0.85) !important; color: #fff !important; } .ctn_brown .pf_button{ border: 1px solid #7B1F1F !important; } /*----===----*/ .ctn_darkslategray{ background: #483D8B !important;/* IE fix */ background: rgba(72,61,139, 0.85) !important; color: #fff !important; } .ctn_darkslategray .pf_button{ border: 1px solid #3A3271 !important; } /*----===----*/ .ctn_indianred{ background: #D76060 !important;/* IE fix */ background: rgba(215,96,96, 0.85) !important; color: #fff !important; } .ctn_indianred .pf_button{ border: 1px solid #B93636 !important; } /*----===----*/ .ctn_white{ background: #fff !important;/* IE fix */ background: rgba(255,255,255, 0.75) !important; color: #333 !important; text-shadow: none !important; } .ctn_white h3{ text-shadow: none !important; } .ctn_white .pf_button{ border: 1px solid #555 !important; } /*----===----*/ .ctn_teal{ background: #008989 !important;/* IE fix */ background: rgba(0,137,137, 0.85) !important; color: #fff !important; } .ctn_teal .pf_button{ border: 1px solid #007171 !important; } /*----===----*/ .ctn_orange{ background: #FF8C00 !important;/* IE fix */ background: rgba(255,140,0, 0.75) !important; color: #fff !important; } .ctn_orange .pf_button{ border: 1px solid #CF7200 !important; } /*----===----*/ .ctn_blueviolet{ background: #8A2BE2 !important;/* IE fix */ background: rgba(138,43,226, 0.75) !important; color: #fff !important; } .ctn_blueviolet .pf_button{ border: 1px solid #6A21AE !important; } /*----===----*/ .ctn_pink{ background: #FF69B4 !important;/* IE fix */ background: rgba(255,105,180, 0.80) !important; color: #fff !important; } .ctn_pink .pf_button{ border: 1px solid #CC5490 !important; } /*----===----*/ .ctn_indigo{ background: #4B0082 !important;/* IE fix */ background: rgba(75,0,130, 0.75) !important; color: #fff !important; } .ctn_pink .pf_button{ border: 1px solid #430073 !important; } /*----===----*/ .ctn_slateblue{ background: #6A5ACD !important;/* IE fix */ background: rgba(106,90,205, 0.75) !important; color: #fff !important; } .ctn_slateblue .pf_button{ border: 1px solid #5448A4 !important; } /* Some stylesheet reset */ .nav, .nav ul { margin: 0; padding: 0; list-style: none; line-height: 1; z-index:9999999999; } /* The top navigation menu */ .nav { /* Layout & positioning */ display: block; position: relative; min-width: 984px; width: 984px; margin: 0 auto 5px auto; height: 27px; border-bottom: 3px solid #FF7800; border-top-left-radius: 3px; border-top-right-radius: 3px; /* Background & effects */ background: #494949; /* Background for Internet Explorer 9 and older browsers */ background: -webkit-linear-gradient(bottom, #444, #555); /* Background for Chrome & Safari */ background: -moz-linear-gradient(bottom, #444, #555); /* Background for Firefox */ background: -o-linear-gradient(bottom, #444, #555); /* Background for Opera */ background: -ms-linear-gradient(bottom, #444, #555); /* Background for Internet Explore 10+ */ z-index:9999999999; } /* The link containers */ .nav>li { display: block; float: left; position: relative; margin: 0; padding: 0; z-index:9999999999; } /* The main navigation links */ .nav>li>a { /* Layout & positioning */ display: block; width: 86px; padding: 7px 0px; border-right: 1px dotted #393939; border-left: 1px dotted #595959; /* Typography */ font-family: Helvetica, Arial, sans-serif; font-size: 12px; font-weight: normal; text-decoration: none; color: #fff; text-shadow: 0 1px 0 #2a2a2a; text-align: center; /* Chaning the background on hover with a smooth transition */ -webkit-transition: background .35s linear; -moz-transition: background .35s linear; -ms-transition: background .35s linear; -o-transition: background .35s linear; transition: background .35s linear; z-index:9999999999; } /* Chaning the background on hover */ .nav>li>a:hover, .nav>li:hover>a { background: rgba(0, 0, 0, .15); background: #414141; z-index:9999999999; color: #e0e0e0; } .nav>li:first-child a { border-top-left-radius: 3px; z-index:9999999999; } /* The pointer arrow */ .arrow { cursor: pointer; height: 0px; border: 3px solid transparent; border-bottom-color: #FF7800; left: 43px; position: absolute; bottom: 0px; width: 0; z-index: 0; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; -webkit-transition: all .3s ease; transition: all .3s ease; z-index:9999999999; } .arrow:hover { -moz-transition-duration: 3000s; -ms-transition-duration: 3000s; -o-transition-duration: 3000s; -webkit-transition-duration: 3000s; transition-duration: 3000s; z-index:9999999999; } .nav li:nth-child(1):hover ~ .arrow, .nav .active:nth-child(1) ~ .arrow { left: 43px; } .nav li:nth-child(2):hover ~ .arrow, .nav .active:nth-child(2) ~ .arrow { left: 130px; } .nav li:nth-child(3):hover ~ .arrow, .nav .active:nth-child(3) ~ .arrow { left: 219px; } .nav li:nth-child(4):hover ~ .arrow, .nav .active:nth-child(4) ~ .arrow { left: 306px; } .nav li:nth-child(5):hover ~ .arrow, .nav .active:nth-child(5) ~ .arrow { left: 392px; } .nav li:nth-child(6):hover ~ .arrow, .nav .active:nth-child(6) ~ .arrow { left: 482px; } .nav li:nth-child(7):hover ~ .arrow, .nav .active:nth-child(7) ~ .arrow { left: 570px; } .nav li:nth-child(8):hover ~ .arrow, .nav .active:nth-child(8) ~ .arrow { left: 658px; } .nav li:nth-child(9):hover ~ .arrow, .nav .active:nth-child(9) ~ .arrow { left: 748px; } .nav li:nth-child(10):hover ~ .arrow, .nav .active:nth-child(10) ~ .arrow { left: 835px; } .nav li:nth-child(11):hover ~ .arrow, .nav .active:nth-child(11) ~ .arrow { left: 960px; } /* General styling for the submenus */ .nav ul { display: block; position: absolute; left: -9999px; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); z-index:9999999999; } /* Level 1 submenus */ .nav>li>ul { cursor: pointer; padding-top: 0px; z-index: 200; top: 34px; z-index:9999999999; } /* Making the level 1 submenu to appear on hover */ .nav>li:hover>ul { left: -1px; z-index:9999999999; } /* Level 2+ submenus */ .nav ul ul { left: -9999px; top: 0px; z-index: 399; z-index:9999999999; } /* Making the level 2+ submenu to appear on hover */ .nav ul>li:hover>ul { left: 135px; top: 0px; z-index:9999999999; } /* The submenu link containers */ .nav ul li { position: relative; display: block; /* Creating the slide effect. The list elements which contain the links have 0 height. On hover, they will expand */ height: 0px; -webkit-transition: height .2s; -moz-transition: height .2s; -o-transition: height .2s; -ms-transition: height .2s; z-index:9999999999; } /* Expanding the list elements which contain the links */ .nav li:hover>ul>li { height: 24px; z-index:9999999999; } .nav>li:hover>ul>li:first-child { height: 27px; z-index:9999999999; } .nav>li>ul>li.dropdown:first-child>ul { top: 3px; z-index:9999999999; } .nav>li>ul>li:first-child>a { border-top: 3px solid #FF7800; z-index:9999999999; } /* The links of the submenus */ .nav ul li a { /* Layout */ display: block; width: 105px; padding: 6px 10px 6px 20px; /* Typography */ font-size: 12px; color: #999; font-family: Helvetica, Arial, sans-serif; text-decoration: none; background: #f0f0f0; /* Every change to the links (background, color etc) will be made with a smooth transition */ -webkit-transition: all .2s; -moz-transition: all .2s; -ms-transition: all .2s; -o-transition: all .2s; transition: all .2s; z-index:9999999999; } .nav>li>ul>li:first-child>a::before { content: ""; display: block; position: absolute; width: 100%; height: 6px; background: transparent; top: -6px; left: 0; z-index: 9999; } /* The hover state of the links */ .nav ul li:hover>a, .nav ul li>a:hover { background: #e7e7e7; color: #FF7800; z-index:9999999999; } .nav .dropdown li{ margin-top:-2px; } /* The arrow indicating a level 2+ submenu */ .nav ul>.dropdown>a::after { content: ""; position: absolute; top: 10px; right: 3px; width: 0px; height: 0px; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 3px solid #999; border-right: 3px solid transparent; z-index:9999999999; } /* Changing the color of the arrow on hover */ .nav ul>.dropdown:hover>a::after, .nav ul>.dropdown>a:hover::after { border-left-color: #FF7800; z-index:9999999999; } .menu_cont { -webkit-transition: .3s ease-in-out; -moz-transition: .3s ease-in-out; opacity : 0.3; filter : alpha(opacity=30); } .menu_cont:hover { opacity : 1; filter : alpha(opacity=100); } .lienactu { color:#000000; } .lienactu:hover { color:#FF7800; }