@charset "UTF-8";
/* CSS Document */


#catalogheadercontainer{max-width:500px; width:100%; margin:10px auto 0 auto;}
#catalogheadercontainer{max-width:500px; width:100%; margin:10px auto 0 auto;}
#catalogheaderframe{max-width:500px; width:100%; height:66px;}
#upArrow{ display:none;}
#downArrow{ display:none;}

#links{	text-align:center;}
#fixed-header{width:100%; height:40px; background-color:#e6e6e6; opacity:0.95; padding:0px; position:fixed; top:0px;}
#links a{text-decoration:none; color:blue; border:1px solid gray; padding:0px 4px 0px 4px; border-radius:5px; background-color:#fff; display:block; float:left; margin-right:4px; line-height:1.3; height:16px; margin-bottom:5px; font-family:charcoal; font-size:13px;}
#links a:hover{color:#9B242D}

#item-number{text-align:center; font-size:18px; font-weight:bold; margin-top:20px; display:block;}
#nextprevitems{text-align:center; font-size:14px; font-weight:600; display:block;}

/*CONTAINER FOR THE THUMBNAILS IMAGES*/
#boardContainer{max-width:720px; width:100%; margin:0 auto;}

/*PREVIEW IMAGE STYLE*/
#preview{position:absolute;	border:1px solid #ccc;	background-color:rgba(230,230,230,0.8);	background-color:#e6e6e6\9;	padding:5px; display:none; color:#000; text-align:center; font-weight:bold;}

/*THUMBNAIL IMAGE STYLE FOR CONNECTOR BOARDS*/
#board-images img{max-width:150px; width:95%; margin:2.5%; min-width:100px;}
#board-images{ font-size:0;}

/*THUMBNAIL IMAGE STYLE FOR ACCESSORIES*/
#accessories-images img{max-width:150px; width:95%; margin:2.5%; min-width:100px; margin-bottom:30px;}
#accessories-images{ font-size:0;}

/*.preview2{margin:40px 20px;	float:left;}*/


/*THUMBNAIL IMAGE STYLE FOR CB BOARD FINDER*/
/*.preview4{	float:left;	margin:10px 20px 10px 20px;}*/

#board_finder_text{	margin-left:80px; margin:0 auto; overflow:hidden;}

.systemcontainer{width:100%; margin:20px auto; overflow:hidden;}
.link{width:95%; float:left; margin-left:2.5%;}
.description{clear:left; width:95%; margin-left:2.5%; border-bottom:1px solid gray;}
.link img{ max-width:300px; width:100%;}

/*FIXES PROBLEM FOR BORDER DISPLAY ON LINKS WITH IMAGES*/
img{border:0;}

#catalog-share{ width:95%; max-width:260px; margin:0 auto;}
.catalog-icon{width:30px; height:30px;}
#catalog-share i{ width:30px; height:30px; border-radius:100px; transition: all 0.2s ease-out 0s; opacity:0.5; color:#fff; font-size:20px; text-align:center; line-height:32px; vertical-align:middle;}
#catalog-share i:hover{ opacity:1; color:#fff;}

.cb-features{display:block; float:left; text-align:center; height:16px; width:24px; line-height:12px; padding-top:6px; margin-right:6px; margin-bottom:10px; border:1px solid gray;}*/



@media only screen and (min-width:300px) {
#catalogheaderframe{height:43px;}
#board-images img{width:39%; margin:5.5%;}
#accessories-images img{width:39%; margin:5.5%;}
}

@media only screen and (min-width:380px) {
#board-images img{width:26%; margin:3.6%;}
#accessories-images img{width:26%; margin:3.6%;}
}


@media only screen and (min-width:570px) {
.textblue18{ margin-top:100px;}
#catalogheaderframe{height:20px;}
#board-images img{width:21%; margin:2%;}
#accessories-images img{width:21%; margin:2%;}

.systemcontainer{width:90%; margin:20px auto; overflow:hidden;}
.link{width:48%; float:left; margin-right:4%; margin-left:0px;}
.description{float:left; clear:none; width:47%; margin-left:0px; border-bottom:none;}


}

@media only screen and (min-width:730px) {
body {margin-right:10px; margin-bottom:10px;}
#upArrow{display: block; position: absolute; right: 10px; top: 28px;}
#downArrow{ display:block; position:absolute; right:10px; top:100px;}

#upArrow a{width:50px; height:70px; float:left; background: url(../Catalog_Pages/Arrows.png) no-repeat -102px 0px;}
#upArrow a:hover{background: url(../Catalog_Pages/Arrows.png) no-repeat -52px 0;}
#upArrow a:active{background: url(../Catalog_Pages/Arrows.png) no-repeat 0px 0;}
#upArrow a:focus{outline-color:invert; outline-style:none; outline-width:medium;}

#downArrow a{width:50px; height:70px; float:left; background: url(../Catalog_Pages/Arrows.png) no-repeat -102px -70px;}
#downArrow a:hover{background: url(../Catalog_Pages/Arrows.png) no-repeat -52px -70px;}
#downArrow a:active{outline:none; background: url(../Catalog_Pages/Arrows.png) no-repeat 0px -70px;}
#downArrow a:focus{outline-color:invert; outline-style:none; outline-width:medium;}

.systemcontainer{width:720px; margin:30px auto; overflow:hidden;}
.link{width:300px; float:left; margin-left:40px; margin-right:30px;}
.description{float:left; width:310px;}


}